Hacker News Reader

Comment by hk__2 | Hacker News Reader

[meta: This should have (2021) in the title.]

If you don’t care about having the same font on all devices, what’s the point of this:

> font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;

versus that:

> font-family: sans-serif;

View on HN

The point of the system font stack is that your site’s typography resembles the typography of the entire platform. It might look differently on different platforms, but it matches the platform you’re on.

Sans-serif will get you ugly fonts, such as Arial on Windows, and likely DejaVu Sans or Liberation Sans on Linux.

But you're not on that platform. You're on the browser. And short of every other web site adopting this stack (not gonna happen), it will just look weird, like an uncanny web site trying to look more native without being native at all.

Using different fonts on different platforms will be a problem for design because those fonts have different metrics, different character height and different optimal line interval, for example.

Also, Arial is not ugly. It looks good on print.

Arial is a cheap knock-off of Helvetica. Helvetica does look great in print or on high DPI screens, and Arial manages too, but it’s not so great if you’re dealing with a 96 DPI screen and small font sizes.

It's not a knock-off of Helvetica, but a different font that was designed/modified to have the same metrics.

> Sans-serif will get you ugly fonts, such as Arial on Windows, and likely DejaVu Sans or Liberation Sans on Linux.

Exactly. I find Liberation Sans very good but I cannot stand DejaVu Sans (which is the sans serif font all too often when browsing sites from Linux).

You can change Sans-serif to whatever you want with browser setting if you hate Arial.

Chrome: https://i.imgur.com/fFnX6hu.png

Firefox: https://i.imgur.com/HDfbeYh.png

You can't do anything (other than using Stylish/Stylus, I suppose) if the dev hardcoded the font-family.

True. The problem is the default browser settings. They are middling to bad, almost universally, and you cannot really expect visitors to fix their font settings before opening your webpage.

In a perfect world the defaults would look great, making sans-serif a viable choice and allowing the few users who really care (beyond 'it looks good') to do whatever they want.

> You can't do anything (other than using Stylish/Stylus, I suppose) if the dev hardcoded the font-family.

Well, i just disable "Allow pages to choose their own fonts, instead of your selections above" in browser font selection dialog.

The actual font rendered as sans-serif can be changed via a browser settings. But the system font stack is usually resolved to the same font for a given OS.

Reply on news.ycombinator.com