From dca8e0aeccb326c2bafff1ec86a912987b224f32 Mon Sep 17 00:00:00 2001 From: Vinicius Depizzol Date: Wed, 11 Aug 2021 22:39:56 -0700 Subject: [PATCH] Improve font rendering on Linux (#1529) * Improve $body-font stack This is an attempt at fixing #1209. Further reading: - https://infinnie.github.io/blog/2017/systemui.html - https://blog.jim-nielsen.com/2020/system-fonts-on-the-web/ * pause stylelint complaints in documented stack * Create silent-geckos-do.md Co-authored-by: simurai --- .changeset/silent-geckos-do.md | 5 +++++ src/support/variables/typography.scss | 24 +++++++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 .changeset/silent-geckos-do.md diff --git a/.changeset/silent-geckos-do.md b/.changeset/silent-geckos-do.md new file mode 100644 index 0000000000..84802e99ec --- /dev/null +++ b/.changeset/silent-geckos-do.md @@ -0,0 +1,5 @@ +--- +"@primer/css": minor +--- + +Improve font rendering on Linux diff --git a/src/support/variables/typography.scss b/src/support/variables/typography.scss index cd22002895..cc97958606 100644 --- a/src/support/variables/typography.scss +++ b/src/support/variables/typography.scss @@ -32,7 +32,29 @@ $lh-condensed: 1.25 !default; $lh-default: 1.5 !default; // Font stacks -$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default; +// 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", + + // 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