Everytime "System UI" is mentioned on HN I feel obligated to post this: Be careful about it.
The intent of "System UI" is great. However, the actual implementations across multiple platforms and especially with different international languages, not so much.
The main issues are:
1. On Chinese and Japanese Windows, it would end up using MS Yahei and Yu Gothic UI. The former isn't optimized to show English-only (or Latin alphabet only) content, while the latter isn't even suitable to display Japanese content, let alone English ones. As the name suggests, it's intended to be a "UI" font - it's extremely narrow to accommodate long Japanese characters in UI elements such as context menu, button etc. You're supposed to use "Yu Gothic" to show normal text in Japanese.
And because these two fonts are unicode (include almost every glyphs), it won't fallback to other fonts either. English Windows does not suffer from this issue the other way precisely because its default UI font, "Segoe UI", not only great to show English characters, it also does not contain any CJK glyphs so these would fallback to proper fonts.
2. Unlike "sans serif", system-ui overrides "default fonts" that user can tweak in (any) browser settings. Users can even change fonts for each written script/language to make they have the fonts that suits them best too (and browsers usually have sensible default for them). This means you can use <lang="ja">, <lang="zh">, <lang="en"> to specify language of HTML elements to ask the browsers to use specific fonts for each language. System-ui overrides all these: once you have assigned "system-ui" it will just use system font regardless of any language context. Again, this is particularly bad for CJK users because of problem 1 ("system-ui" fonts have all the glyphs). So end result: Chinese paragraphs use Japanese characters (they're different but have the same Unicode point), and vice versa.
3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit.
One of the only benefit of using "system-ui" is on English Windows: lots of browsers including Firefox and Chrome still use Arial as sans-serif's default for Latin content for backward compatibility (you can change it yourself in browser settings, though). So by using system-ui, on English Windows, fonts would become Segoe UI, which is indeed better. But you can "fix" this without messing over Chinese/Japanese users by just apply "Segoe UI" directly. It does not affect other platform either because they simply don't have this font. Actually, this is exactly what most of major websites (GitHub, SO, Twitter, etc.) currently are doing, after they rolled back from using "system-ui" due to issues and backlash mentioned above. Wikipedia also tried, but they now choose to continue rocking "sans-serif" without any fancy "stack".
(I'm not a Linux guy so feel free to chime in about situations there.)
> 3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit.
Certainly on my Mac, which has been the case for quite some time, sans-serif defaults to Helvetica.
Since Apple was the organization that proposed "system-ui", it doesn't make sense that it would default to a font that already existed.
Apple created San Francisco as a family of fonts for macOS, iOS, iPadOS, etc., which is why Apple proposed to the W3C the concept of a system-ui font that differs from sans-serif.
Android, newer Windows and macOS has specific fonts for system-ui.
The intent of "System UI" is great. However, the actual implementations across multiple platforms and especially with different international languages, not so much.
The main issues are:
1. On Chinese and Japanese Windows, it would end up using MS Yahei and Yu Gothic UI. The former isn't optimized to show English-only (or Latin alphabet only) content, while the latter isn't even suitable to display Japanese content, let alone English ones. As the name suggests, it's intended to be a "UI" font - it's extremely narrow to accommodate long Japanese characters in UI elements such as context menu, button etc. You're supposed to use "Yu Gothic" to show normal text in Japanese.
And because these two fonts are unicode (include almost every glyphs), it won't fallback to other fonts either. English Windows does not suffer from this issue the other way precisely because its default UI font, "Segoe UI", not only great to show English characters, it also does not contain any CJK glyphs so these would fallback to proper fonts.
2. Unlike "sans serif", system-ui overrides "default fonts" that user can tweak in (any) browser settings. Users can even change fonts for each written script/language to make they have the fonts that suits them best too (and browsers usually have sensible default for them). This means you can use <lang="ja">, <lang="zh">, <lang="en"> to specify language of HTML elements to ask the browsers to use specific fonts for each language. System-ui overrides all these: once you have assigned "system-ui" it will just use system font regardless of any language context. Again, this is particularly bad for CJK users because of problem 1 ("system-ui" fonts have all the glyphs). So end result: Chinese paragraphs use Japanese characters (they're different but have the same Unicode point), and vice versa.
3. In lots of platforms, including MacOS (I didn't test newest version yet), Android, iOS, using "system-ui" will end up using exactly the same font as just use "sans serif" anyway. So it really has little benefit.
One of the only benefit of using "system-ui" is on English Windows: lots of browsers including Firefox and Chrome still use Arial as sans-serif's default for Latin content for backward compatibility (you can change it yourself in browser settings, though). So by using system-ui, on English Windows, fonts would become Segoe UI, which is indeed better. But you can "fix" this without messing over Chinese/Japanese users by just apply "Segoe UI" directly. It does not affect other platform either because they simply don't have this font. Actually, this is exactly what most of major websites (GitHub, SO, Twitter, etc.) currently are doing, after they rolled back from using "system-ui" due to issues and backlash mentioned above. Wikipedia also tried, but they now choose to continue rocking "sans-serif" without any fancy "stack".
(I'm not a Linux guy so feel free to chime in about situations there.)