Broken vertical font alignment on Fedora

[nikwen]

Describe the bug
Text is not properly vertically centered when using Firefox on Fedora 33.

To Reproduce
Steps to reproduce the behavior:

1. Get a working installation of Fedora 33 (VM, live USB stick, etc.)
2. In Firefox, open https://github.com/mdo
3. See how the font is not aligned properly as marked in the screenshot below

Expected behavior
The text marked in the screenshot below should be properly vertically centered.

Screenshots

Desktop (please complete the following information):

• OS: Fedora 33
• Browser: Firefox
• Version: 84.0

Additional context
Fedora does not ship the Helvetica and Arial fonts used by Primer.

Firefox on Fedora uses Nimbus Sans as a replacement for Helvetica:

If we remove Helvetica from the font declaration, the system uses Liberation Sans, which looks okay-ish:

[nikwen]

Related issues, as found by @with-heart:

• https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/1874842
• https://bugzilla.mozilla.org/show_bug.cgi?id=553580

[simurai]

Primer CSS currently uses this font-stack:

css/src/support/variables/typography.scss

Line 35 in 40d508d

$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;

Based on this comment it looks like Firefox on Fedora 33 does the following:

• -apple-system skip
• BlinkMacSystemFont skip
• Segoe UI skip
• Helvetica 👉 Nimbus Sans
• Arial 👉 Liberation Sans
• sans-serif 👉 Bitstream Vera Sans
• Apple Color Emoji 👉 Noto Color Emoji
• Segoe UI Emoji 👉 Noto Color Emoji

If we remove Helvetica from the font declaration, the system uses Liberation Sans, which looks okay-ish:

Hmm.. we might could also swap the order of Helvetica and Arial so that it would pick Arial/Liberation Sans before Helvetica/Nimbus Sans. Although it's hard to say if that has other negative side effects. There might be other Linux distros that look worse when Arial comes first? 🤔

Another option could be to not try to pick the right font for Linux and just let the OS/browser decide by removing both Helvetica and Arial. It then should fall back all the way to sans-serif and I assume Firefox on Fedora 33 would use Bitstream Vera Sans?

$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;

@nikwen How would sans-serif/Bitstream Vera Sans look? Is it better than Arial/Liberation Sans?

[vdepizzol]

@simurai I'd replace Helvetica with "Helvetica Neue", and try to be a little more specific with the available OS options before fallbacking to Arial/Liberation Sans. Reading a little bit through some of the options Linux users utilize got me to this list:

$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Inter", "Noto Sans", Cantarell, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default; 

[simurai]

I'd replace Helvetica with "Helvetica Neue"

Yeah, we could give that a try. Although I think the problem of this issue is that if Helvetica is added to the font-stack but not installed, on Fedora it uses an alternative font instead of just skip it and try to use the next font in the stack. In this case the alternative to Helvetica used is Nimbus Sans that has the alignment issues. Hard to say without testing if any of the "Helvetica Neue", "Inter", "Noto Sans", Cantarell, Roboto, Arial, fonts would have alternatives that are also buggy? Also no clue if this is only a problem on Fedora or also other Linux distros? 🤔

@arzg suggested in #1219 to already add ui-monospace. It is part of the CSS Fonts Module Level 4 Draft and already supported in Safari. If so, we could also consider adding the ui-sans-serif? And maybe also give system-ui another try while keeping an eye on this.

So the most "hands-off" font-stack that only tries to use "system" fonts might be:

$body-font:
  system-ui, // use default OS font
  ui-sans-serif,  // use default sans-serif OS font
  sans-serif; // use fallback sans-serif font

But for now I guess we'd still have to add a fallback of -apple-system for Firefox, noted in that article and also Segoe UI. So it would be (without emoji fonts):

$body-font: -apple-system, Segoe UI, system-ui, ui-sans-serif, sans-serif;

Anyways, might be worth doing:

1. Some Browserstack testing
2. Add the changes behind a feature flag, so it can be tested on a sub-set of users and quickly turned off again.

[lunacookies]

Why prioritise system-ui over ui-sans-serif? If the system is using, say, a serif font as the system font, would Primer really want to use that? If yes, then why use ui-sans-serif as a fallback? It has (and will likely always have) less support than system-ui, so it will never happen that system-ui isn’t defined but ui-sans-serif is. If it isn’t ok for Primer to use a serif font, then shouldn’t the font stack be something like ui-sans-serif, -apple-system, etc?

[simurai]

Why prioritise system-ui over ui-sans-serif? If the system is using, say, a serif font as the system font, would Primer really want to use that?

AFAIK, Primer tries to stay as close to the default system font as possible. So I would say yes.

It has (and will likely always have) less support than system-ui, so it will never happen that system-ui isn’t defined but ui-sans-serif is.

Yeah, if system-ui will have the same or better browser support, we could drop ui-sans-serif again. 👍

[nikwen]

@simurai, @vdepizzol and @arzg, thank you so much for looking into this issue. ❤️

Sorry for being late. I'm trying to answer all questions now.

---

From @simurai:

$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;

@nikwen How would sans-serif/Bitstream Vera Sans look? Is it better than Arial/Liberation Sans?

To test this, I set the following CSS on the <body> tag using the dev tools:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

Note that I removed the !default which Firefox didn't know what to do with.

In general, it looks a lot better already, but text is still not 100% centered. Have a look at buttons or the "Staff" badge, for example. The text is still 1 or 2 pixels away from being centered.

Here's a screenshot:

---

From @vdepizzol:

I'd replace Helvetica with "Helvetica Neue", and try to be a little more specific with the available OS options before fallbacking to Arial/Liberation Sans. Reading a little bit through some of the options Linux users utilize got me to this list:

$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Inter", "Noto Sans", Cantarell, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default; 

To test this, I set the following CSS on the <body> tag using the dev tools:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Inter", "Noto Sans", Cantarell, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

Note that I removed the !default which Firefox didn't know what to do with.

Here's what that looks like:

It's using the Droid Sans font now.

The Highlights section is broken and buttons and badges are sadly still a bit off.

---

From @simurai:

$body-font: -apple-system, Segoe UI, system-ui, ui-sans-serif, sans-serif;

Another suggestion, another screenshot. :)

To test this, I set the following CSS on the <body> tag using the dev tools:

font-family: -apple-system, Segoe UI, system-ui, ui-sans-serif, sans-serif;

Here's the screenshot:

It's using Cantarell Regular now.

[simurai]

@nikwen Thanks for all the testing. 🙇

Hmm.. based this test, I would say

font-family: -apple-system, Segoe UI, system-ui, ui-sans-serif, sans-serif;

that uses Cantarell Regular seems the best option? It also leaves it open for the OS/browser to pick a better "system" font in a future version.

/cc @vdepizzol any thoughts?

[nikwen]

@simurai Thanks for taking the time to look at this again!

Cantarell Regular was the best-looking font out of the options I tested. Still not pixel-perfect (look at the STAFF badge or the Twitter icon for example) but a lot better than what GitHub currently uses.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.