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

For those who can't use Font Squirrel, I can confirm that this problem could be fixed in Font Forge for the font I was working with. Based on the answer provided by Luke, here are the steps I followed (no new information here, just providing easy-to-follow instructions):

1) Install FontForge (free) Download from: https://fontforge.github.io/

2) Open the problematic font in FontForge

3) Choose Element > Font Info

4) On the left panel, click OS/2, then click the Metrics tab

5) Change Win Ascent to the same number as HHead Ascent, and Win Descent to the POSITIVE value of HHead Descent (i.e., remove minus sign), then click OK. (If those numbers don't address the problem, try adjusting them until you find numbers that fix the issue for your specific font.)

6) Click File > Generate Fonts. Choose the font type for your font. If the font is an .otf font, choose OpenType (CFF). Uncheck "Validate Before Saving". Set a name for your new font file. Click Generate.

Thanks to everyone who contributed answers to this question!

Answer 2

My solution to this (very annoying problem):

• Set all elements to float:left;

• Set explicit line-heights;

Enjoy a victory over cross-browser/platform css ridiculousness.

Answer 3

I came across this problem with a custom font that had been created for a client's brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering was to adjust the values in Element->Font Info->OS/2->Metrics.

Win Ascent/Descent values appear to work differently to the other values. I had the following values:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

I changed the Win Ascent and Descent values to:

Win Ascent: 750

Win Descent: 250 (notice the positive value)

It appears you need to match the values except in my case I needed to invert the value of Win Descent to a positive one.

I have very limited knowledge about fonts but this did fix my problem. I generated the font as TTF and then ran it through a web font generator. The fonts now render identically on Mac/Windows 7/Android/iOS.

Hope this helps someone.

Answer 4

If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.

One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In "Expert" mode there is an option to "Fix Vertical Metrics" which might be what you are looking for.

Answer 5

The Mac correctly displays the lengths below the baseline as belonging to line height. It seems that OS X counts bottom up whereas Windows calculates from the Top.

Since 1em is the width of the capital M of the used font it is usually smaller than the font's overall height.

Have you tried setting the line-height to be the same as the element height? This usually helps solve these kind of problems.