[css-fonts] system-ui behavior is undesired for some users
#3658
Comments
|
One of two things is true:
|
|
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:
Why would one expect all OS versions to render the same font? That is no different to using a "system font stack"-hack.
Not all fonts support all languages, which is unfortunate and an issue with the rendered font.
The rendered font is considered undesired, that'd be an issue for that OS version? |
|
I guess we need to solve this when we add more system font families.
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.
One of the original motivations of
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 Blink can fix this. I’m hoping to solve this somehow, make |
|
Koji, what particular change are you requesting for the CSS definition of 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? |
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 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.
Oh, really, great if so, thank you. The definition of 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
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 Windows 7 Aero theme, using Microsoft YaHei: `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).
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: |
|
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 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.
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 |
|
@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 screenshotEnglishAeroEvals to Segoe UI. ClassicEvals to Tahoma. Simplified ChineseAeroEvals to Microsoft YaHei. ClassicEvals to SimSun. Traditional ChineseAeroEvals to Microsoft JhengHei. ClassicEvals to PMingLiU.
Please note: most of these sites changes reference the only one "issue" regarding
Please note that what
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
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:
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)):
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 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 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: The locale settings in Ignore this point if your website has correct language tagging: As I said, no reason to stop using
|
|
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?
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: Chrome is even better when using Footnote[1] On chrome, make sure you set Chinese priority higher than Japanese. Which is the default if you use Chinese version Chrome.
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 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. |
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
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.
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.
Sorry, this is my fault. I did not test this issue thoroughly.
However, I failed to recreate this issue.
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 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
EnglishAero theme
Classic theme
Simplified ChineseAero theme
Classic theme
There is no point to replace
Please note, all issues I have been looking on TL;DR: 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 |
Well, I really wish people use |
|
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 |
|
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.
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.
Exactly?
How is this an advantage of
???? The whole discussion is about issues of 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.
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".
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
This problem actually WILL happen when you use
Again, totally false. At this point, I feel like you don't know, or have not thoroughly tested, how
The problem with 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 TL;DR:
I.. what?
No one is suggesting any of these.
No one is doing that, either. All the websites listed above are too big to not deal with 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.
Just use |
I still does not understand why you say the Latin part of Microsoft YaHei is bad. It is just based on Segoe UI and slightly enlarged to match with Chinese characters (due to visual differences), and there is nothing inherently bad with Microsoft YaHei. Font size is a complex matter and you don't even get the same size on the same platform: did you checked Tahoma from Windows XP/7 Classic theme? SF Pro on Mac have slightly higher x-height compared to Segoe UI, and on the same screen SF Pro appears larger than Segoe UI too just like Microsoft YaHei, so does this makes SF Pro also a bad font? Designating a font as "bad" isn't only just what you think looks good. As far as I know, so far on the internet across English and Chinese communities, no one is saying the Latin part of Microsoft YaHei is bad. There is simply just no "correct" size for text; what is given by
Sorry as I am confused. I do not have much time to test across multiple languages and settings. I will acknowledge that
Yes, that is correct. However, the language tagging issue is a problem on Windows Win32 API, it has nothing to do with how CSS specs define
You mentioned replacing
You (and infinnie) are suggesting all the major sites to stop using
As mentioned above, there is nothing inherently bad with Microsoft YaHei, just you saying that the Latin (and kana) parts are "bad". As a native Chinese/English user, I do not see any problems using the Latin part from Microsoft YaHei (apart from apostrophe/quotation marks; easy to fix with CSS Also, I just noticed that Japanese on Windows 10 have been changed from Meiryo to Yu Gothic UI. Meiryo's Latin part is based on Tahoma but stretched wider, while Yu Gothic UI's Latin part is based on Segoe UI with no stretching applied. Does it make sense when Japanese users say that Meiryo looks better than Yu Gothic UI, when you are saying that Microsoft YaHei looks worse than Segoe UI?
As mentioned above, it is about personal aesthetics at this point rather than the font being inherently bad (e.g. SimSun bitmap text at 12pt) and everyone will have their opinions on the issue. It is in no way that one person should just let everyone stop using
From a technical view, But for real, this issue is not the burden for the W3C CSS working group. Stopping the use of What do you suggest the W3C CSS working group to do with |
|
@NightFurySL2001 MSYH's Latin characters are not "bad" on letter level. It just doesn't suit for displaying English-only or English-majority content due to dramatic size difference and punctuation issues. Same goes to Meiryo, just worse.
Some quantitative comparisons might help. How "larger" is it? Just as large as MSYH?
Sorry, I genuinely don't get what you mean. I think Segoe UI is better than MSYH, yes. I also think (based on your image, I'm not familiar with Yu Gothic UI) Yu Gothic UI ('s latin part) is better than Meiryo's, so if Japanese users tell me that, I will agree with them. Because both former ones are more compact. Is it supposed to be some contradictions here?
So lets make it clear before we continue to argue semantics: do you genuinely think this:
Nothing. I didn't open this issue, or even replied here before your comment. I do agree with #3658 (comment). My comments elsewhere, are meant to warn people who care about user experience than some purist ideology, to think twice before using system-ui due to its issues. And while I am flattered you thought that way, I'm not the only one who expressed the opinion on this matter to "block" changes. I didn't even involve in the discussions that eventually caused GitHub/Wikipedia/Bootstrap to roll back their changes. I did make comments "in time" on SO's case IIRC, but I'm far from the only one (and lots of English users seem to have issues with system-ui on other platforms too, but I am not familiar with that enough to comment). |
SF Pro (Text) is not as large as Microsoft YaHei, but comparable to Tahoma. For numerical sense, the x-height are: Segoe UI 1024, SF Pro 1078, Tahoma 1117, Microsoft YaHei 1106. Caps height are: Segoe UI 1434, SF Pro 1443, Tahoma 1489, Microsoft YaHei 1549. Ascender heights are: Segoe UI 1516, SF Pro 1506, Tahoma 1556, Microsoft YaHei 1637. Compared to Segoe UI, Microsoft YaHei is geometrically scaled up 108%, ratio between x-height and ascender is same as Segoe UI (67.5%). SF Pro x-height is 5% larger than Segoe UI while other metrics are relatively same as Segoe UI; ratio of x-height to ascender is 71.5%. Tahoma x-height is 9% larger than Segoe UI, and slightly bigger than Segoe UI in general by ~1%; ratio of x-height to ascneder is 71.8%. (Ratio of x-height to ascender usually determines the visual size of a font, i.e. the ratio of height of
The scaling on Microsoft YaHei is actually done to make it harmonize to Chinese parts; there are some generic metrics used in Chinese (and Japanese) fonts and those metrics usually requires the Latin part to be scaled up to make it visually harmonize. Reference: Noto Sans CJK/Source Han's Latin part is scaled 113-115%, Adobe Clean at 105-116%, IBM Plex JP at 105%. As I said, there is nothing wrong inherently by scaling the Latin part up in CJK fonts.
Please read my comment (which you quoted) carefully: Japanese users prefer Meiryo over Yu Gothic UI. See @ myakura comment here or this twitter thread, quoted below:
Yes. The design of Segoe UI is actually towards the smaller size (smaller x-height:ascender ratio), in this case Microsoft YaHei (UI)'s scaling up is more suitable and have better legibility. Here are a few screenshot using other fonts: Segoe UI SF Pro Text Tahoma Microsoft YaHei (UI) Meiryo (UI) Yu Gothic (UI) However, I do have to mention that I usually use my own CSS rule to override the webpage fonts, and I'm using Sarasa Gothic which also has a larger size compared to Segoe UI and might affect my own aesthetic jusdgement. |
|
I'm sorry, but why did you constantly compare to Tahoma? Isn't it only used by "classic theme" users, an actual niche group you think we should just ignore all together (I'd say less than 1% share if not 0.1%, but I pull the number out of my ass)? Anyway, I take what you said as "SF Pro is slightly larger than Segoe UI, and MSYH is much larger". Sounds like it proves my point.
I know. We're talking about it ruins english-only content.
That's because Yu Gothic UI's JAPANESE part is worse, not Latin part... The Japanese (kana and kanji) characters are super narrow and aren't suitable for normal text. It's literally not the purpose of it (it's narrower to save space; Yu Gothic is the variant meant for the normal text). And removing
The font on GitHub IS small. 14px.
Can you please at least screenshot in 100% zoom? All the fonts in your images are blurry (and it's not because of DPI setting because fonts are vector-based). And you conveniently didn't screenshot MSYH in the same setting to show how ridiculously large it is.
Dude, wtf? You are wasting time arguing something that doesn't even affect you, with people who actually have to suffer this. And if I understand it right, you don't even use Chinese Windows to begin with. All you did is to run a VM or second machine to test it on a whim. I'm confused about this whole thing and what you're trying to achieve. If you think nothing should be done on w3c's end, i agree with you. Never fought for that because I acknowledge it's Windows' issue. If you think sites should just start using system-ui for "just because" reasons, sorry I'm going to continue expressing my opposition when giving chance every time for the reasons listed clearly above. At this point you haven't give a single "pros" of using it, only "not so bad". |
|
Sorry for unclear screenshot. I will use another software and replaced the above screenshots with additional screenshots for Japanese fonts.
That is the point. Given the same font size, larger visual font will provide better legibility. That is merely a fact.
That is because My point is, Just for reference, could you provide any links that anyone else is saying Microsoft YaHei's Latin part looks bad from either English or Chinese communities? |
Install https://chrome.google.com/webstore/detail/advanced-font-settings/caclkomlalccbpcdllchkeecicepbmbm?hl=en
MSYH has been the default sans-serif font for Simp. Han's for years, but it was SimSun at one point. If I have to guess, your issue probably is caused by an old profile which inherited such settings from previous installs. Wish it helps.
As I clarified above, I meant that they're too big (wide?). Not the glyphs themselves are bad. |
xfq
added
the
i18n-tracker
|
I say there are two problems here:
So my actual proposal here is:
One small part of this is in scope for CSSWG, the rest is largely up to browser makers. |
|
Anecdotally, I've always seen Also judging by this comment, |
|
OK, macOS is apparently doing a much, much better job of this than I realised. I downgrade “in practice always” to “commonly” (because I think it’s still what every other platform does) with the other obvious corresponding wording changes. As for the first part: it often starts as “the same font as their OS”, but this is very consistently “… because |
|
TIL about Please remove this from the spec. See also. |
|
https://issues.chromium.org/issues/331123676?pli=1
|
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:
The text was updated successfully, but these errors were encountered: