Drop system-ui from the default body font stack - #42780
Merged
Merged
Conversation
system-ui resolves to the user interface font of the locale, not to a neutral font. On Japanese Windows it becomes Yu Gothic UI, which draws bold Greek and Simplified Chinese glyphs incorrectly, and which is too condensed for long text. The keyword is made for application UI, not for articles. --body-font-family now uses the full v5 native font stack without system-ui. Tailwind, Starlight, and VitePress made the same change. Also point the datepicker and the CSS variables example at --body-font-family. Both referenced --font-sans-serif, which no v6 file defines. Remove the semicolon inside the --font-mono string, which made the build print a duplicate semicolon. Fixes #42703
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
--body-font-familyvalue ofsystem-uiwith the full native font stack, minussystem-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serifplus the four emoji fonts.system-uiresolves to the user interface font of the locale, not to a neutral font. On Japanese Windows it becomes Yu Gothic UI, which draws bold Greek (Ω as и) and Simplified Chinese glyphs incorrectly, and which is too condensed for body text. The CSS Fonts 4 draft says the keyword is for application UI, not for articles.Noto Sansahead ofArial. Starlight's Linux tests showed that fontconfig aliasesArialtoLiberation Sansand hijacks the match otherwise.-apple-systemandBlinkMacSystemFont. Chromium ignores-apple-system, and WebKit and Gecko ignoreBlinkMacSystemFont. Do not addui-sans-serif: only Safari reads it, and a future mapping could bring the same problem back.root-body-variablesscss-docs marker, which had no end marker, and use it in the Reboot docs. The "Native font stack" section showed the removed v5$font-family-sans-serifvariable.scss/_datepicker.scssand the CSS variables example at--body-font-family. Both used--font-sans-serif, which no v6 file defines.--font-monostring, which made the build print--bs-font-mono: ...monospace;;.Fixes #42703