Never, ever use system-ui as the value of font-family
Here’s why not.
An acquaintance of mine recently complained in a QQ group that the text in GitHub has recently become “exceptionally bold.” Then he or she hit F12, deleted the value
system-ui from the
font-family property in the Chrome developer tools, and found that all had suddenly gone fine.
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.
system-ui has recently been provided by Chrome as the means to access what is currently used by the OS as the UI font family. It could be good to use the OS font to provide the user with a native look and feel, but on Windows, the font family used for UI changes with the language it is in, as well as the theme used.
For example, on Windows 8.1/Windows 10 in Simplified Chinese, the
system-ui font family evaluates to Microsoft YaHei UI, which, it turns out, not only lacks many font weights that Segoe UI has (say semibold), but has letters and numbers a little larger and bolder to match the Chinese text than what could have been designed with. That turns out to exactly be the phenomenon discussed on the top of the article.
However things might turn even worse. On Windows Vista/Windows 7 and corresponding Windows Server versions, with the Windows Classic theme turned on, one might see the good decades-old Tahoma/SimSun/PMingLiU… for
system-ui to evaluate to (replicated on Windows Server 2008 R2 in Simplified Chinese).
Let alone Windows XP. Sigh.
Bottom line: never, ever use
system-uias the value of the
font-familyCSS property or part of it. At least never use it before any reference to
Update: GitHub has since removed
system-ui from the
font-family CSS property. Well—not because of this post.
Apr 10 update: Bootstrap has also removed
system-ui from the font-family stack as of this pull request.