Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

> 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



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


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!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: