6 ms·
I collect these things for fun and one of my big discoveries is that there's no "standard" system font stacks - here are my list of system font stacks and their
by swyx 4y ago
I collect these things for fun and one of my big discoveries is that there's no "standard" system font stacks - here are my list of system font stacks and their sources: https://github.com/sw-yx/spark-joy/blob/master/README.md#fonts https://github.com/sw-yx/spark-joy/blob/master/README.md#fon...
some of them even come with annotations as to why they make the choices they make.
Github's font stack is
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
VS Code:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
probably more "native" on mobile:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
apparently all modern browsers have this new shortcut that make it as simple as:
font-family: ‘system-ui’, sans-serif;
https://chromestatus.com/feature/5640395337760768 https://chromestatus.com/feature/5640395337760768
- madeofpalk 4y agoIt'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.
- lelandfe 4y ago> 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 https://infinnie.github.io/blog/2017/systemui.html
- anaisbetts 4y agoThis 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
- thrdbndndn 4y agoIt's not fine even on Win10.
- madeofpalk 4y agoAhh this is very interesting! Thanks!
- squaresmile 4y ago> 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/ https://jsfiddle.net/6gfyrpv0/ [1] https://momdo.hatenablog.jp/entry/20200802/1596376257 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 https://i.imgur.com/vgwDtZt.png
- KerrAvon 4y agoIt’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`.
- jrochkind1 4y agoofficial and standard according to whom?
- madeofpalk 4y agoCSS Working Group draft spec https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
- kevincox 4y agoWhy isn't `sans-serif` just the default sans-serif font? Why do we need a new keyword to get the actual default font?
- TacticalCoder 4y agoThat'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.
- aaaaaaaaaaab 4y agoBetter? 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?
- kevincox 4y agoThat'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.
- hit8run 4y agoHighly underrated comment.
- 4y ago
- SenHeng 4y agoI 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 https://www.ctrl.blog/entry/font-stack-text.html
- jimmySixDOF 4y agoA 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.
- oneplane 4y agoThe 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).
- divbzero 4y agoStackOverflow 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 https://github.com/StackExchange/Stacks/pull/642/files [2]: https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021 https://meta.stackexchange.com/questions/364048/we-are-switc...
- xdennis 4y agoThat'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.
- JonathonW 4y agoPut another way, it’s system fonts everywhere except Linux. (And Android’s just ignored; I guess it just catches the fallback ‘sans-serif’?)
- RealStickman_ 4y agoI think Liberation Sans is pretty common on linux, at least for the systems I know.
- 4y ago
- hoppyhoppy2 4y agoMore info on browser compatibility: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui