Modern Font Stacks

I think at least a small version of a font stack like these isn't a bad idea even if you're using web fonts. Folks who insist on disabling web fonts are likely a small percentage of any given site's readers, but they're out there. (And for certain sites, like this very one, there's a much higher percentage of them, usually ready to hop right out and proclaim how arrogant it is for web developers to choose typefaces for them and CSS was a mistake and we should all go back to VT100 terminals like God intended etc. etc.)

> esoteric browser prefs

That hurts. I see where you are standing, and can confirm you expressed opinion of the contemporary majority of browser users, but man, how sad it that. The attitude diverged by a light years, when "Setting preferred fonts for generic font families" is now "esoteric". (Web) browsers ("user agents") came to existence with these capabilities in mind, and even now are build around the principle of "preferences reconciliation" between defaults, author and user (as opposed to simple "display what author dictates"). And default font choice is probably the very first aspect it ever had to handle.

(Or were you referring to some other "pref"?)

I don’t think this is a great solution for, broadly, consumer sites and apps.

In a lot of cases, branding matters, and having consistent cross-platform rendering matters.

However, I’ve had good experiences using system-ui with in-house dashboard-y apps. I’m the principle UI designer at my startup, and I recommend this font stack for anyone coding up internal-use-only observability tooling and monitoring stuff. We’re all on Chrome, we’re all on Macs, and getting SF Pro on the page without having to call a CDN or manage font assets is a win.

they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random.

Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random.

I don't understand the SAM76 programming language, but I don't pretend that

  !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////=

is "random."

the user might have a prefered fallback font set that they prefer over any of the ones in the font stack

Great! Then the user gets his preferred font, as requested, instead of the one the page specified. Sounds like a win, so I'm not sure what you're complaining about. I expect you'd also complain if the web page overrode the user's choice.

I disagree with the notion that common browser configuration options available for users to change through the main/general browser settings UI would in any way be esoteric.

Of the six billion or so people on the web, the number of people manually overriding fonts isn't even a rounding error. It's not even a rounding error's rounding error. Get out of the tech bubble.

My font stack looks something like this:

  font-family: "Roboto Serif", Verdana, sans-serif;

(Because of the OFL, “Roboto Serif” is replaced by another name since I modified the font when I subsetted it)

Large font stacks made sense in the days of IE6 for the following reasons:

• Dial up users did not have enough bandwidth to download webfonts.

• Only IE supported webfonts, in a weird proprietary “eot” format

• 99% of desktop operating systems all had the same web safe fonts “Verdana/Georgia/Trebuchet/Times New Roman/Arial/etc.”

Here in 2025, font stacks no longer make as much sense:

• 100k for a webfont package is a small file, even on a 4g network in a third world country. [1]

• All mainstream current browsers support woff2 webfonts [3][4]

• On Android, font support is very limited and has no support for the old school “web safe” core fonts for the web (Verdana/etc.)

As an aside, if metric compatibility (i.e. all of the fonts letters are the same size) with an OS core font is needed, “Arimo”/“Liberation Sans” is metrically compatible with Arial, “Liberation Serif”/“Tinos” is metrically compatible with Times New Roman, and “Cousine”/“Liberation Mono” is metrically compatible with Courier New.

[1] CJK users have font files large enough where the download size might be an issue. In that case, we either accept the download size as part of a modern website, or we accept that Android users will get Noto [2] while Mac/Windows users will get different looking system fonts.

[2] These font stacks linked in this article by and large all end up using Noto on Android phones. [5] I personally await the day when Apple and Microsoft include Noto by default with their OSes, so “font-family: Noto, sans-serif;” always does the right thing.

[3] 96% over at https://caniuse.com/?search=woff2

[4] Some people will turn off webfonts, but those people have made it clear they don’t care whether or not they get a font which looks like the design the webmaster intended. Again, use https://screenspan.net/fallback to find a reasonably metrically compatible fallback font.

[5] Looking at them in Firefox on my Android phone, “System UI” works, “Neo-Grotesque” gives a pencil thin font which is very difficult to read (“Inter” on my phone is pencil thin), “Slab Serif” actually looks nice (both in Windows, with Rockwell, and on Android, with Roboto Slab), and “Handwritten” works for its purpose (Android uses a “Cursive” fallback font). All the other font stacks are giving me the system default serif/sans/mono fonts (either Noto or Roboto). With Chrome on my Android phone, source sans pro is used a lot, as well as Google specific metric compatible versions of “Arial”, “Georgia”, “Courier New”; “Slab Serif” doesn’t work there even though Roboto Slab is installed on my Android system. Point being, Android has made web safe fonts a thing of the past.