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:

---

The Coded Design

Windows: Chrome 20 / FF 14 / IE 9

Mac (Lion / Mt. Lion): Chrome / FF

---

The Code

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    } 

---

The Issue

Looking at the above images of the coded design you can see how the appears to throw off the alignment. Upon further viewing, the text is being rendered outside of the element on the mac.

Windows

Mac

---

Note

I am embedding the fonts through a Google Web Fonts stylesheet.

---

Tested

I have tried the following:

• Set line-heights on every element.
• Set font-weights on every element.
• Set heights on every element.
• A combination of height/padding-top on every element.
• Used percentages/em/px for padding.

It seems that no matter what I try, the content will never center align perfectly across mac and pc.

---

My Question(s)

It is possible to achieve what I'm trying to do in a simplistic manner?

Should I forgo the display:table-cell; route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS's.

What should I categorize this issue under? Line-height? Table-cells? OS? etc...

Thanks in advance!

Vestibule

Are you using a CSS reset? And if so, what are you using? – Sedimentology

Yes, I am using a CSS reset and it's custom, but it's not like normalize css. – Vestibule

Cant believe there's not more on this issue online – Hersey

I read somewhere the vertical spacing can be modified with FontForge, if someone knows how to fix this with FontForge would be a golden answer. – Sarcocarp

For a FontForge answer see my answer below – Eudoxia

I think line-height: initial; will solve your problem. :) – Calcic

Answer 1

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.

Latreshia

This seems to be the only recommendation around to fix this, I've tested this with 4 fonts, they didn't get fixed. So I believe this might work few times. – Sarcocarp

thanks for "Font Squirrel font-face generator" tip - that did it! – Selfdelusion

Thank you! Fixing Vertical Metrics just saved me hours of banging my head against a wall. – Europeanize

In my experience (having worked as a print designer for a while) free fonts tend to lack attention to detail like this. Free fonts tend to be more close to just a set of alpha numeric characters, whereas a paid font will have a number of additional features such as kerning, ligatures, etc. It's important to examine any free font before assuming it's going to be bulletproof in production. – Menon

Sadly, Font Squirrel said my font was blacklisted (I have no idea why seeing as I bought it legally) so I used the 'fix vertical metrics' option on transfonter.org instead. Worked a treat! Cheers – Skeleton

I appreciate this answer (esp because so many people already upvoted it, which was encouraging to see), but I found that it was easier to download FontForge for free and adjust my woff font til it worked: https://mcmap.net/q/264283/-font-rendering-line-height-issue-on-mac-pc-outside-of-element – Wilder

Answer 2

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

Milling

Awesome, you saved my day – Procambium

That is a great tool, I must say – Oleta

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.

Eudoxia

Thanks! This worked for me when trying to use Gill Sans familly font in browsers running on Windows. – Catina

Answer 4

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!

Nariko

This one worked perfectly for me having the issue with MacOS rendering the font different than Win-based systems, whereas line-height settings only change the outer height of the fonts letters. Thanks a lot! – Kootenay

One difference for me though, I am addressing this issue for a Chinese font and two steps has to be done differently: In (3) instead of Element > Font Info, go to CID > CID Font Info; and in (6) choose OpenType CID format. All other steps are the same – Crossways

Answer 5

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.

Aldaaldan

I really had to add explicit line-height for my base elements (e.g. button { line-height: 16px; }) in my global CSS to have the same line-heights for MacOS/Windows even though the same font-family has been used. Why is this the case? Issue happened with Open Sans. – Deep

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.

Cotopaxi

Answer 7

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

Literalism

I am using Google Web Fonts. If I use Arial, the font is vertically-aligned perfectly. So yes, it is a font-rendering issue. Though, I am not sure if it's a @font-face based issue. I haven't yet tested to see what the render output would look like if the user has the fonts installed on their machine. – Vestibule

Answer 8

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.

Systemic

Answer 9

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).

Cheney

Answer 10

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

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

Ursala

Answer 11

I have tested the problem with:

1. Windows desktop, Firefox
2. iphone, Safari
3. iphone, Firefox

Text elevation: (2) = (3) ≠ 1.

So it looks like, the problem is between the OS, and not between the browsers.

Limonene

Answer 12

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.

Roturier

Yes, I've tried setting line-heights based off the container height, font-size, padding sizes, etc. It's because Mac renders the line-height from the bottom up that I am having this issue. – Vestibule

Did you Try different vertical aligns? Maybe baseline or top specifically help. – Roturier