Font: Weak vertical metrics cause inconsistent rendering of strings in browsers. Decision?

Question

After hours of debugging and driving around, I found it impossible to vertically align the font with poor vertical metrics in browsers. If the font has poor vertical performance, it may be too far removed or too far down and looks awful, especially inside the buttons. It is not possible to solve this problem only with css.

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

This is the result that I get. The top one has poor performance, one of which has the right: (both have a fixed row height)

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

Update:

To make the problem clearer, this is the situation that I am currently facing:

I am trying to vertically align the button text to the middle (see the figure below). On the left you see how it is displayed in Chrome on Android, on the right you see how it is displayed in Chrome on Windows. Arial and the most common fonts are beautifully centered, Segoe Print does not ..

I tried different approaches in CSS for alignment and nobody worked sequentially. I also tried it inside the violin with the same result, which I cannot show, since the font is not free. This is a font-specific issue, and the only solution seems to fix the font itself.

This is the CSS for the button (the values ​​are fictitious):

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

Answer 1

It took me a while, but I only found out that my font distributor allows me to customize the fonts before downloading. I was able to add "String Height Settings" to the font. These are the available options:

Line Height Adjustment

• Best (Use the best way to normalize the line height for this font)
• 120% (Override the line height as 120% of the point size)
• Automatically (distributes OS / 2.Typo values ​​between gap, descender and line break)
• Boundary cell (match the bounding box of glyphs, line break will always be 0)
• Native (use line height as defined in the font, results may vary between browsers)

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

Whenever I encounter this problem again, I either use the fontsquirrel generator for free fonts or purchase a font from a distributor that offers the ability to adjust the line height right out of the box ...