Font Rendering / Line-Height Issue on Mac/PC (outside of element)

Question

The Design

The info widgets content should be vertically aligned in the middle as such:

Answer 1

Part of the problem may be in the way Windows/Mac OSX renders fonts. Specifically those that are brought in via @font-face. Have you tried switching out which font formats are being used?

Answer 2

I witnessed the same issue, with a custom font (Trade Gothic) served by FastFonts.

Windows did what it should have. But all other browsers on Linux based machines, Mac, iOS, Android suffered the problem.

My only solution was to match on the user agent, and namespace the body tag with .not-win

Then my styles could override the line-height specific to non-windows devices.

Answer 3

I think using this website https://transfonter.org/ will save your time instead of downloading FontForg program, upload your fonts and toggle "Fix vertical metrics" then click convert, it will give you a downloadable zip folder with all types you selected

Answer 4

It's caused by font format history and Windows/Mac wars, there are different ways to compute line height and if they are not synced in the font you use things will go wrong on some systems

You need to fix your font (if the licensing allows it) or switch to one without this problem

See http://www.webfonts.info/node/330 (warning, this is an infomercial even if the tech info is true)

Better, not to make your design depend on an exact value here

Answer 5

Since you said in your comment to Jordan Brown that using Arial makes the alignment perfect, this is a font issue. It is likely that whoever created your font did not set the Ascent value properly.

If you have the TTF, upload it to FontSquirrel, select the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics." but I had issues when changing the defaults so I recommend keeping them as-is.

Now the font line height renders the same on MAC and PC (it worked for me).

Answer 6

I also came across this issue. Luke's answer helped me. I had to adjust the fonts with FontForge using this settings:

Uncheck all "Is offset" checkboxes and also the "Really use Typo metrics" checkbox. I had most problems with Firefox and IE. Playing around with the value of "Win Descent" fixed it for those two browsers.