CODEWITHSUNDEEP
htmlmacosfont-facecss
Macejkou
Macejkou

Reputation: 686

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

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

Upvotes: 8

Views: 9318

Answers (6)

Kuzgun
Kuzgun

Reputation: 4737

Operating systems may render fonts different ways. One can start from bottom and other can start from top as their algorithm different. If the problem was CSS, it wouldn't be resolved by another type of font.

I found another question similiar to your one, you can check if it works for your situation: Mac vs. Windows Browser Font Height Rendering Issue

Upvotes: 0

André Cadete
André Cadete

Reputation: 13

From my experience for multi browser and multi platform websites you should really drop the pixels in fonts and start using ems.

Here's a useful convertion table tool:

http://pxtoem.com/

Let me know if it still happens using em. Keep in mind also that different fonts have different behaviors and the default (base) size may differ too. If you want to make sure it is exactly the same size, appart from using 'em' you should also use an openType font and embbed it into your CSS, having exactly the same font and size in any screen or browser.

Upvotes: 0

MarmiK
MarmiK

Reputation: 5785

Perhaps 'vertical-align:' may help,

please check this fiddle

this will explain the difference, I think every browser have different default value,

here I have created 4 different span tag to show the top, middle, bottom, and default(unassigned) value of the vertical align value,

Please change values if that helps,

as you are using images in the button, please verify the image are set with 0 0 i.e background:url(../img/header-login.png) no-repeat 0 0;

this will render the image from the 0 left and 0 top that will help you idnetify if and image is not properly generated..

Please reply if problem not solved..

Upvotes: 0

Robin Ambachtsheer
Robin Ambachtsheer

Reputation: 11

The problem most probably lies in the used font. Each font has its own metrics and when not optimized properly they can differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.

You could try to alter the font yourself using a tool like http://fontforge.org/. This isn't easy though and takes some trial and error to get it right. It may also violate the license of the font you're using.

My advice: choose a font that is better optimized for use on the web. Take any font from Typekit or the like and i bet you get more consistent results.

Upvotes: 0

Row Rocka
Row Rocka

Reputation: 41

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.

Upvotes: 1

ChrisLTD
ChrisLTD

Reputation: 433

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.

Upvotes: 1

Related Questions