One of the weirdest issues I had to solve regarding styling websites, was that one font (Kommon Grotesk) had different line heights on Linux & iOS vs. Windows.

It turns out it was about veritical metrics. For more, check this. The below image is from there too.

vertical-metrics-browsers.png Hhea metrics in Safari (left) and Firefox (right)

The position of text in the container is bound to the font’s vertical metrics. But there’s a number of such metrics and it’s up to a particular browser, or software, to determine which metrics to rely on.

Using this tool, there is an option to fix it. I tried to manually adjust in the encoding of the font, but this is simpler.