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
}

You use the term "vertical metrics", but can you explain what you mean (because vmtx are not used except for fonts that support `vert` or `vrt2` features, which your text is clearly not making use of)? It looks like you're talking about baseline-to-baseline distance, which in CSS is called `line-height`, and you can specify your own value explicitly to override whatever the font(s) are doing. It looks like you're just trying to get text-selection highlights to line up nicely, which generally isn't worth trying to perfect. Getting the text to look right, instead, is far more important. — Mike 'Pomax' Kamermans, Nov 11 '15 at 09:49
After clarifying that the font itself causes the problem and after browsing the web I came to the conclusion that the font has poor vertical metrics. But since I'm no font expert it may be something else font related. I’m not sure. I updated the Question, may be that helps to identify the cause. — Rotareti, Nov 11 '15 at 22:13
which version of android are you targeting? Because this is a classic [XY problem](http://meta.stackexchange.com/a/66378) where you actually want to just know how to vertically align text in an HTML container (for which there are actually many answers on StackOverflow, but the gist is that if you target Android 4.2 or above, the answer is ["use flexbox"](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)) — Mike 'Pomax' Kamermans, Nov 12 '15 at 10:06
I tried all common vertical alignment methods, including felxbox.. they all work well for fonts like Arial but not for Segeo Print. Look at the example Image.. any idea why Arial is rendered nicely and Segoe Print is not? CSS is identical here... — Rotareti, Nov 12 '15 at 13:58
not without a [minimally, correct, verifiable example](http://stackoverflow.com/help/mcve). Can you show the html and css for a page that generates "just this problem" for us? — Mike 'Pomax' Kamermans, Nov 12 '15 at 14:14
I would like to share the fiddle example with you. But the font is not free, so I can't share it. Let me see if I can find a free font with the same issue and I create a fiddle. — Rotareti, Nov 12 '15 at 15:18

score 7 · Answer 1 · answered Sep 02 '21 at 18:59

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:

wow - great find @christine-urban - I also have purchased Helverica Neue and had this problem on buttons - and this descent-override directive fixed it - magic :) — Kresimir Pendic, Jun 02 '22 at 13:17

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

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...

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

2 Answers2

Linked