litherum
commented
5 years ago 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
Open kojiishi opened 5 years ago
litherum
commented
5 years ago One of two things is true:
Malvoz
commented
5 years ago 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-uiin 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
commented
5 years ago 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
AmeliaBR
commented
5 years ago 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
commented
5 years ago If the Windows system font really is ugly in Chinese, what do Chinese native apps do?
kojiishi
commented
5 years ago 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
commented
2 years ago 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:
system-ui. This page is displayed with Google Chrome.
```
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:
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 (https://github.com/mdn/content/issues/7751), there is literally nothing stopping the usage of system-ui.
fireattack
commented
2 years ago 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).
NightFurySL2001
commented
2 years ago @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:
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-uifont 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.
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.
fireattack
commented
2 years ago @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-serifdoes 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.
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.
NightFurySL2001
commented
2 years ago 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.
myakura
Result (remember to refresh):
Result (remember to refresh):
is better than this:
?
chris-morgan
Sora2455
mirabilos
tats-u
From crbug.com/554590#c21, github, Bootstrap, and Wikipedia decided to stop using the
system-uifont family because the visual quality of their pages is suffered on some OS/language combinations.Context reported in the issue above: