Why is there a @font-face difference in line-height on Windows and Mac OS X?

Question

I have been searching for an answer for this for an hour now with no luck.

I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""@font-face"" font embedding on Windows.

On the Mac however, there is a problem with this centering using "@font-face". See: http://cl.ly/QBlE/o

I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.

Example (blue box at the top):

#header .login {
    text-decoration:none;
    margin:11px 9px 0 9px;
    float:right;
    font-size:11px;
    color:#fff;
    background:url(../img/header-login.png);
    width:118px;
    height:26px;
    line-height:26px;
    padding:0 0 0 10px;
    text-transform:uppercase;
    font-family: 'Helvetica55', Sans-Serif;
}

Answer 1

Instead of using different line heights, try using the font-size-adjust property with a value of auto.

From the W3C:

In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

Answer 2

First, try setting the line-height from px to em.

If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.