Mention system-ui and ui-*

[Schweinepriester]

• https://caniuse.com/font-family-system-ui
• https://caniuse.com/extended-system-fonts

At least system-ui seems widespread enough for usage.

[robinmetral]

Not mentioning system-ui might not be about browser support, but rather about i18n: https://infinnie.github.io/blog/2017/systemui.html

Back in 2017 this was apparently a whole thing with Bootstrap opting out of system-ui (twbs/bootstrap#22377). They added it again in 2020 (twbs/bootstrap#30561) though someone still had issues after the release (twbs/bootstrap#30561 (comment)).

Looking at recent related discussions at Gitea (go-gitea/gitea#14575) and iFixit (iFixit/core-primitives#36), it seems that system-ui (before Segoe) is still not a good idea. Best would be to test on a VM with Windows in Chinese, though

[Artoria2e5]

The 2017 article does not mention one thing: On several Windows browsers, sans-serif default to SimSun, which is worse: a serif font with 1 font weight only. system-ui giving you Yahei UI is a big upgrade.

Plus system-ui only gives you SimSun or an equally bad font on Windows 7 and older. Windows 7 in 2024? Bad idea.

[robinmetral]

@Artoria2e5 thank you! So you're saying that after Windows 7, system-ui defaults to Yahei for Windows in Chinese? Do you have any relevant source for this? (Can't find anything online.)

If that's accurate, then system-ui is probably alright to use for most use cases in 2024, since it looks like Windows 7 usage is down to below 3% worldwide (StatCounter). When looking at the Windows 7 font list it looks like Yahei is also included, but this might have been added in a patch that users may or may not have, and/or it might not be the default font picked up when using system-ui.

[Artoria2e5]

That’s correct.

The source for what system-ui resolves to is simply the linked article; the screenshot for Windows 8.1 is enough evidence. It’s really more about how you look at it: sure it doesn’t have the font weights you want, but it’s better than the alternative of a more broken sans-serif¹ and more broadly applicable than curating your own fallback list.

Windows 7 (Vista too, I recall!) did use YaHei in most of the actual system UI, but it’s possible that the whatever API that gives out the system-ui value wasn’t changed. Microsoft Yahei UI (yes, it’s different, like Segoe vs Segoe UI) was introduced in 8 iirc.

¹ That said, sans-serif also got un-broken. Chromium fixed its kSimplifiedHanFonts so it prioritizes Microsoft Yahei (without "UI") over SimSun... in 2020. In that sense, both are fine now. Just don't ask about Internet Explorer. (Edge is fine.) (Oh right, I also checked my IE on Windows 11. Still SimSun!)

---

So the situation is:

• system-ui is the system font. That we can't dispute.
• The system font is not always great due to i18n variation, as we've seen in the infinnie article. We could still write "Segoe UI", system-ui for Windows.
• At the same time, the non-Latin/Cyrillic/Greek system-ui and the default sans-serif font (now that the latter is fixed) tend to be pretty similar, if not identical. Adding system-ui into the list after Segoe UI might not do much after all.