Improve font stack on Windows (#1573)

* Use `Segoe UI Variable Text` * Add `Yu Gothic` * Create dirty-bikes-play.md * Lint * Use `Meiryo` instead of `Yu Gothic` * Add note about Meiryo * Update .changeset/dirty-bikes-play.md Co-authored-by: Jon Rohan <[email protected]> * Update .changeset/dirty-bikes-play.md Co-authored-by: Jon Rohan <[email protected]> Co-authored-by: Jon Rohan <[email protected]>
primer · Sep 7, 2021 · 386dfa0 · 386dfa0
1 parent 856ea7e
commit 386dfa0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/.changeset/dirty-bikes-play.md b/.changeset/dirty-bikes-play.md
@@ -0,0 +1,11 @@
+---
+"@primer/css": minor
+---
+
+Improve the font stack on Windows
+
+- `Segoe UI Variable` -> `Segoe UI Variable Text`.
+    - "Segoe UI Variable Text" seems to be the better option for a lot of text (markdown). In the future we might can consider having a UI and a "text" font stack.
+- Add `Meiryo` before `system-ui`.
+    - This should have the effect that the browser will use `Meiryo` instead of `Yu Gothic UI` and should improve font rendering, especially for Japanese.
+    - Note: In an earlier version, `Yu Gothic` was used. But with great [feedback](https://twitter.com/448jp/status/1435087523185758212) from @448jp and @hiloki https://github.com/primer/css/pull/1573#issuecomment-913973890 it seems `Meiryo` is the better default.
diff --git a/src/support/variables/typography.scss b/src/support/variables/typography.scss
@@ -32,29 +32,28 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 
 // Font stacks
-// stylelint-disable no-eol-whitespace
 $body-font:
   // Apple OSs
   -apple-system,
   BlinkMacSystemFont,
-  
+
   // Windows
   // Note this should be prioritized over `system-ui` to avoid legacy fonts.
   // See https://infinnie.github.io/blog/2017/systemui.html
-  "Segoe UI Variable",
+  "Segoe UI Variable Text",
   "Segoe UI",
-
+  "Meiryo", // Improves font rendering for Japanese, see https://github.com/primer/css/pull/1573.
+
   // Linux-friendly system-level fonts + fallbacks
   system-ui,
   ui-sans-serif,
   Helvetica,
   Arial,
   sans-serif,
-  
+
   // Emojis
   "Apple Color Emoji",
   "Segoe UI Emoji" !default;
-// stylelint-enable no-eol-whitespace
 
 // Monospace font stack
 // Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome