Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

Question

After hours of debugging and pottering around I found out that it is impossible to vertically align a font with poor vertical metrics consistently across browsers. If a font has poor vertical metrics it may either be rendered too far up or too far down and looks horrible especially inside buttons. There is no way to solve this problem with css alone.

You can check the vertical metrics of a font with the tests on this website: http://levien.com/webfonts/vmtx/ (Just download a test and replace the font.)

This is the result I get. The upper one has poor metrics the one below has them right: (both have a fixed line-height)

Fontsquirrel offers a fix for poor vertical metrics in its generator in expert mode. Unfortunately the font I have to use belongs to Microsoft (SegoePrint) and is blacklisted on Fontsquirrel for the generator.

Update:

To make the problem clearer.. this is the situation I'm facing right now:

I'm trying to vertically align the text of the button to the middle (see image below). On the left you see how it is rendered in Chrome on Android, on the right you see how it's rendered in Chrome on Windows. Arial and most common fonts are nicely centered, Segoe Print is not..

I tried different approaches in CSS for the alignment and none worked consistently.. I also tried it inside a fiddle with the same result, which I can't show since the font is non-free. This is a font specific problem and the only solution seems to be fixing the font itself.

This is the CSS for the button (values are fictional):

div.parent {
    height:40px
}
h3 {
    line-height: 40px;
    font-size: 14px
}

Answer 1

I use a licensed version of Helevetica Neue, and I also noticed a discrepancy in buttons between its regular and bold font. I was able to resolve this by adding descent-override: 0%; to my @font-face declaration for the bold version. Not supported in every browser as of writing this (no IE 11 or Safari) but Macs usually have Helvetica Neue installed locally so I check for a local version first, and then we are left with just IE 11 unsupported (as usual).

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override

There is also ascent-override to play around with which may be better for certain fonts.

// index.scss

/* CDN version - we need to add descent-override to the CDN version only */
@font-face {
  font-family: "font-primary";
  font-style: normal;
  font-weight: 700;
  src:
    url("<MY-CDN-URL>.woff2")
      format("woff2"),
    url("<MY-CDN-URL>.woff")
      format("woff");
  font-display: swap;
  descent-override: 0%;
}
/* Local version */
@font-face {
  font-family: "font-primary-local";
  font-style: normal;
  font-weight: 700;
  src: local("Helvetica Neue Bold");
  font-display: swap;
}


$font-primary: "font-primary-local", "font-primary", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Before:

After:

Answer 2

It took me a while, but I just found out that my font distributor lets me configure fonts before download. I was able to add "Line Height Adjustments" to the font. These were the available options:

Line Height Adjustments

• Best (Use the best method to normalize the line height for this font)
• 120% (Redefine the line height as 120% of the point size)
• Automatic (Distributes OS/2.Typo values across ascender, descender and line gap)
• Bounding Box (Match the bounding box of the glyphs, line gap will always be 0)
• Native (Use the line height as defined in the font, results may differ between browsers)

The "Bounding Box" option did the trick. Now "Segoe Print" is nicely adjusted.

Whenever I face this problem again I will either use the fontsquirrel generator for free fonts or purchase a font from a distributor that offers an option to adjust the line heights right out of the box...