Re: [csswg-drafts] [css-fonts] `system-ui` behavior is undesired for some users (#3658)

> Some quantitative comparisons might help. How "larger" is it? Just as large as MSYH?

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 `x` compared to ratio of height of `l`)

> It just doesn't suit for displaying English-only or English-majority content due to dramatic size difference and punctuation issues.

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%](https://ccjktype.fonts.adobe.com/2015/01/shs-vs-ssp-and-scp.html), [Adobe Clean at 105-116%](https://ccjktype.fonts.adobe.com/2016/10/a-new-face-for-adobe-redux.html), [IBM Plex JP at 105%](https://github.com/IBM/plex/issues/388). As I said, there is nothing wrong inherently by scaling the Latin part up in CJK fonts.

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

Please read my comment (which you quoted) carefully: Japanese users prefer Meiryo over Yu Gothic UI. [See @ myakura comment here](https://github.com/w3c/csswg-drafts/issues/3658#issuecomment-1260957890) or [this twitter thread, quoted below](https://twitter.com/448jp/status/1432196177747873793):

> system-uiは文字通りUIのフォントを指定するためのもので、本文にはまったく向いていません。
> Google translate: Before I knew it, system-ui was added to GitHub's font-family specification, but on Windows it's displayed as Yu Gothic UI and it's hard to read, so I really want you to stop it.

> So lets make it clear before we continue to argue semantics: do you genuinely think this: [...] is better than this: [...]?

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
![image](https://user-images.githubusercontent.com/33471049/193171942-97ec45e4-94cf-4fc7-8c25-dcaa1107f6b7.png)

SF Pro Text
![image](https://user-images.githubusercontent.com/33471049/193171961-8ffa10d2-8b58-4135-80c4-6daf55dc4d4f.png)

Tahoma
![image](https://user-images.githubusercontent.com/33471049/193171974-701f35c8-a592-4a17-8912-c238cc01b955.png)

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](https://github.com/be5invis/Sarasa-Gothic) which also has a larger size compared to Segoe UI.




-- 
GitHub Notification of comment by NightFurySL2001
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3658#issuecomment-1263010361 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 30 September 2022 01:48:18 UTC