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

Question

Design

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

---

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; } 

---

Problem

By looking at the above patterns of the coded pattern, you can see how the alignment seems to throw out. Upon further viewing, the text is displayed outside the element on mac.

Window

Mac

---

Note

I embed fonts through the Google Web Fonts stylesheet.

---

Verified

I tried the following:

• Set row height for each item.
• Set the font values ​​for each element.
• Set heights for each item.
• The combination of height / top layer on each element.
• Percentages used / em / px to fill.

It seems that no matter what I try, the content will never be centered perfectly compared to the Mac and PC.

---

My question (s)

Is it possible to achieve what I'm trying to do in a simplified way?

Should I abandon the route display:table-cell; and set specific heights / paddings for each item and child? I will still encounter problems with filling / spacing between the two OSs.

What should I classify this problem? Line height? Cell table? OPERATING SYSTEMS? etc...

Thanks in advance!

Answer 1

If it is resolved using a different font (Arial), the problem is with the font, not with CSS. As you can see, font rendering differs between browsers.

One possible solution would be to download the Cutive font (I see that it has a SIL license) and then run it through the Font Squirrel font generator. In Expert mode, there is the option "Correct vertical indicators", which may be what you are looking for.

Answer 2

My solution to this (very annoying problem):

• Set all elements to float: left;

• Set explicit row heights;

Enjoy the victory over cross-browser / platform css ridicule.

Answer 3

I ran into this problem with a special font that was created for the client’s brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering is to adjust the values ​​in Element-> Font Info-> OS / 2-> Metrics.

Win Ascent / Descent values ​​seem to work differently with 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 (note the positive value)

It seems you need to match the values, except in my case I needed to invert the Win Descent value to positive.

I have very limited knowledge of fonts, but this fixed my problem. I created the font as TTF and then ran it through a web font generator. Fonts are now displayed identically on Mac / Windows 7 / Android / iOS.

Hope this helps someone.

Answer 4

Part of the problem may be how Windows / Mac OSX displays fonts. In particular, those represented via @ font-face. Have you tried disabling what font formats are used?

Answer 5

I witnessed the same problem with a special font (Trade Gothic) served by FastFonts.

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

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

My styles can then override the line height specific to non-windows devices.

Answer 6

Since you told Jordan Brown in your comment that using Arial makes alignment perfect, this is a font issue. Probably the one who created your font did not set the ascension value.

If you have TTF, upload it to FontSquirrel , select the Expert option, and then save all the default settings. The one that fixes it, I believe, is "Fix Vertical Metrics". but I am having problems changing the default values, so I recommend keeping them as they are.

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

Answer 7

I also ran into this problem. Luke's answer helped me. I had to configure fonts using FontForge using the following settings:

Clear the checkboxes for the Offset checkboxes, and also select the Really use Typo metrics checkbox. I had most problems with Firefox and IE. A game with the value "Win Descent" fixed it for these two browsers.

Answer 8

The Mac correctly displays lengths below the baseline as related to line height. It looks like OS X is counting from bottom to top, while Windows is calculating from the top.

Since 1em is the capital width M of the font used, it is usually less than the total font height.

Have you tried to set the line height as well as the element height? This usually helps to solve these problems.

Answer 9

This is caused by the history of the font format and the Windows / Mac wars, there are different ways to calculate the line height, and if they are not synchronized in the font that you use, on some systems this will not be so.

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

See http://www.webfonts.info/node/330 (warning, this is a commercial, even if the technical information is correct)

It is better that your design does not depend on the exact value here