Hacker News Reader

StackOverflow selected the following font stack [1] after holding an open discussion [2]. Note that their initial proposal included system-ui which they later removed due to concerns about OS and language compatibility.

  @ff-sans:
    -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
    "Segoe UI",                        // Windows
    "Liberation Sans",                 // Linux
    sans-serif;                        // The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  @ff-mono:
    ui-monospace,                     // San Francisco Mono on macOS and iOS
    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    "Liberation Mono",                // Linux
    Menlo, Monaco, Consolas,          // A few sensible system font choices
    monospace;                        // The final fallback for rendering in monospace.

[1]: https://github.com/StackExchange/Stacks/pull/642/files

[2]: https://meta.stackexchange.com/questions/364048/we-are-switc...

That's their preferential font stack, not a system font stack.

It's mostly Helvetica based: San Francisco is the Apple knock off of Helvetica and Liberation Sans is a knock off of Arial which is a knock off of Helvetica. Only Segoe UI isn't Helvetica.

Put another way, it’s system fonts everywhere except Linux. (And Android’s just ignored; I guess it just catches the fallback ‘sans-serif’?)

I think Liberation Sans is pretty common on linux, at least for the systems I know.

By the way Fedora 36 changed the default fonts for various languages to Noto [1].

[1]: https://fedoraproject.org/wiki/Changes/DefaultToNotoFonts

It's surprising the site doesn't mention the actual, official standard `system-ui` font alias.

    font-family: system-ui, -apple-system, sans-serif;

Is really all you need these days. That covers all modern browsers, and older browsers will just fall back to whatever sans-serif is.

> Never, ever use system-ui as the value of font-family

> It turns out that the value of system-ui in fact not only depends on the version of the current OS, but the language of the OS as well.

https://infinnie.github.io/blog/2017/systemui.html

This is done in order to mitigate Han Unification - I suspect on OSs that aren't ancient this is probably Fine, but if you have a huge userbase like Bootstrap you probably need to support these people

It's not fine even on Win10.

Ahh this is very interesting! Thanks!

> the language of the OS

I'm pretty sure the font choosing algorithm takes into account the "lang" attribute as well. lang attribute and the system language are probably used to determine the fallback order. For example, on Windows 10+ with system font stack without system-ui: [0], [1]

For Han characters:

- lang="en" + system lang en -> "Chinese" font

- lang="en" + system lang ja -> "Japanese" font

- lang="ja" + system lang en -> "Japanese" font

For Hiragana, Katakana:

- lang="en" + system lang en -> "Japanese" font

which is reasonable enough but can be surprising I think. This can be confusing when you care enough about how the Han unified characters look but can't control the lang attribute (for example in Discord messages).

[0] https://jsfiddle.net/6gfyrpv0/

[1] https://momdo.hatenablog.jp/entry/20200802/1596376257

Side note, if the system lang is en and on Windows 10+, Japanese Github markdown text will be shown in two fonts with different "weights" [3]. It looks fine if your system lang is Japanese. I wonder if it's possible to set/guess a custom lang attribute for user/repo/markdown document.

[3] https://i.imgur.com/vgwDtZt.png

It’s really unfortunate that the response to this blog post was to gum up CSS forever instead of fixing the browsers to do reasonable things with `system-ui`.

official and standard according to whom?

CSS Working Group draft spec https://drafts.csswg.org/css-fonts-4/#system-ui-def

Why isn't `sans-serif` just the default sans-serif font? Why do we need a new keyword to get the actual default font?

That's kinda the point of these font stacks right!? You want to fall back to the default sans-serif font only if you didn't some better font first.

Better? Better than the default?

So… you think your font of choice would be better than what the user had configured as the default in their user agent?

If the site cares about such things, then yes.

If the user wants their styles to take precedence, that’s what UA override stylesheets are for. Defaults are not overrides. Defaults are fallbacks, for sites that don’t care.

