3 ms·

> 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, b

> 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 ago
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
- thrdbndndn 4y ago
  It's not fine even on Win10.
madeofpalk 4y ago
Ahh 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 ago
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`.

anaisbetts 4y ago

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

thrdbndndn 4y ago
It's not fine even on Win10.

madeofpalk 4y ago

Ahh 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 ago

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`.