Stack Overflow took this approach last year with the following font stack: [1]
@ff-sans:
system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
"Segoe UI", // Windows
"Ubuntu", // Ubuntu
"Roboto", "Noto Sans", "Droid Sans", // Chrome OS and Android with fallbacks
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
"Ubuntu Mono", // Ubuntu
"Roboto Mono", // Chrome OS and Android
Menlo, Monaco, Consolas, // A few sensible system font choices
monospace; // The final fallback for rendering in monospace.
-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve.
For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is, and ui-sans-serif (along with ui-serif, ui-monospace and ui-rounded) is only implemented by Safari yet.
For serif, I recommend at most three items, possibly including one named font: a web font, Georgia, and serif. See, serif is probably a narrower serif (something like Times New Roman), but Georgia a wider one—they’re fairly different in character, so that it can be worth including if you’re doing so deliberately.
For monospace, I recommend at most four: a web font, ui-monospace (I wouldn’t, but some macOS people prefer it), Consolas, and monospace. I think Consolas is worth keeping in until Firefox updates its Windows default (https://bugzilla.mozilla.org/show_bug.cgi?id=713680), because Courier New is that bad.
Most font stacks now are just cargo culting, and are mostly mildly harmful.
Interesting, I hadn’t come across that particular issue, though it seems obvious now (I know about those ugly old fullwidth fonts). And I’m guessing that quite incidentally -apple-system and BlinkMacSystemFont are unlikely to be affected. I’ll need to reconsider my recommendation—though I will note that I’ve not generally used system-ui anyway, just considered it acceptable. I wonder if it’s time to lobby browsers to update their default sans-serif fonts, as they have updated their monospaces over the last few years (except for Firefox on Windows). The whole ui-sans-serif/ui-serif/ui-monospace thing is a bit of a crock. (And I wonder if I stand any chance of getting the 13px monospace default size killed. That thing is such an utterly obsolete nuisance—though of course removing it from monospace doesn’t remove the concept, which is used in fonts of various languages.)
It’s not all fallback: it’s getting in the way of the actual fallback monospace/sans-serif/serif. The cargo-culting nature of this means that there tend to be one or two bad fonts in there, and sometimes some systems will have bad fonts aliased to otherwise good names (e.g. that’s why I say “don’t write Courier”, because although it’s fine on macOS and probably aliased to something reasonable on Linux platforms, Windows aliases Courier to Courier New, which is a terrible font).
I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif.
Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.
Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.
I haven’t ever encountered that, and would expect the limit to be rather long (certainly no less than 32 elements, probably far longer) if there is such a limit. What there is is whitelisting, only exposing certain fonts in order to reduce font list fingerprinting: https://bugzilla.mozilla.org/show_bug.cgi?id=1121643.
What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif?
Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?
Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3.
On the other hand, I still failed to see the the advantage of such complex stack vs
font-family: sans-serif;
Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting? Which users can define to whatever they want, system font or not.
> Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting?
I've done lots of testing and very often a font stack gives better looking results than simply using the default. People who came up with these font stacks didn't do a bad job at all. I'd say it's especially noticeable on Linux (but not only): the default may really be freaking ugly compared to one of the previous font in the stack.
> Which users can define to whatever they want, system font or not.
But most users really don't bother do that. Heck, out of simplicity I don't even do it: the reason being I like to see how others are using fonts on their sites and I don't want to always turn my font overrides/default on/off. I want to know if the sites looks good "without any user intervention".
One problem with font stacks though is those who picked one then forget to update them when new, much better, fonts installed by default comes out. For example a shitload of websites on the latest OS X / M1 macs are going to fall on Helvetica first (because they use outdated font stacks) and use that even though the world as really moved on and came up with incredibly better looking screen fonts than Helvetica (I'm not saying Helvetica doesn't still have its place in print).
>People who came up with these font stacks didn't do a bad job at all
Not without trial-and-error. Twitter, GitHub, and Stackoverflow all got huge complaints for their font changes and had to revert/revise their font stack choices quickly due to the outcry.
In SO's case which I followed, they didn't even have anyone to test their UI on Windows at all. I don't know how that's "a good job".
>and I don't want to always turn my font overrides/default on/off
Just to clarify a little bit, by "user can define it" I'm not saying to override using custom CSS or anything. I'm saying users can choose the default sans-serif/serif/monospace fonts in all major browsers. Any specific fonts defined in CSS other than sans-serif would still override that.
There is something incomplete feeling about just the default styling. If you're going for a brutalist design mentality then sure, go for it, but sometimes the appearance actually does matter
I'm not against using font style; I'm against (or more like, failed to see the point) to manually craft a complex "system font stack" to achieve.. basically the same thing as sans-serif but worse.
If you're building a web app (say, via electron) as opposed to a site or document, using the system font stack will make that app fit into the desktop environment much better than Arial, Times New Roman and Courier New will.
What is being compared? Because to me it read like a question of choosing 'sans-serif' over 'ui-system-font-sans' or whatever in your CSS. Nothing more than that.
"System font stack" — which I took to mean the longish list of commonly known default fonts for a bunch of OSes brought up earlier in the thread — with a CSS value of "sans-serif".
There was no mention of direct use of Arial, Times New Roman or Courier that I could see, so I don't see why bring it up.
Thanks for pointing out Stack Overflow’s subsequent updates.
They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages:
@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.
Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.
Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers.
In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a different font loaded than what you have tested with, it could at best just have a different size (right-side of the text is now 3px away from the side rather than 6px for example) and at worst introduce line-breaks in your buttons that only expects one line of text, making everything look very fugly.
Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end.
It’s a fair reason with an appropriate CSS pattern.
I, like the GP, fail to see how listing dozens of fonts of completely different nature (x-height, line-height, width, proportions, weight...) provides any "control of the user experience".
This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?
The typical font stacks IMO always forget to put "Liberation". For many Linux desktop users it's going to be the best available when Oxygen/Cantarell/Ubuntu aren't there. Many Debian users, for example, are going to have Liberation and not the others. It's sad that a fugly default is often going to be picked up for these users instead of Liberation.
So: modern font stacks... Not bad, but not yet the panacea either (even for big websites who really should know better).
I am a firm believer in this and just using built in fonts in general. Users really don't care about fonts, they really don't. And if you really need a specific font for say a logo, use an SVG with the text converted to paths. But of course only do that in image type situations and provide alt text.
