Prefer `sans-serif` to `system-ui` in default fonts

[tats-u]

Is your feature request related to a problem? Please describe.

system-ui does not guarantees that the mapped font is optimized for the page (content) language.
For instance, if the language of your OS is Japanese and you visit a simplified Chinese page (e.g. https://cn.vite.dev/), a Japanese font (Yu Gothic UI in Japanese Windows) is allocated at least in Windows:

It looks ugly especially as Chinese text.

• The font family is not unified. It lacks the glyph "历", so a different (native Chinese) font is used there and the weight differs than the other han characters.
• The shape of 置 and 版 are incorrect. They are Japanese forms (置 and 版). Note: their code points are identical!

If you remove system-ui, you can get the intended glyph (look at 置 and 版) even in a Japanese OS:

A similar (vice versa) bug will occur if you visit a Japanese page that abuses system-ui with a Chinese OS.

Also, Yu Gothic UI is not optimized for long text, which VitePress is designed to serve. It is overly optimized for cramming labels or relatively short descriptions into narrow spaces.
Microsoft YaHei UI seems to have narrower line height than the normal Microsoft YaHei.

Condition for font locale mismatch:

• The page abuses system-ui
• The language of the page is one of CJK but different from that of OS
• The language of the page is not simplified Chinese or that of OS is not CJK

Describe the solution you'd like

Use sans-serif instead of system-ui. If both exists, If both are used, eliminate system-ui. ui-sans-serif is dedicated to macOS as for now.

If you do not like the Latin glyphs in common fonts mapped to system-ui, add Segoe UI (Variable) or Apple system fonts.

It guarantees that it is the most readable font for the reader and matched to the OS language.

system-ui is nothing but Apple's self-indulgence.

Describe alternatives you've considered

Stick to system-ui

It can look crappy for readers, contrary to Apple's intentions.

Additional context

Split out from #4927

• Set lang attribute to language labels #4927

https://infinnie.github.io/blog/2017/systemui.html
https://heistak.github.io/your-code-displays-japanese-wrong/

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[tats-u]

Rspress uses only sans-serif, so "版", "将", and "解" there are rendered as the intended forms even in Japanese environment:

c.f. Japanese forms are "版", "将", and "解".

You can control the glyph by <span lang=zh>汉</span> or <span lang=ja>漢</span>.

[tats-u]

This mismatch happens in Windows and some Android devices.

✅️iOS

❌️Windows for Japanese + Firefox (1st) / Chrome (2nd):

✅️Pixel + Firefox:

[tats-u]

In the first place, system-ui is designed for applications, not for documentation sites or blogs.
Electron or WebView based applications are the most compatible with system-ui.

[tats-u]

ui-sans-serif has effect only in macOS/iOS as for now, but we cannot expect how it is going to look like or when it is going to be enabled in Windows.

[brc-dd]

ui-sans-serif has effect only in macOS

It actually works only on Safari. Might be better to just prefer -apple-system as that will work on Chromium and Firefox too.

[tats-u]

Is BlinkMacSystemFont unnecessary as a fallback today?

[brc-dd]

Is BlinkMacSystemFont unnecessary as a fallback today?

I just checked locally, from what I can tell, -apple-system works on Firefox and Safari. BlinkMacSystemFont works on Chromium.

[tats-u]

I see. Both are necessary.

Current: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Preferred: "Inter", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

What about OS fallback Latin fonts like Segoe UI? Is it unnecessary since we have Inter?

[brc-dd]

What about OS fallback Latin fonts like Segoe UI? Is it unnecessary since we have Inter?

Hmm, not sure. There are some characters that are in Segoe UI but not in Inter (mostly Arabic, Hebrew, and some Indian scripts). But if we list Segoe there explicitly then ideally we should also list other stuff like Roboto, Noto, Ubuntu, Oxygen...

[tats-u]

How about trying to entrust to sans-serif once? We are in East Asia and do not know much about East and South Asia. (If there are some members living in such regions in e.g. Vite or void0 team, you may want to ask them)