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

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

One of two things is true:

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

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?

@litherum

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

@litherum

One of two things is true:

The Windows system font really is terrible in some situations

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

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.

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

@atanassov

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.

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:

keep the original system font (or don't specify in software), which uses SimSun if using the Classic theme
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.

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

@fireattack

@fireattack The Latin characters in Microsoft YaHei comes from Segoe UI (of Windows 7), just slightly enlarged. I don't think it looks terrible; in fact, comparing it to the original Segoe UI it is way more legible due to its increased font size.

For the benefit of doubt, I have also tried out Traditional Chinese (Microsoft JhengHei) which also is based on Segoe UI. It did not make too much of a difference too. Both Chinese variants only had "issue" when using Windows 7 Classic theme.

Following are attached screenshots from my Windows 7 work machine, with UI language English, Simplified Chinese and Traditional Chinese, all 3 presented using both Aero theme and Classic theme:

Expand for screenshot

English

Aero

Evals to Segoe UI.

Classic

Evals to Tahoma.

Simplified Chinese

Aero

Evals to Microsoft YaHei.

Classic

Evals to SimSun.

Traditional Chinese

Aero

Evals to Microsoft JhengHei.

Classic

Evals to PMingLiU.

GitHub, Bootstrap, Wikipedia, and later Stack Overflow, all had to roll back from using it due backslash from the community.

Please note: most of these sites changes reference the only one "issue" regarding system-ui: https://infinnie.github.io/blog/2017/systemui.html on GitHub (GitHub Primer CSS, Bootstrap [note that the issue author is the same as the blog post author - conflict on interest], Wikipedia), which only "affects" Simplified Chinese, Classic theme, Windows 7 users. It should be in no way that such a minority group should be allowed to direct most of the users to stop using system-ui just because the font rendering is bad for their language in one old settings, ignoring all the other benefits of using system-ui.

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.

Please note that what system-ui is not for giving good result, it is to integrate with the look and feel of the native OS (https://drafts.csswg.org/css-fonts-4/#system-ui-def). It is just faithfully reproducing what the user had already been using on their native OS, regardless of the font choice. If the designer doesn't like it, do stop using system-ui, but they're just missing on the chance to localize to the users correctly.

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

Do note that this will make Windows 7 Classic theme (pointed in "the issue") display the wrong font: it should have been Tahoma, not Segoe UI.

When I was in discussion with GitHub when they naively added Meiryo to the font stack (overriding Chinese text too), the devs have mentioned that they would very much like to use system-ui, including if the user chose to use a serif font, but is blocked only due to "the issue". Quote:

Why prioritise system-ui over ui-sans-serif? If the system is using, say, a serif font as the system font, would Primer really want to use that?

AFAIK, Primer tries to stay as close to the default system font as possible. So I would say yes.

GitHub Primer's response so far is to allow users to write their own font family stack.

Mentioed in https://infinnie.github.io/blog/2017/systemui.html:

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

I acknowledge that this is an issue on Windows, but do note that this issue also affect other languages and systems too.

On Windows, Traditional Chinese uses Microsoft JhengHei, which has an even worse Bold weight compared to Simplified Chinese Microsoft YaHei. Both Chinese fonts come with 3 weight: Light, Regular, Bold. Following is a rough font weight comparison for both Chinese fonts (hanzi only) relative to Segoe UI (italic are new weights not in Windows 7):

Meiryo for Japanese isn't anywhere good; it only have 2 weights: Regular and Bold.

On Mac side of things, the Chinese font PingFang comes in Simplified Chinese (China), Traditional Chinese (Taiwan), and Traditional Chinese (Hong Kong), each comes with 6 weights. However, the weights provided are (source (2)):

中文	英文	FontWeight值
苹方-简极细体	PingFangSC-Ultralight	w100
苹方-简纤细体	PingFangSC-Thin	w200
苹方-简细体	PingFangSC-Light	w300
苹方-简常规体	PingFangSC-Regular	w400 or normal
苹方-简中黑体	PingFangSC-Medium	w500
苹方-简中粗体	PingFangSC-Semibold	w600

Its Semibold isn't even reaching Bold weight of SF Pro.

Only Japanese text is remotely good on Mac: Hiragino Sans comes with W0-W9, matching closely with SF Pro's weights.

It's way better on Android (and some Linux) side: Noto Sans CJK comes with 7 weights, roughly matching Roboto's 6 weights. Also, all CJK regions uses the same font design, which is a plus when using system-ui since there is no discrepency between different localization.

Point is, CJK fonts have been quite a pain on system vendors due to its pricey nature. "lacking many font weights" is definitely not a factor when considering a design to match user's system: there's only that many weights on all these OS, and OS fonts are limited to the same set of weights too. The burden of system-ui being "ugly" is on OS vendor on this issue. Website developers will be better off hard coding the best font for their own locale (which might be an issue; see next point) instead of relying on system-ui if they want a "good result" instead of "system default". Note that "system default" ∌ "good result" outside of Latin text.

Also, there is additional benefits such as correctly localizing the font for the users, especially towards CJK users. Let me demonstrate: the following is a text typesetted in Microsoft YaHei (SC), Microsoft JhengHei (TC), Meiryo (JP):

Notice the following characters: 将, 甩, 复, 与, 窗. These characters are written differently in different languages/regions due to an issue: Han unification. By using system-ui and correct user localization settings (which most Chinese users do), this above issue is mitigated by using the correct font stack to display CJK Unified Ideographs, and preventing display of incorrect localization. Using sans-serif does not come with this benefit as it uses the default font fallback regardless of system locale settings, which on Windows prioritise Japanese over Chinese and leading to more issues than of broken Latin text. Hard-coding the font stack will only work if you're targeting one specific locale, as you will be required to order the priority of fonts. Most Chinese users will appreciate "correct writing form" more over "looking good".

The locale settings in system-ui doesn't only help CJK, it might help with other locales too (e.g. different italic forms of Cyrillic).

Ignore this point if your website has correct language tagging: <html lang="zh-hans">/zh-hant/ja will fix the font for sans-serif most of the time. If your (or user-generated) content does not have any language information, system-ui is the better bet for localization.

As I said, no reason to stop using `system-ui` for just some "ugly" display due to poor system font (and user) choice.

TL;DR: The issue mentioned in https://infinnie.github.io/blog/2017/systemui.html is a non-issue as it isn't what system-ui tries to achive: providing the native OS feel that the user already had on their machine. Developers can note the one minor consequence for the one specific situation for some Chinese users, but do remember that system-ui is working perfectly matching the user OS's native interface.

@NightFurySL2001

@NightFurySL2001

I'm aware the other aspects of this issue as you mentioned, and I'm pretty sure OP being an expert in CJK field, knows it better than both of us.

But let's go back the topic: I don't agree with you that MS YaHei is "not terrible"; it's too wide compared to majority of English typefaces. Also some punctuations are totally ruined:

GitHub default:

system-ui (i.e. MSYH):

Regardless, it being "enlarged" alone is already a serious drawback since the designers of the sites often have a fixed (perceptive) font size in their mind. Let's put it this way: if English users see the font in that size is expected, why Chinese users (when seeing the same English content) would need something different?

Using sans-serif does not come with this benefit as it uses the default font fallback regardless of system locale settings, which on Windows prioritise Japanese over Chinese and leading to more issues than of broken Latin text.

Totally false. Did you test it? Firefox and Chrome have slightly different fallback mechanics [1] in this regard, but both will fallback to Chinese version glyphs on a Chinese Windows. It even works with Chinese Windows with browsers in English display language.

(All tested on Chinese Win7)

Chrome:

Firefox:

Chrome is even better when using sans-serif, because it uses Meiryo to display kanas and proper English fonts to display Latin letters. Firefox on the other hand, will use heuristics to guess the language of un-tagged content and use that for the whole page instead, it is not a glyph-by-glyph process.

Footnote

[1] On chrome, make sure you set Chinese priority higher than Japanese. Which is the default if you use Chinese version Chrome.

Ignore this point if your website has correct language tagging: /zh-hant/ja will fix the font for sans-serif most of the time. If your (or user-generated) content does not have any language information, system-ui is the better bet for localization.

Funny you mentioned lang tagging. This is one of THE worst issue of system-ui, actually, other than being ugly.

Even if you tag it with <lang="ja">, it will still use MS YaHei font if you use system-ui. See the screenshots above.

Also, system-ui is intrusive. If I don't like X font, I can always manually replace it with

@font-face {
    font-family: "XXXX";
    src: local("YYY");
}

However, this doesn't work with system-ui keyword (it used to work in Chrome, but they got rid of it); if certain websites use it, I have to replace the whole font stack manually.

At last, a more general point: https://infinnie.github.io/blog/2017/systemui.html is not the holy grail of system-ui issue. Refuting that alone doesn't mean all issues are non-issue. As I displayed above, the issue of it isn't limited to "niche, classic theme" users.

But let's go back the topic: I don't agree with you that MS YaHei is "not terrible"; it's too wide compared to majority of English typefaces.

Have you seen Tahoma for Windows 7 Classic theme (screenshot provided in previous comments)? It is wider and higher than Segoe UI, but users does not have a problem with it. What you are trying to do now is you are forcing people to follow your own aesthetic standards by saying the font is too wide compared to Segoe UI and ignoring all the other benefits of system-ui.

Also some punctuations are totally ruined:

This is non-issue: The font being used is compliant to GB 18030, which makes the quotation mark full-width as it is used in Chinese for quotation (E.g. “我觉得：‘你觉得’。”) This is a legacy problem related to the decisions of GB team and Unicode to share a codepoint for quotation marks. Font support (in Microsoft YaHei) from its vendor Microsoft is required to fix this "problem", and not a problem of system-ui.

Regardless, it being "enlarged" alone is already a serious drawback since the designers of the sites often have a fixed (perceptive) font size in their mind. Let's put it this way: if English users see the font in that size is expected, why Chinese users (when seeing the same English content) would need something different?

If you are designing for cross-platform, multilingual use, a "fixed (perceptive) font size" is a very bad decision. Some languages requires bigger line height/size to accommodate their respective languages, which sometimes reflects on to the fonts being used. It is better to use the designated font (and size) provided by the system for each language rather than trying to enforcing a constant aesthetic across all language groups.

If the system vendor does not think enlarging text is required (eg in Mac), then that will fit your usage. Else, just write your own font stack.

Totally false. Did you test it? Firefox and Chrome have slightly different fallback mechanics [1] in this regard, but both will fallback to Chinese version glyphs on a Chinese Windows.

Sorry, this is my fault. I did not test this issue thoroughly.

It even works with Chinese Windows with browsers in English display language.

Even if you tag it with <lang="ja">, it will still use MS YaHei font if you use system-ui. See the screenshots above.

However, I failed to recreate this issue. system-ui with language tagging works just fine on pure English Windows. Screenshot below (latest stable Chrome & Firefox):

This is an issue with Windows multilingual and should be raised to Microsoft. However, this alone shouldn't be an issue to block websites from using system-ui as the issue is vendor-specific. The testing works fine on Android and iPadOS, with respective correct locale display, and even better display of Latin text using Roboto (both using Simplified Chinese UI):

Screenshot of lang on Android and iPadOS

Also, I will argue that displaying the correct localization with correct font when no language tag is present is more important than displaying the best visual result when no language tagging is done. You definitely do not want Meiryo to overrride the Chinese part (especially by default, Meiryo is overriding Microsoft YaHei in regedit) as most of the internet does not tag languages properly (e.g. GitHub user content). Using system-ui will ensure the correct locale is displayed based on system settings.

Also, system-ui is intrusive. If I don't like X font, I can always manually replace it with

system-ui is not designed to be replaced. It is just a keyword that is used to replace Mac's hacky -apple-system,BlinkMacSystemFont font stack while expanding the same functionality across platform, such that developers can integrate their website using the system font. For the screenshot provided in "the issue" by infinnie, remember, this is what the system font has already been using.

English

Aero theme

Classic theme

Simplified Chinese

Aero theme

Classic theme

There is no point to replace system-ui for something you want instead of what its intended purpose is. If you don't like it, write your own global CSS with !important keyword to always replace the site font.

At last, a more general point: https://infinnie.github.io/blog/2017/systemui.html is not the holy grail of system-ui issue. Refuting that alone doesn't mean all issues are non-issue. As I displayed above, the issue of it isn't limited to "niche, classic theme" users.

Please note, all issues I have been looking on system-ui (StackOverflow, and including your issue) points to this specific target group: Windows, Simplified Chinese users; literally no other languages have any related kind of issues.

TL;DR: system-ui is for using the current system font. Locale tagging might be broken for some languages, however all texts will be displayed by the user's preferred locale first instead of relying on prewritten font stack. Some fonts for specific locale (most notably Simplified Chinese) will be bad in some particular instances; in other languages it will be enough for normal daily usage.

Side note: Windows has always been bad on multilingual display; Win32 doesn't even handle multilingual text in the same line. That is the main point why this "issue" is being brought up in the first place from Simplified Chinese users (bad Latin in SimSun from Windows 95-XP, "wide" Latin in Microsoft YaHei from Windows Vista-11). However, there is no way that this should be the point that all sites must stop using system-ui, and CSS should drop support for system-ui. It is a great tool for devs to use, and if you can't handle it, do write your own font stack; just please dont shove your opinion through all other user's throat. The most minimal fix that does not affect other users should be contacting Microsoft and let them fix it (e.g. WinUI), rather than blocking all other global users from using system-ui.

Please note, all issues I have been looking on system-ui (StackOverflow, and including your issue) points to this specific target group: Windows, Simplified Chinese users; literally no other languages have any related kind of issues.

Well, system-ui isn't great on Japanese Windows either. Yu Gothic UI, the font which is resolved when system-ui is used on Windows (10+), looks like a condensed typeface thus is not great when used in paragraphs. People complained when GitHub added system-ui to their theme so they tweaked their CSS to add Meiryo for readability primer/css#1573 .

I really wish people use sans-serif (or serif) instead of system-ui for content; system-ui takes away users' ability to customize fonts in browser settings...

That is still a problem with Microsoft and bad font choices, along with bad Win32 font technology. Please report the problem to Microsoft. (Same for customization: report the bug to system vendors; not a problem from CSS specs)

If system-ui is so bad, what alternatives do you suggest for replacing the lengthy -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" (and even longer if considering Android, also bad display of Arial on *nix systems) to achive the same goal: "integrate with the look and feel of the native OS", while being "friendly" to localization? If this goal not suitable to be achived, what goal should system-ui do?

You keep saying real issues are "non-issue" because "that's what MS should fix", "that's what XXX should fix", that's a frustrating way to constructively discuss anything.

This is non-issue .... This is a legacy problem
Font support (in Microsoft YaHei) from its vendor Microsoft is required to fix this "problem", and not a problem of system-ui.

The full-width curly quotes isn't an issue of MS YaHei, which is supposed to be a Chinese font. It's totally fine for it to have full-width quotes. The issue is you force to use MSYH on pure English content, which is what system-ui on Chinese Windows does.

If you are designing for ... multilingual use,
Some languages requires bigger line height/size to accommodate their respective languages, which sometimes reflects on to the fonts being used.

Exactly?

Chinese users will see different (wrong) size of English content when using system-ui.
Chinese content remains unchanged, regardless using the current GitHub font stack or using system-ui.
English users see no difference either way

How is this an advantage of system-ui than disadvantage?

However, I failed to recreate this issue. system-ui with language tagging works just fine on pure English Windows.

???? The whole discussion is about issues of system-ui for Chinese Windows (or Japanese Windows) and now you test on English Windows?

Of course it doesn't happen with English Windows, because its "system-ui" is Segoe UI, which don't have CJK glyphs and will fallback to a different Chinese/Japanese fonts for that. The whole point of "system-ui bad" is because on Chinese Windows the default font (MSYH) has too large character set and will be used to display anything, even when improper.

this alone shouldn't be an issue to block websites from using system-ui as the issue is vendor-specific

Previously you said these are non-issues and shouldn't block because it only affect a small, niche, classic theme users (quote: "Do be noted that this 'issue' only arises when the user voluntarily choose to use the Classic theme"), and I pointed it out it actually affects all the Chinese/Japanese Windows users. Now you moved the goalpost to say "Chinese, Windows users are too small to block".

Also, I will argue that displaying the correct localization with correct font when no language tag is present is more important than displaying the best visual result when no language tagging is done. You definitely do not want Meiryo to overrride the Chinese part
by default, Meiryo is overriding Microsoft YaHei in regedit

I already said, will example, this won't happen if you have correct language priority setting. Chrome will pick characters based on that. Even on English Windows. Your own screenshot confirms it. Not sure how it has anything to do with regedit, or system-ui. Go ahead and change your language priority in Chrome. You will see changes immediately in real-time:

Result (remember to refresh):

This problem actually WILL happen when you use system-ui. You "definitely do not want MSYH to override the Japanese kana part", and it will happen if you use Chinese Windows + system-ui.

Using system-ui will ensure the correct locale is displayed based on system settings

Again, totally false. At this point, I feel like you don't know, or have not thoroughly tested, how system-ui or font fallback works. Since you use Chrome, here is how it works in Chrome:

system-ui works by simply applying MSYH (Simp. Chinese), Yu Gothic UI or Meiryo (Japanese), or Segoe UI (English) to all the content, regardless if there is a language tag or not (it also ignores display language setting of Chrome).
sans-serif on the other hand is language-aware. It uses the sans-serif font in corresponding settings for each language if lang tag is set. For example, by default sans-serif + lang="hans" will apply MSYH to all the content. Same goes to other languages. (If not lang tag is given, it uses the one with the current display language of Chrome.)
If a character does not exist in the given font, it will fallback to a different font on glyph-by-glyph basis. So Latin-letters goes to Latin font setting, kana goes to Japanese font setting, etc. For ambiguous cases (like 将/甩), Chrome will prioritize what the users prefer based on language priority settings.

The problem with system-ui on Chinese Windows is, MSYH have all the glyphs. Once it is set, it will override virtually everything, language tagged or not. As said above, this won't happen if you are using English Windows, because its system-ui font doesn't have CJK characters.

The issue that "on English Windows, untagged content will use Meiryo to display Chinese characters instead of MSYH" you mentioned is because language priority setting isn't properly set (or set at all). So Chrome have nothing to work with, and it picks Japanese over Chinese. (This is not even "wrong" by the way: it will either mess Chinese characters in Chinese, or Japanese kanjis in Japanese.) If you prefer Chinese characters, this can be easily fixed by making sure Chinese locale has higher priority than Japanese, as said above.

You don't need system-ui to 'fix' this, because on English Windows all it does is just to apply Segoe UI on all the content and then it relies on font fallback to do the reset of the job. The same can be achieved by using any English font - even sans-serif (which isn't a real font, but it maps to Arial by default on English Windows). Or just use Segoe UI.

TL;DR: system-ui isn't what fixed your "Chinese characters in Meiryo" issue. And it causes all sorts of other issues on Chinese and Japanese Windows simultaneously.

There is no point to replace system-ui for something you want

I.. what?

all sites must stop using system-ui,
CSS should drop support for system-ui

No one is suggesting any of these.

shove your opinion through all other user's throat

No one is doing that, either. All the websites listed above are too big to not deal with system-ui's drawbacks, because they have sizable Chinese users. Which is exactly why they "do write your own font stack" as you suggested.

Keep in mind we're not asking for special treatment beyond everyone else. All these font stacks are complex because they're trying to work around the issues WITHOUT sacrificing experience of other users, be it English, MacOS, Linux, Android, or whatever. It's not perfect, but they are trying to be as inclusive and comprehensive as possible. You're the one that suggesting dev to just ignore real issues with millions if not billions of Chinese, Japanese Windows users, OTOH.

If system-ui is so bad, what alternatives do you suggest for replacing

Just use sans-serif? Or even just stick with these long mess font stacks. Yes it sucks system-ui didn't magically work in all cases but that's the reality you can't simply dismiss.

The widths of hiragana, katakana, and han glyphs in high-quality Japanese fonts supporting the OpenType feature palt e.g. Noto Sans CJK and Yu Gothic except for Yu Gothic UI are the same by default.
If the font provides a variant font whose name just removed P (e.g. MS PGothic and BIZ UDPGothic), those in it do not share the same width.
I think that han glyphs in Chinese fonts also share the same width but have not investigated it yet.

I just heard about another bug in Yu Gothic UI:

The Greek letter Ω turns into a different character (small Cyrillic letter и) only when it's bold (Semibold or Bold weights).

https://codepen.io/tats-u/pen/GgjombB
https://zenn.dev/arad/articles/omega-to-cyrillic (Japanese)
https://note.com/minn_1092/n/n2de6227e8224 (Japanese)

Removed `system-ui` as a font family, as the behavior of system-ui is…

The above occurs in not only Japanese but also English or Greek context:

All и in this screenshot are intended to be Ω.

That looks like it's simply a platform font bug, not really anything to do with CSS. Have you reported it to Microsoft? Nobody else is in a position to fix it.

Have you reported it to Microsoft?

https://aka.ms/AA11xr5m (Japanese)

That looks like it's simply a platform font bug, not really anything to do with CSS.

This is merely a casual, freely quotable warning aimed at non-Japanese speakers (especially Latin script users) who are system-ui fanboys trying to cram system-ui into a site or framework’s font stack: “Don’t abuse system-ui indiscriminately, because depending on the environment it can resolve to some buggy, messed-up font.” The Feedback Hub can’t be viewed by non-Windows purchasers, and the format of links to it doesn’t look permanent, so it’s important to leave evidence in a public place.

I do agree, however, that the CSS spec doesn’t allow any further approach to this problem.

If I could wish for anything, it would be for the browser vendors to update their sans-serif font stacks of Greek-like scripts, so websites wouldn't need to list Latin UI fonts for major operating systems (e.g. Segoe UI, Roboto).

@tats-u

@tats-u The W3C CSS specification isn't a place to enforce personal preferences. Telling everyone to drop system-ui because it has issues in a specific evironment is a subjective choice, not something that should be imposed on everyone.

This is merely a casual, freely quotable warning aimed at non-Japanese speakers (especially Latin script users) who are system-ui fanboys trying to cram system-ui into a site or framework’s font stack

The issue with poor system-ui font is very obviously the fault on Windows when system-ui is better than developers speifying custom fallback font list on other major operating systems i.e. Android (Roboto/Noto family), Apple and Linux. The i18n implementation of system-ui on Apple device is even better than using sans-serif, which is a plus of using system-ui if they want to mimic the operating system feel.

Given that Windows render long texts in Segoe UI eg EULA on installation, Windows do expect the system font i.e. system-ui to be usable for long text too. The issue is just that Windows developers have bad taste, worse implementations and nightmare customer support. (all major system-ui failure reported so far only appears on Windows with CJK language)

As a person in other comment thread says, and I quote:

must we avoid an spec because an OS fails at Chinese [editor: and Japanese] text?

If you really care that Japanese Windows shouldn't use Yu Gothic UI, you should submit this feedback to Microsoft to consider using another font. The benefits of using system-ui for cross-compatibility isn't really outweighted by the poor implementation on Windows. If you realllly doesn't want system-ui, maybe instead of suggesting others to remove it, add a JavaScript that detects Windows and override the CSS family. Note that i18n on Apple works better on system-ui than sans-serif.

Given that Windows render long texts in Segoe UI eg EULA on installation

Mi¢ro$oft has no incentive to render the EULA in a readable font. By deliberately rendering it in a hard-to-read font, they increase the probability that users will miss clauses favorable to Mi¢ro$oft.

If you really care that Japanese Windows shouldn't use Yu Gothic UI, you should submit this feedback to Microsoft to consider using another font.

https://aka.ms/AA4rj5q

https://x.com/search?q=%22Yu%20Gothic%20UI%22

It seems you don't understand even the slightest bit of frustration among Japanese Windows users. This issue of the Japanese Windows system font glyphs being terrible has been pointed out by many Japanese users who notice the differences between fonts for many years, yet Microsoft has stubbornly ignored it. While Yu Gothic UI has gained some positive recognition in PowerPoint slides, its overall design reputation remains negative.

↑ This image shows why Windows adopts overly narrow fonts that inherit the width of MS UI Gothic, such as Yu Gothic UI, as the default Japanese UI font. The Japanese UI font were developed as a compromise to avoid using half-width katakana, which is more difficult to read.

JavaScript that detects Windows and override the CSS family

Layout shifts occur when JavaScript loads. This is completely unacceptable. The method to detect the User-Agent or Accept-Language on the server cannot be applied to static .html files.

Note that i18n on Apple works better on system-ui than sans-serif.

In this case, -apple-system + BlinkMacSystemFont would be sufficient.

isn't really outweighted by the poor implementation on Windows.

Call me again when the market share of macOS (and Linux) in the (desktop/laptop) computer market significantly surpasses Windows.

There are still many legacy desktop applications in Japan that rely on the narrow character width of MS UI Gothic. If these applications are forced to use standard-width fonts like Yu Gothic or Noto Sans JP instead of Yu Gothic UI or Meiryo UI, which have nearly identical character widths, it will likely lead to a series of tragedies where text overflows, as shown in the image above where text is truncated with ellipses.

The system-ui implementation on macOS isn't perfect either, with Safari displaying Japanese glyphs slightly smaller compared to other browsers, resulting in different rendering.

If there exist applications that break when they're not viewed with a particular font, then:

That seems like very bad design
They should specify that font in their application's design, and not leave it up to the OS?

Neither of which are in scope for this WG, let alone this issue?

They should specify that font in their application's design, and not leave it up to the OS?

This is why MS UI Gothic becomes the default in Windows Forms.
WPF uses the default system font in the current locale (Yu Gothic UI for Japanese Windows 11) by default unless specified.

If Microsoft were to change system fonts to Noto Sans JP, Japanese WPF applications that don't specify a font would experience design breaks.

system-ui's behavior is considered to be equivalent to that of WPF. For quick-and-dirty solutions to use it only with domestic users of web applications or websites (outside e.g. Japan), it's perfectly adequate (unless a foreigner visits your page or app).

The YaHei and JhengHei fonts in Simplified and Traditional Chinese show slight differences between their UI and non-UI variants, but do Chinese designers find these differences noticeable?

The UI variant has slightly tighter line spacing
The UI variant uses proportional Western-style quotation marks instead of full-width ones

PS: These quotation marks will be overwritten by Segoe UI, though.

Navigation Menu

Repository navigation

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

English

Aero

Classic

Simplified Chinese

Aero

Classic

Traditional Chinese

Aero

Classic

As I said, no reason to stop using `system-ui` for just some "ugly" display due to poor system font (and user) choice.

English

Aero theme

Classic theme

Simplified Chinese

Aero theme

Classic theme

36 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

litherum commented on Feb 28, 2019

Malvoz commented on Mar 1, 2019

kojiishi commented on Jul 15, 2019

AmeliaBR commented on Jul 15, 2019

litherum commented on Jul 16, 2019

kojiishi commented on Jul 17, 2019

NightFurySL2001 commented on Sep 26, 2022

fireattack commented on Sep 26, 2022

NightFurySL2001 commented on Sep 27, 2022

English

Aero

Classic

Simplified Chinese

Aero

Classic

Traditional Chinese

Aero

Classic

As I said, no reason to stop using system-ui for just some "ugly" display due to poor system font (and user) choice.

fireattack commented on Sep 27, 2022

NightFurySL2001 commented on Sep 28, 2022

English

Aero theme

Classic theme

Simplified Chinese

Aero theme

Classic theme

myakura commented on Sep 28, 2022

NightFurySL2001 commented on Sep 28, 2022

fireattack commented on Sep 28, 2022

36 remaining items

tats-u commented on Sep 23, 2025

tats-u commented on Mar 3, 2026

tats-u commented on Jul 17, 2026

jfkthame commented on Jul 17, 2026

tats-u commented on Jul 17, 2026

tats-u commented on Jul 17, 2026

NightFurySL2001 commented on Jul 18, 2026

tats-u commented on Jul 19, 2026

tats-u commented on Jul 19, 2026

Sora2455 commented on Jul 19, 2026

tats-u commented on Jul 19, 2026

tats-u commented on Jul 19, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

As I said, no reason to stop using `system-ui` for just some "ugly" display due to poor system font (and user) choice.