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.

How come?

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-ui as the value of the font-family CSS property or part of it. At least never use it before any reference to Segoe UI.

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.