Letters and numbers a little larger and bolder cause by use system-ui as the value of font-family #6063

New Issue

GiteaMirror · 2025-11-02T06:44:04-06:00

GiteaMirror commented

2025-11-02 06:44:04 -06:00

Originally created by @Promix953 on GitHub (Sep 28, 2020).

Gitea version (or commit ref): 1.13.0+dev-690-g14e718695
Git version: 2.17.1
Operating system: Windows 10 2004
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL)
- No
- Not relevant
Log gist:

Description

system-ui has recently been provided by Chrome as the means to access what is currently used by the OS as the UI font family. on Windows 8.1/Windows 10 in Simplified Chinese, the system-ui font family evaluates to Microsoft YaHei UI, which, it turns out, not only lacks many font weights that Segoe UI has (say semibold), but has letters and numbers a little larger and bolder to match the Chinese text than what could have been designed with. That turns out to exactly be the phenomenon discussed on the top of the article.
...

Screenshots

Originally created by @Promix953 on GitHub (Sep 28, 2020). - Gitea version (or commit ref): 1.13.0+dev-690-g14e718695 - Git version: 2.17.1 - Operating system: Windows 10 2004 - Database (use `[x]`): - [ ] PostgreSQL - [ ] MySQL - [ ] MSSQL - [x] SQLite - Can you reproduce the bug at https://try.gitea.io: - [x] Yes (provide example URL) - [ ] No - [ ] Not relevant - Log gist: ## Description system-ui has recently been provided by Chrome as the means to access what is currently used by the OS as the UI font family. on Windows 8.1/Windows 10 in Simplified Chinese, the system-ui font family evaluates to Microsoft YaHei UI, which, it turns out, not only lacks many font weights that Segoe UI has (say semibold), but has letters and numbers a little larger and bolder to match the Chinese text than what could have been designed with. That turns out to exactly be the phenomenon discussed on the top of the article. ... ## Screenshots ![image](https://user-images.githubusercontent.com/22642692/94470893-de6bf180-01fa-11eb-8b20-9773ae5bd428.png) ![image](https://user-images.githubusercontent.com/22642692/94470963-f9d6fc80-01fa-11eb-8433-ab70a005ffd5.png)

GiteaMirror added the topic/ui label 2025-11-02 06:44:04 -06:00

GiteaMirror closed this issue

2025-11-02 06:44:04 -06:00

GiteaMirror commented

2025-11-02 06:44:05 -06:00

@silverwind commented on GitHub (Dec 3, 2020):

We do have a japanese-specific font stack that should take effect on a browser in ja locale and system-ui should not be in effect. Can you check the CSS rules?

@silverwind commented on GitHub (Dec 3, 2020): We do have a japanese-specific font stack that should take effect on a browser in `ja` locale and `system-ui` should not be in effect. Can you check the CSS rules?

GiteaMirror commented

2025-11-02 06:44:05 -06:00

@CL-Jeremy commented on GitHub (Feb 14, 2021):

I think Chromium is aligning the effect across locales by doing the opposite now: it actively uses a bolder font (Segoe UI Semibold) for weight 500 (Medium, currently in use on master branch of Gitea) even when my system locale, browser locale and Gitea language are all set to German.

This makes Chromium the only web renderer on Windows that renders weight 500 differently. Firefox Classic, Firefox Quantum, IE and Edge Classic never do so. I've once observed Firefox on macOS seemingly doing some kind of weight matching to some extent, that a font might render differently in different contexts, but this time there isn't any context around it.

I'm proposing a fix to address part of this issue (CJK glyphs) by overriding system-ui partially via unicode-range. So far I can't seem to find a better solution than that (bolder text is more acceptable to me than wrong regional variant of Han characters).

I'd really love to keep system-ui in the native font stack to push towards a future where this kind of issue would be better addressed. Right now another issue on my Arch Linux with GNOME DE: my system-ui is Inter UI, which is picked up correctly by GNOME Web (Epiphany) and Chromium, but Firefox is locked to Cantarell, and for fallbacks it first finds Yu Gothic UI (in Linux! I'm symlinking Windows fonts from another partition), then Microsoft YaHei, and so on and so forth.

For now, consider overriding this with userscripts (Tampermonkey and co.) : use GM_addStyle to override --fonts-proportional in selector html { }. Simply "Segoe UI", sans-serif; will do the job.

@CL-Jeremy commented on GitHub (Feb 14, 2021): I think Chromium is aligning the effect across locales by doing the opposite now: it actively uses a bolder font (Segoe UI Semibold) for weight 500 (Medium, currently in use on `master` branch of Gitea) even when my system locale, browser locale and Gitea language are all set to German. This makes Chromium the only web renderer on Windows that renders weight 500 differently. Firefox Classic, Firefox Quantum, IE and Edge Classic never do so. I've once observed Firefox on macOS seemingly doing some kind of weight matching to some extent, that a font might render differently in different contexts, but this time there isn't any context around it. I'm proposing a fix to address part of this issue (CJK glyphs) by overriding `system-ui` partially via `unicode-range`. So far I can't seem to find a better solution than that (bolder text is more acceptable to me than wrong regional variant of Han characters). I'd really love to keep `system-ui` in the native font stack to push towards a future where this kind of issue would be better addressed. Right now another issue on my Arch Linux with GNOME DE: my `system-ui` is Inter UI, which is picked up correctly by GNOME Web (Epiphany) and Chromium, but Firefox is locked to Cantarell, and for fallbacks it first finds Yu Gothic UI (in Linux! I'm symlinking Windows fonts from another partition), then Microsoft YaHei, and so on and so forth. For now, consider overriding this with userscripts (Tampermonkey and co.) : use `GM_addStyle` to override `--fonts-proportional` in selector `html { }`. Simply `"Segoe UI", sans-serif;` will do the job.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#6063