Hacker News Reader

Comment by dmitryminkovsky | Hacker News Reader

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

View on HN

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?

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.

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.

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

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.

would this help? (disclaimer: i wrote the addon)

https://news.ycombinator.com/item?id=28165179

As I said, I already do it with uBO. I don't need another addon.

    *: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;
    }

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

https://i.postimg.cc/5Nk9tczJ/sw-appy-20210813-193919.png

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.

Firefox is smart enough to not block fonts that are used to render PUA characters.

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.

I will plug my Firefox addon here which builds on this Firefox’s feature. Basically 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...

I used to have an addon like that, that died in the WebExtensions apocalypse. It's great to have a replacement!

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.

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.

Design team needs to earn their keep.

Reply on news.ycombinator.com