facebook / facebook/docusaurus

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

Open
#11,727 23 comments 3 reactions 0 assignees View on GitHub
proposal
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#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. image

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

Windows + Japanese locale

❌️ (system-ui)

Image

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)

Image

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

Image

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

❌️ (system-ui in Japanese Windows)

Image

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

Image

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)

Image

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

✅️ (remove system-ui)

Image

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/
https://github.com/w3c/csswg-drafts/issues/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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.