That's not how I see it. I see it as not trusting that the default is good looking so we'll list a bunch of good-looking fonts with the hope that we get a hit and the browser doesn't use an ugly default.

Highly underrated comment.

Because whatever is default depends on too many variables.

Like if you're on a Japanese OS but your language preferences are English, the default sans-serif font is a Japanese typeface that often doesn't display Roman alphabets that nicely.

> Like if you're on a Japanese OS but your language preferences are English, the default sans-serif font is a Japanese typeface

Please specify your environment. I use Japanese OS and I haven't found a single OS/browser combo would do that.

Use Windows as an example, sans-serif by default = Arial for Chrome and Firefox for English content.

And as a bonus, you can even adjust the default sans-serif font in browser setting to your like; while with these hard-coded CSS, you can't.

MacOS Monterey, default system language is Japanese but obviously I browse a lot of English websites.

Using plain sans-serif, I get Hiragino Kaku Gothic ProN as my default font instead of something nice like Helvetica Neue.

Do you mean lang:ja or lang:en content?

Because I feel like the former is meant to have Japanese fonts even for Latin glyphs for consistency's sake, but I understand that some people do prefer the other way.

And indeed, MacOS system font by default is like that. Windows is the opposite, though (everything is in Meiryo UI or whatever it's now called.) (Not sure if it's changed in Win11 either.)

> Do you mean lang:ja or lang:en content?

Not the OP, but I'm sure it's webpages that don't have the lang attribute at all, which is why macOS used the Japanese font stack instead of the English one.

On Windows at least (can't test MacOS at the moment), the default `lang` of web page when there is no attribute is actually the display language of my browser (in both my and OP's case, English), not my OS's (Japanese).

Furthermore, Firefox has a heuristic lang detection algorithm (!) based on content. I wrote an article about it 10 years ago, but not sure if it has been changed.

> the default `lang` of web page when there is no attribute is actually the display language of my browser (in both my and OP's case, English)

Uhh, let me check...

> MacOS Monterey, default system language is Japanese but obviously I browse a lot of English websites.

I don't think that OP ever stated that their browser is in English, just saying that they also browse English sites (and they're probably not using Firefox - its text rendering is super consistent across different systems). Safari (obviously) and Chrome (less obviously) in macOS defers to the OS for text rendering - hence the problem.

I wish browsers chose better default fonts which would make monospace, sans-serif, and serif more appealing. As an alternative, adopting new CSS keywords like user-monospace, user-sans-serif, user-serif could allow web developers to prioritize user-configured fonts in the browser.

For backwards compatibility, most likely. If sans-serif on a particular platform has been FontX for 25 years browser vendors probably don’t want to suddenly change it for all existing websites.

All I hear is that we have a chance to improve websites that have been ugly for the past 25 years because of bad browser defaults.

And break a lot of websites whose layout is tightly coupled to the details of font sizes.

Those sites have always been broken for a lot of people, so this would only break them for a different group of people…

It is the browser's default sans-serif font. This may not align with the OS's default interface font.

I also came across this blog while searching for various font stocks to use and he provided quite a good break down for many non-major platforms.

https://www.ctrl.blog/entry/font-stack-text.html

A nice article, but I do wish there was something similar for the increasingly less Edge Case of VR/AR/XR as a category because the font stacks in 3D perform different. There are chromium forks like the Meta Oculus Browser and Igalia has taken over Firefox Reality Browser now called Wolvic and embedded Unity browsers like Vuplex all running in a specific vendor's Android build. I find a lot of non-generic CSS/Font combos break in WebXR experiences without even getting into CJK or RTL issues. Then you have the game engine side of font handling which is a different topic but gets in the way of compatible rendering behavior.

The worst ones are in emails from the likes of Microsoft where they have segoe and nothing else listed so half their messages look like a random default serif font (they don't even have fallback sans listed).

More info on browser compatibility: https://caniuse.com/font-family-system-ui