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

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.