Don't use `system-ui`, strip it from `--ifm-font-family-base`

[tats-u]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Motivation

system-ui is mainly designed for well i18ned web-based desktop apps (e.g. Electron-based). It is not designed for the font for documentation sites. e.g.:

1. system-ui in a Chinese page lοοκѕ lικе τһιѕ in Japanese Windows devices and vice versa. The shape of some characters are not intended.
2. 

https://docusaurus.io/zh-CN/

Windows + Japanese locale

❌️ (system-ui)

The 1st character does not have an ideal shape as a standard Chinese printing font.
The 2nd character is incorrect. It's Japanese unofficial abbreviation form.

✅️ (modify CSS via F12 to remove system-ui)

(modify CSS via F12 to use the font used as system-ui in Chinese Windows)

https://docusaurus-i18n-staging.netlify.app/ja/docs/migration/v3

❌️ (system-ui in Japanese Windows)

Too narrow. This font is helpful only in UI elements whose widths are limited.

This font is designed to prevent the width of UI elements intended for English text from expanding excessively when Japanese text is inserted. It is not suitable for normal use outside of PowerPoint.

❌️💀❌️ (replace system-ui with a default UI font in Chinese Windows to simulate Chinese locale)

Looks very ugly as Japanese text. Some character have incorrect shape (e.g. 非, 直 → 非, 直 )

✅️ (remove system-ui)

The shape of Japanese (and Chinese) character for the main text should be square like this.

This should be fixed by v4 release.

https://infinnie.github.io/blog/2017/systemui.html
https://heistak.github.io/your-code-displays-japanese-wrong/
w3c/csswg-drafts#3658
github.com/mdn/content/issues/41244
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family#system-ui

Self-service

• I'd be willing to do some initial work on this proposal myself.

[tats-u]

https://pnpm.io/ has stripped system-ui

pnpm/pnpm.io#446

According to the Korean author of this PR, the English letters in the Korean system font in Windows looks ugly as English text.

[slorber]

Disclaimer: I'm not very knowledgeable regarding fonts.

We can consider making a change for v4. What exactly do you suggest doing that wouldn't be disruptive for all the users who do not have a problem currently?

Can we dogfood the planned change on our own website to see if anyone complains first?

[tats-u]

What exactly do you suggest doing that wouldn't be disruptive for all the users who do not have a problem currently?

system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

↓

-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

Simply removing system-ui will suffice. Contrary to the intentions of Apple and its fanboys, system-ui does not guarantee that it is the most beautiful font for the current language. It is mainly for web-based desktop apps powered by e.g. Electron and Tauri.

Can we dogfood the planned change on our own website to see if anyone complains first?

Sure. Probably no one will not, I think. It has been battle-tested in https://pnpm.io/.

[tats-u]

Removing system-ui is not without side effects: when viewing a Japanese page on Japanese Windows, the width occupied by headings and navigation text significantly increases from the middle to the bottom example in the diagram below. However, on major operating systems other than Windows, system-ui already takes up approximately the same width as the bottom example, so this is not necessarily a bad thing. In fact, it ensures more consistent text width across different viewing environments.

[tats-u]

Do we need to create an issue on https://github.com/facebookincubator/infima first?

[Josh-Cena]

Yes this should be done in Infima. Docusaurus only uses system-ui in our RSS styles. We can of course override --ifm-font-family-base in our global CSS but I don't think that makes sense if this code is bad in itself.

[tats-u]

Created.