4 ms·

I was really pleased when Stack Overflow switched to system fonts [0] and hoped this would be a trend. With system fonts there is less cognitive load going fro

I was really pleased when Stack Overflow switched to system fonts [0] and hoped this would be a trend. With system fonts there is less cognitive load going from app to app. The font stays out of your way and serves its purpose best: presenting textual information. 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. [0] https://news.ycombinator.com/item?id=27063991 https://news.ycombinator.com/item?id=27063991

deleted 5y ago
[deleted]
geerlingguy 5y ago
The 'brand' needs to differentiate, though. And if Facebook's empire does it, so must Twitter. 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?
- dunnevens 5y ago
  You are correct. They did make their own font. Which seemed like a very strange expense to me. Even though I use Dropbox heavily, I'll almost never see their font. Dropbox is used mostly through the OS's file manager.
- kevin_thibedeau 5y ago
  Middle management becomes a bit of a circle jerk in large companies. They have to find reasons to justify their existence so you get branding initiatives like this to pump up the annual reviews.
thristian 5y ago
Firefox's "Don't allow websites to use custom fonts" option makes the Web feel much more cohesive and polished.
- Arnavion 5y ago
  What does that do for fontawesome-style fonts (icons in the private area) that websites love to use instead of SVGs and text labels? 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.
  - jayesh-bhoot 5y ago
    would this help? (disclaimer: i wrote the addon) https://news.ycombinator.com/item?id=28165179 https://news.ycombinator.com/item?id=28165179
    - Arnavion 5y ago
      As I said, I already do it with uBO. I don't need another addon.
  - tejasvi88 5y ago
    *: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; }
  - Markoff 5y ago
    blocking remote fonts in uBlock Origin has zero effect on Twitter, just tried, unless you mean something else, in that case please enlighten me how to have back left column with same font as before
    - Arnavion 5y ago
      https://i.postimg.cc/5Nk9tczJ/sw-appy-20210813-193919.png https://i.postimg.cc/5Nk9tczJ/sw-appy-20210813-193919.png https://i.postimg.cc/Gm8L8MPy/sw-appy-20210813-193924.png https://i.postimg.cc/Gm8L8MPy/sw-appy-20210813-193924.png In case that website blocks hotlinking: https://postimg.cc/gallery/RVSBXh7 https://postimg.cc/gallery/RVSBXh7 The first image shows https://twitter.com/newsycombinator 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 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.
aaronbrethorst 5y ago
Design team needs to earn their keep.
tompazourek 5y ago
For me, it was the opposite with Stack Overflow. I use the Consolas font literally everywhere throughout my Windows machine. It's the default and most common monospace font on Windows, and I'm used to reading code like that. Yet Stack Overflow started using Cascadia Code instead, which I'm not used to, and it feels like all the code there is bold, and some letters have strange proportions. 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.
steve_adams_86 5y ago
When it comes down to it I find it rare that a custom font sparks any joy in me. I love typography and I started my career in design, so I don’t think I’m some old man yelling at clouds here. 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.

deleted 5y ago

[deleted]

geerlingguy 5y ago

The 'brand' needs to differentiate, though. And if Facebook's empire does it, so must Twitter. 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?

dunnevens 5y ago
You are correct. They did make their own font. Which seemed like a very strange expense to me. Even though I use Dropbox heavily, I'll almost never see their font. Dropbox is used mostly through the OS's file manager.
kevin_thibedeau 5y ago
Middle management becomes a bit of a circle jerk in large companies. They have to find reasons to justify their existence so you get branding initiatives like this to pump up the annual reviews.

thristian 5y ago

Firefox's "Don't allow websites to use custom fonts" option makes the Web feel much more cohesive and polished.

Arnavion 5y ago
What does that do for fontawesome-style fonts (icons in the private area) that websites love to use instead of SVGs and text labels? 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.
- jayesh-bhoot 5y ago
  would this help? (disclaimer: i wrote the addon) https://news.ycombinator.com/item?id=28165179 https://news.ycombinator.com/item?id=28165179
  - Arnavion 5y ago
    As I said, I already do it with uBO. I don't need another addon.
- tejasvi88 5y ago
  *: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; }
- Markoff 5y ago
  blocking remote fonts in uBlock Origin has zero effect on Twitter, just tried, unless you mean something else, in that case please enlighten me how to have back left column with same font as before
  - Arnavion 5y ago
    https://i.postimg.cc/5Nk9tczJ/sw-appy-20210813-193919.png https://i.postimg.cc/5Nk9tczJ/sw-appy-20210813-193919.png https://i.postimg.cc/Gm8L8MPy/sw-appy-20210813-193924.png https://i.postimg.cc/Gm8L8MPy/sw-appy-20210813-193924.png In case that website blocks hotlinking: https://postimg.cc/gallery/RVSBXh7 https://postimg.cc/gallery/RVSBXh7 The first image shows https://twitter.com/newsycombinator 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 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.

aaronbrethorst 5y ago

Design team needs to earn their keep.

tompazourek 5y ago

For me, it was the opposite with Stack Overflow. I use the Consolas font literally everywhere throughout my Windows machine. It's the default and most common monospace font on Windows, and I'm used to reading code like that. Yet Stack Overflow started using Cascadia Code instead, which I'm not used to, and it feels like all the code there is bold, and some letters have strange proportions. 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.

steve_adams_86 5y ago

When it comes down to it I find it rare that a custom font sparks any joy in me. I love typography and I started my career in design, so I don’t think I’m some old man yelling at clouds here. 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.