[css-fonts] `system-ui` behavior is undesired for some users

[kojiishi]

From crbug.com/554590#c21, github, Bootstrap, and Wikipedia decided to stop using the system-ui font family because the visual quality of their pages is suffered on some OS/language combinations.

Context reported in the issue above:

• GitHub, https://infinnie.github.io/blog/2017/systemui.html
• Bootstrap, Remove system-ui from font stack due to i18n issues twbs/bootstrap#22377
• Wikipedia, wikimedia/wikimedia-ui-base@c75852427a

[litherum]

One of two things is true:

1. The Windows system font really is terrible in some situations
2. The browser implementation of the system font doesn't match the platform

[Malvoz]

Why is this a CSSWG issue? Does the spec need clarification or is this a suggestion for deprecation?

The blog post mentions a couple of things:

It turns out that the value of system-ui in fact not only depends on the version of the current OS [...]

Why would one expect all OS versions to render the same font? That is no different to using a "system font stack"-hack.

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.

[...] 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.

Not all fonts support all languages, which is unfortunate and an issue with the rendered font.

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

The rendered font is considered undesired, that'd be an issue for that OS version?

[kojiishi]

I guess we need to solve this when we add more system font families.

@litherum

One of two things is true:

1. The Windows system font really is terrible in some situations
2. The browser implementation of the system font doesn't match the platform

I’m afraid I don’t understand what you’re suggesting. Can you please expand? I agree 1 is true. I’m not sure what 2 means, and I’m not sure what you suggest from these two.

@Malvoz

Why is this a CSSWG issue? Does the spec need clarification or is this a suggestion for deprecation?

One of the original motivations of system-ui is to deprecate non-standard vendor-specific values (-apple-system and BlinkMacSystemFont) and we thought what the spec currently defines can help it:

This generic font family lets text render with the default user interface font on the platform on which the UA is running.

However, github, medium, bootstrap, and wikipedia considered that this definition isn’t what they want for Chinese Windows, and that they’re back to the vendor-specific values because they provide what they want. True that this is Windows specific problem, but if people stops using system-ui and stick to non-standard values due to the problem, isn’t it our failure?

Blink can fix this. I’m hoping to solve this somehow, make system-ui usable, and deprecate our vendor-specific value. But 1) I wanted to note that it will no longer “the default UI fonts on the platform” in some cases, and 2) I would like to sync with other browsers on Windows. /cc @atanassov @emilio

[AmeliaBR]

Koji, what particular change are you requesting for the CSS definition of system-ui?

In general, I think user agents should have flexibility to select the font(s) to use, even if it doesn't always match the System UI. And we already have text in Fonts 4 allowing the generic font keywords to map to composite fonts that consist of different fonts for different languages. But, if cross-browser consistency on a given platform is important, then we might need stricter guidance than that.

[litherum]

If the Windows system font really is ugly in Chinese, what do Chinese native apps do?

[kojiishi]

If the Windows system font really is ugly in Chinese, what do Chinese native apps do?

They just live with the fonts. The difference is that, those apps are in Chinese and that no other choices are available to render Chinese characters. On the other hand, they were seeing much better fonts when they visit github and other English content sites. But with system-ui, all such contents were downgraded to the Chinese fonts too.

Japanese is in similar situation, and I was under impression that users/authors prefer native fonts, even though it looks worse. The feedback revealed that I was wrong. They preferred English system fonts, no matter which language their platform is in, at least for English contents.

We probably need to hard-code the name of English system fonts, and pick it instead of the actual default UI fonts under some conditions. I haven't finalized the exact heuristic yet, I'll think about it more.

In general, I think user agents should have flexibility to select the font(s) to use, even if it doesn't always match the System UI.

Oh, really, great if so, thank you. The definition of system-ui didn't read so to me, but my English isn't great, so I trust your reading.

If the spec text already allows UA to pick other arbitrary fonts than "the default user interface font on the platform", this might not be a spec issue. I can investigate how to make authors happy, and may sync with @atanassov and @emilio outside the WG.

[NightFurySL2001]

I would argue that the current implementation of system-ui is on point and should be kept that way; the issue pointed out by https://infinnie.github.io/blog/2017/systemui.html is a non-issue.

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

What this section missed in context is that, the system font itself is also changed (to the uglier but clearer bitmap font, which is SimSun for Simplified Chinese system) when the theme changed, so what system-ui evaluates to be does indeed match the current system font. The following provides screenshots for the actual Windows 7 system, please notice the font used by the file names on the desktop and Windows Explorer.

Windows 7 Aero theme, using Microsoft YaHei:

Windows 7 Classic theme, using SimSun:

`index.html` source code

<html>
<style>
body{
font-family: system-ui;
}
</style>
<body>
Testing text using <code>system-ui</code>. This page is displayed with Google Chrome.
</body>
</html>

This is an "issue" with Windows rendering engine, not with the CSS specs. Display for CJK (and corresponding Latin text in their languages) has been using bitmap fonts for a long time, and in places where clarity is required, using bitmap font is better than using newer system fonts (considering there is still a relatively large CRT moniter user group in China).

If the Windows system font really is ugly in Chinese, what do Chinese native apps do?

On Windows 7 and earlier, there are two ways:

1. keep the original system font (or don't specify in software), which uses SimSun if using the Classic theme
2. hardcode the new system font (Microsoft YaHei) in software, which will not change when changing theme

I am unable to test on Windows 8 and later due to single display language pack limitation, but I would guess the High Contrast settings might result in the same behaviour (Chinese font reverted to bitmap font, i.e. SimSun/PMingLiU for high contrast theme for display clarity).

Do be noted that this "issue" only arises when the user voluntarily choose to use the Classic theme (Windows 7 & lower)/High Contrast settings (Windows 8 & higher), which is a correct response as the user might intend to use the theme/settings for their individual requirements. We as developer should in no way work against the choices users had made, even though it might look worse for us (but not them).

Thus, my conclusion is:
1. The Windows system font really is terrible in some situations, but intended. There is no reason to stop using/implementing system-ui, and with Firefox adding support in August 2021 (mdn/content#7751), there is literally nothing stopping the usage of system-ui.

[fireattack]

It's not just the SimSun being terrible; MS YaHei is also terrible for displaying Latin characters (among lots of other things, like Japanese Kana), which was why as mentioned above, GitHub, Bootstrap, Wikipedia, and later Stack Overflow, all had to roll back from using it due backslash from the community.

Go and add system-ui in CSS on GitHub to your Chinese Windows VM and check this very page again to see how it looks.

Is it "intended"? Yes it is. But in the ideal world the intended use should give somewhat good result. It doesn't matter which end is causing the issue, at the end the website designer is the one who has to deal with it.

There is no reason to stop using/implementing system-ui

If you as a dev care about (Chinese) Windows users, you still have to think twice about using system-ui font. Plenty of Chinese users read English websites. "That's because Windows is shit" isn't going to help anyone.

And keep in mind it is a "regression" in term of user experience. The current stack of -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" can at least generate good result (Segoe UI) for these users (without sacrificing other users).