Twitter's new font, Chirp, is apparently giving some users headaches
cnet.com
cnet.com
Here we have the opposite: Twitter decided that tweet bodies should perform a marketing function. They sacrificed utility for brand cohesiveness. I understand the motivation, but there's a middle ground that serves both purposes: use your own custom font for the UI and use a system font for user-generated content. Gmail does this: the UI is Roboto, while the default font is "Arial, Helvetica".
I'm sure I'll get used to it, but eh.
It seems like when you're VC-backed and get to a certain size, one of the items on the checklist is "design custom font that looks like every other VC-backed platform's custom font, but is slightly different."
Didn't Dropbox also make their own font?
I personally block fonts via uBlock Origin, which lets me allow them for the subset of websites I visit regularly enough that I'm okay with allowing fontawesome-style fonts.
*:not([class*='icon' i]):not(i):not([style*='icon' i]):not([aria-hidden='true']):not([aria-label]):not([class*='fa-']) {
font-family: "Operator Pro" !important;
}https://i.postimg.cc/Gm8L8MPy/sw-appy-20210813-193924.png
In case that website blocks hotlinking: https://postimg.cc/gallery/RVSBXh7
The first image shows https://twitter.com/newsycombinator with devtools on the right showing that the computed `font-family` for that one span has "TwitterChirp", and the uBO logger at the bottom showing that chirp-*.woff fonts were blocked by my uBO rules.
The second image is the Fonts tab of the dev tools showing that the font that the browser is using is Roboto, which I have available locally.
As for how I do it, see https://news.ycombinator.com/item?id=26284124 . If you don't want to go that far, you can still create a rule just for twitter.com that blocks just the chirp*.woff URLs.
It doesn't help with icon fonts based on ligatures instead of PUA characters (Google's Material Design framework seems to do this) but we can't have everything.
https://addons.mozilla.org/en-US/firefox/addon/enforce-brows...
Maybe website owners could just use "monospace" in CSS and let users configure the browsers as they wish. But I guess it's too late for that now as users aren't used to do this.
They often seem to be the result of inexperienced design or design by committee. An unnecessary and distracting effort at differentiation or branding. In the worst cases you might even see a FOUT or have to endure downloading 5mb of zillions of characters of some fonts your browser will never draw.
I know there are cases where it’s tasteful and well executed. I love that. It just isn’t common in my experience.
On my team at work we created a sort of pros and cons list and for our use case (instantdomainsearch.com) it made virtually no sense to incorporate a custom font into our design. When it was all laid out and considered it really drove home for me how unnecessary it is.
The designs looked really nice and it seemed compelling, but in real life on the internet I just want things to 1) load very quickly 2) draw and become interactive very quickly 3) look and feel familiar in the right ways such that I can I intuitively use the software. Custom fonts put a stick in the spokes of each of those points.
Because they're using the "Private Use Area" of the font improperly...
Maybe I'm paranoid but I'm feeling like this is an intentional decision in order to push other fonts/foundries to start adding the Twitter logo as a standard Unicode character. Basically bypassing the need for consensus by just forcing the matter and cementing their logo in typography standards.
I don't think this will push fonts/foundaries to add the twitter logo any more than I feel pushed to use the twitter logo in handwriting. Fonts are very nice in that the user still enjoys a high level of choice in the matter. Heck, even the twitter nonsense could be fixed with a stylus/tampermoney script of one or two lines.
> Because they're using the "Private Use Area" of the font improperly...
Uh, isn't putting your own characters in Unicode's private use area specifically what that area is for? Isn't that where fonts that have dingbats unique to them, for instance, would put them?
Most companies based on user generated content try to claim ownership over it by way of agreements. That has always been murky legal territory and it's not easy to know what value they have.
If the proper rendering of content was made dependent on proprietary fonts, that could be one way to exercise control over where that content can be used.
It's not impossible that making users pick proprietary emoticons could have economic value. Remember where you heard it first...
Gut check: are there currently any trademarked symbols in Unicode? I can't think of any offhand, and it I find it difficult to imagine it happening for precisely that reason.
These are trademarked for other reasons than a company logo though, and I don't really see the point in including company logos (which might change or disappear tomorrow if they go bankrupt or are taken over by another company—and then what with the company logo in Unicode?).
Some Copyright is more Copyright than others...
This is essentially what happened with Arial w/ Helvetica; and companies have been doing this ever since to create new licenses that they can control.
We are drowning in Grotesk/Sans-Serif/Helvetica type fonts! Do we really need another "Big Tech Sans"? Or rather, why can't Twitter just use X? xD
Though to be fair, Depop uses GT America Extended and Expanded, rather than Standard.
I doubt the Android renderer is really broken and no-one has noticed until now, so I’d guess the font either has bad hinting, or more likely it’s just being displayed at an awkward size and vertical positions are being rounded in an awkward way. You can see the slight deviations from the baseline in the iOS screenshots, it’s just much more subtle as it isn’t being hinted.
(Source: I contributed a little bit to font rendering in Urho3D, to fix some similar text aliasing glitches: https://github.com/urho3d/Urho3D/issues/1953)
Having developed for Android off and on over the years, I would absolutely not rule out the possibility that there's been a really basic problem with font rendering, reported in 2008 and repeatedly closed as stale on each version release then re-opened, with the most recent "any progress?" post dated 3 weeks ago, that everyone's just been quietly working around.
So broken hinting it is. Embarrassing that they didn’t pick it up in testing.
This seems really common with tech companies that the fonts they like for "crisp" and "light" look great on Retina Displays and no one thinks to check any other display or OS font renderer. I feel it's also why the designers at so many companies right now often accidentally favor (display) fonts with hints and weight tuned for headlines, high DPI printing, and/or large uses (banners) for places where body fonts with thicker weights and better hints for smaller font sizes on less pixel dense displays would be much better for everyone involved.
(Though some of that belief that it is such a widespread problem comes from my bias from ugly personal experience of getting designs handed to me from the only macOS users in an entire enterprise and having to point out their font choices were entirely inappropriate on anyone else's displays in the company, and being the only one to point it out and easily ignored because I wasn't a designer and what did I know.)
Now I realize that for others to see it, a good zoomed photo with my phone will go a long way:
Step back ten feet and you'll notice that the o In "Notice" looks roundish and the o in "Today" is squared off.
Screen grab that I used: https://imgur.com/a/0LcqKej
https://twitter.com/Tempo_Storm/status/1425549066377777156
Appears to be a standard-res Windows rendering. (Obviously a Retina Mac/iOS rendering will be totally different.)
Not sure what the fuss is about
And I'm not even a big user, I visit like once a week for 10 min. I guess it's even more obvious for people who use it all day long.
I wouldn't say it's better or worst, it's probably just a matter to get used to it.
Check the g, the size of the upper section of the B, the width of the o, the comma...
The fonts are completely different.
(I say as the former head of a type foundry.)
Maybe Office 365 needs to be conservative with fonts. Twitter can push boundaries, though. I wish they'd push boundaries more, ala Bertone or Memphis Group, but I guess the risks are larger the more you push the boundaries.
https://twitter.com/Twitter is 1.6mb. (200k+ of fonts, 500k+ of JS)
What's the difference between Office and Twitter here? Both are apps that should just get out of the way of the content.
Most software should just have native UI that follows the platform guidelines. Unfortunately software companies hire graphic designers who know nothing about interaction design, and generalist programmers who want to do one-size-fits-all UIs. And that's how you get unreadable fonts in slow Electron apps.
Different presentation fonts in web pages, desktops, etc. can start to have the experiential impact of (gui) skins, or non-standard dotfiles.
Please note the things I'm leaving out of this... print, books, static things, etc.
Was it effectively a bad move ?
It's always more economical for a company of Twitter's size to develop their own font because 1) Then they don't have to pay per-use licensing fees, which are huge at the billion user scale, and 2) a peculiarity of copyright law means that the actual shapes of the letters aren't actually protectable by copyright -- you can copy an existing font virtually 100%, tweak a thing or two, and legally call it your own.
Warning: offer not applicable in UK and most countries in EEA. They have the concept of protecting designs there. Japan excludes most designs of fonts because of its utilitarian use BUT if the font (technically typeface) is distinctive and used in a way that can be defended as an artistic choice, it's protected under copyright.
If they're just specifying a font (e.g. 'Helvetica') in their CSS, it's loaded from the users' machine and doesn't cost anything.
Otherwise every site on the internet would be paying fees for fonts.
I could be wrong. Please inform me if I am.
IANAL but this is only true in some jurisdictions, primarily the US and Japan.
Also, I don’t think it’s quite that simple either. The actual type face may not be eligible for copyright, but the computer code describing the particular curves and hinting rules and etc. is. So I think you can’t just trivially copy a font and modify it and call it your own.
But there's of course also the whole "Your honor, as the evidence makes plain, this content/communication is claimed to have originated on Twitter, but does not use our official typeface. We move to dismiss this case/be awarded damages based on the fact that we were not part of this particular incident", paired with "Your honor, as the evidence makes plain, this content uses our proprietary font, but did not originate at twitter. We move to dismiss this case because we were not involved/be awarded damages on the basis us defamation and will be filing a counter-suit for impersonation".
Do you have real-world examples of the hypothetical you invented?
https://arstechnica.com/tech-policy/2017/07/not-for-the-firs...
The transformation from web page to web application was not compatible with things like user stylesheets.
Time was the web was for everyone, and enthusiasts were the main stakeholders.
Now the web is just another marketplace run by corporations.
Look at the source code of Twitter or Facebook. It's intentionally obfuscated and mangled, probably in part to fuck with ad blockers.
I have a few user stylesheets (even a little custom Firefox extension to block one user's comments on a site I frequent), but the sites I'd really like to use them on largely don't make it possible to do so.
Look at a Facebook ad in your browser's web inspector, for example. The "Sponsored" tag is made up of 31 different randomly named span tags. https://imgur.com/a/AHZL8ko
https://superuser.com/questions/318912/how-can-i-override-th...
<fontconfig>
<alias>
<family>Arial</family>
<prefer><family>Ubuntu</family></prefer>
</alias>
<alias>
<family>Helvetica</family>
<prefer><family>Ubuntu</family></prefer>
</alias>
<!-- Many more aliases that -->
<!-- force fonts to Ubuntu. -->
<alias>
<family>sans-serif</family>
<prefer><family>Ubuntu</family></prefer>
</alias>
</fontconfig>
$ fc-match Helvetica
Ubuntu-R.ttf: "Ubuntu" "Regular"
Tangential, but I love the image of a frustrated PM at Facebook hearing the news that "hey, you still have to make this label readable to screenreaders," necessitating an `aria-label` with the plain-text content "Sponsored", which makes all their span-chopping junk completely irrelevant to adblocker rules that can now just look for that string as an anchor :)
The only problem is devs who use fonts for icons, which is as stupid as it sounds.
https://megous.com/dl/tmp/0199107a482b8f75.png
(It would be nice to also have minimum font weight setting, not just minimum size, because some designers just can't be helped and use <=200. Then most of the issues with typography on the web would be solved.)
If you use Firefox’s feature that allows one to turn off website fonts, I wrote an addon which builds on this feature.
Firefox’s stock feature is all-or-nothing. The add-on remembers the websites for which the user wants to enforce/unenforce browser fonts.
https://addons.mozilla.org/en-US/firefox/addon/enforce-brows...
edit: although if I click into the tweets and view them on Twitter, it then uses Chirp.
But more importantly I just want to see a side-by-side comparison.
There seems to be an issue with the OS antialiasing that is rendering characters slightly blurry to feel it's not focused, further straining my eyes.
Seems to have only been tested on Bay Area Apple devices.
It's weird how unpleasant it is. The new font seems rather nice, and I would not even notice it looks different, but... it really hurts to look at.
edit: here's a comparison with helvetica https://i.imgur.com/BJlHQhf.gif
I'm getting Roboto on Linux which (a) looks great and (b) is very similar to the new font
Many things seem to change because people need to change things to rationalize their job title. Is that what's going on here?
Now I realize that for you to see it, a good zoomed photo with my phone will go a long way:
Here's where twitter's font goes oh-so wrong: https://imgur.com/a/Wpw97He
The o in “Notice” happens to start slightly to the left of a pixel boundary, so it has a narrow strip of very light pixels on its left side (pixels with maybe 10-20% coverage). That makes the boundary look fuzzier and rounder.
The o in “Today” is probably more or less flush with the pixel boundary, so its left side has dark-coloured pixels (80-90% coverage).
It’s likely also the case that it isn’t scaling the luminance to account for sRGB properly. If a pixel is say 20% covered by black-on-white text, you multiply 255 by 20% to give a linear brightness of 51; but for onscreen display this should be converted to sRGB, which is around 124 (gamma ~2.2). If you don’t correct the gamma, the left edge of that o is much darker than it should be, so it looks square rather than rounded off.
Opinions differ as to whether text should be gamma-corrected! If you don’t correct the gamma, it looks darker and sharper, which many people prefer. But it’s actually sharper because it’s more aliased, which exacerbates the kind of moire glitches you’re seeing.
I personally prefer text with no hinting and correct gamma, as I think macOS and iOS do it, but it does look much fuzzier on low-res screens that way so some people dislike it.
The line wrapping I can quasi-forgive as this being a place for discussion rather than dumping <pre> code blocks.
There are a million ways twitter UX could improve and this is almost the stupidest one I can think of.
… we can?
(From https://twitter.com/DerritDeRouen/status/1354548649561186306)
That said, this feels like a weird argument given that Twitter didn’t use Helvetica on any modern platform when it used system fonts. SF Pro, Segoe UI, and Roboto are all designed for screens unlike Helvetica.
[0] https://abs.twimg.com/fonts/chirp-bold-web.woff [1] https://abs.twimg.com/fonts/chirp-heavy-web.woff [2] https://abs.twimg.com/fonts/chirp-medium-web.woff [3] https://abs.twimg.com/fonts/chirp-regular-web.woff
javascript:document.body.insertAdjacentHTML('beforeend','<style>*{font-family: arial !important;}</style>')
Using "mono" instead of "arial" also makes for an interesting Twitter experience.
I'm sorry, this is a change HOW?
Changes to UI reduce familiarity, and if they are fond of your product, that is usually a really bad thing. Having a good friend change personality is disturbing and unpleasant!
What is gained from these changes from Twitter, other than some employees are able to say they influenced the product? They may have tested with some users, but was the testing representative of reality? What risk was taken here for what amount of potential gain?
For mobile devices, you will have to use a third party app.
Sometimes, the corporately-chosen font is just empirically bad.
Am I missing something or is it just that I go to twitter so seldom that I assumed it was always Helvetica?
Edit: it seems it's not the font itself, but rather something going on with the rendering making it blurrier for some people than the previous typeface.
Differently broken hinting on some versions of Android: https://twitter.com/mcclure111/status/1425545266757779463
The net effect is that even at the same "font size" you have to squint more to read anything, because non-capital text is very very small and tight relative to the rather large capitals.
The typeface pulls your left and right eyes toward each other, making you look at it cross eyed. It's incredibly nauseating, like the feeling you have right after stepping off a poorly-designed amusement park ride.
||http://abs.twimg.com/fonts/*.woffThis filter seems to work (tested with uBlock Origin 1.37.2):
||abs.twimg.com/fonts/chirp-*.woff$fontI switch between Mac for work and Windows for pleasure and Windows font rendering can be hit and miss.
I notice fonts on websites a lot and get frustrated when they're bad but this was one of the most pleasant ones I've experienced, to the point I went and looked it up. I didn't realize it was a modified Grilli Type, I've always enjoyed their fonts so not much surprise I liked it.
I'm on Windows, and in Chrome and Firefox this new font is a pain to read.
( 1080p / 24" here )
2256x1504 (recommended) at 150% scale (recommended)
On Windows 11 too, if that has any consequence.
I use terminus wherever I can. It's exactly 12 pixels high (there are larger sizes, but they're not really useful). It's crisp, and clear, and easy to read, and looks excellent in Emacs.
There's no fancy font hinting or subpixel rendering. The font specifies exactly the pixels that it occupies, and that's it. If Emacs tries to render it at 11 or 13 pixels high, it doesn't -- it renders at exactly 12.
Some years back, firefox removed support for bitmapped fonts. So I had to set it to use terminus-ttf instead. This works fine in many places; the comments here in hacker news are being rendered at 12px so it looks pretty similar to the bitmapped font except with the addition of some subpixel rendering. It makes the edges of the letters soft and fuzzy but I would really prefer nice crisp, clean pixels. It's not too bad, though.
But in this comment box, firefox wants to render the text at 13.33px high, so it tries to upscale it a little bit and it looks muddy and terrible.
I guess things are different on a high-DPI display, but if you want to optimize the legibility of characters while minimizing their size, you really can't beat a bitmapped font where someone actually went and manually placed each and every pixel by hand.
I don't see any blur. I don't get fatigue. I find it quite neutral, but easy to read.
Weird.
So there might be a problem with this font indeed!
Note: we saw the screenshot on my iphone 12.
Was getting a headache from it.
This change can be undone for now using this JS: document.cookie="ab_decider=responsive_web_chirp_font_enabled=false&responsive_web_nav_visual_refresh_enabled=false"
However, the x-height is smaller and that bothers me a bit. If I increase the font-size in tweets to 15.5px, it matches old size and looks good again.
https://github.com/insin/tweak-new-twitter/releases
I tried turning Chirp back on after a full day of coding at work and it's even worse when your eyes are starting to get tired, genuinely unpleasant to look at (on Windows, at least).
Just let the damn user decide for themselves. It's ridiculous and stupid that we can't do this.
Personally, the main difficulty I have with the typeface is the kerning — the minimum space between two letters. I don’t know how these things are measured, if it really is as tight as it looks, but subjectively it feels like surprisingly little space. It’s much harder for me to read than Neue Helvetica.
I thought it's something with antialiasing or whatever on Mac, figured out I will solve it later with some setting or whatever.
It literally physically hurts to read it.
Now the PayPal and Dropbox fonts... those I noticed. And those I loathe entirely.
But at least Twitter did not mix fonts within the same post, I guess.
I wouldn't be surprised if this change was never tested outside Figma/Sketch mockups.
Why isn't this a thing anymore?
This is the nuclear option: it's simple, and also ensures a terrible experience of a web with content based on the fact that webfonts are going to work.
It’s like high schoolers gaming word counts have taken over publishing.
Maybe people really do hate the font, but use some real numbers to make your case, not this anecdotal vox pop fluff.
Anyone going purely off of headlines, and taking them at face value, would have an absolutely bizarre worldview by now.
I can offer this; 99.99% of the time I hate font changes, especially from companies that I am used to looking at.
I'm not one of those hate any changes guys. I will admit if it works, don't touch it though. A lot of websites don't just work. HN just works. No need to change anything. It font change that irritates me.
Viacom/Comcast recently changed their font on their lousy viewing guide, and it's irritating.
Why? I think it a combination of, "you shouid get working on your lousy app, and not the font?"
Changing font is easy. Changing an api is better especially when it's needed, along with lowering price from customers who hate your company?
Did anyone use fleets?
cnet's font is kind of ugly, too...
This is an indication that they really don't value diverse employees there. Can't believe no one was like "hey this is destroying readability of these two major languages."