Questioning if Nimbus Sans is really a good choice for a font stack

[SethFalco]

While working on svgo.dev, I'd found that Nimbus Sans renders inconsistently between browsers due to vertical metrics.

I've actually covered this in two Stack Overflow questions:

• https://stackoverflow.com/questions/29366908/wrong-vertical-align-of-text-in-google-chrome-browser/78502076#78502076
• https://stackoverflow.com/questions/21580059/text-is-not-vertically-centered/78502136#78502136

I'm not a typeface expert, but from what I can tell, it is related to the ascent metrics of the font, and how browsers behave according to it. I'm not sure if this is merely a difference in behavior, or a bug in one of the browsers. If you have a take on this, I'd appreciate your thoughts! ^-^'

Based on this, I'd actually shifted away from Nimbus Sans, and use Liberation Sans instead, which doesn't have the issue and still looks great.

I'm also wondering, (even better if other Linux users could confirm if they experience the same behavior), do you think it'd make sense to replace Nimbus Sans with Liberation Sans in the font stacks?

Bootstrap itself actually uses Liberation Sans too, so it doesn't seem like an unreasonable choice:

• https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack

Here is the code to reproduce the example in the screenshots attached:

<div id="wrapper">
  <div><span>Text</span></div>
</div>

#wrapper {
  height: 128px;
  display: flex;
  margin: .5em;

  /* monospace generic font family so it's obvious if the main font isn't used */
  font-family: "Nimbus Sans", monospace;
}

div div {
  padding: .5em;
  display: flex;
  align-items: center;
  background-color: #f55;
}

span {
  font-size: 4rem;
  border: 1px solid;
}

Firefox

Observe that on Firefox, it's perfectly centered.

Chromium

Observe that on Chromium, the text takes up less space and each character is higher. It is no longer centered within the red background.

However, if I add the following CSS, it fixes the issue:

/* Fix inconsistent ascent across browsers. */
@font-face {
  font-family: "Nimbus Sans";
  src: local("Nimbus Sans");
  ascent-override: 100%;
}

---

PS: Just want to note that this is a pretty awesome resource, so thank you for making it. ❤️

I wrote an article about fonts a while back, and actually replaced the section where I propose font stacks with a link to your website instead.

• https://www.freecodecamp.org/news/things-to-consider-when-picking-fonts/#cross-platform-font-stacks