Baseline inconsistency in fonts between Firefox/Mac and Safari/Mac or Firefox/Win

Question

Noticing a strange rendering anomaly in Firefox 3.5/3.6 (haven't tried other versions) in Mac OS X. Looking around, I've seen similar issues reported and addressed, but most were surrounding CSS line-height being set to normal as opposed to a unit measurement.

Take the following code:

<style>
    h1{
        background-color:#f00;
        font-size:40px;
        line-height:40px;
    }
</style>

<h1>This is a test</h1>

This spits out the following in Firefox 3.6/Mac, Safari 4/Mac, and Firefox 3.6/Win respectively (pardon the color calibration differences):

http://jazzcrazed.com/temp/ffmac-safarimac-ffwin.png

In Firefox for Mac, the text baseline sits higher than in the other browsers -- including Firefox for Windows. Has anyone confronted this issue before? It's only Firefox for Mac that is the odd browser out. I also noticed that this is font-based; changing to Arial, for instance, renders consistently everywhere. Unfortunately, changing font is not an option for me. And I'd like to avoid creating images of typography if I can.

I'm grateful for any insight! Thanks for taking a look!

Answer 1

You've presented a very compelling example of the slight differences between the font rendering on on Firefox for Mac versus other browsers. I'd say FF on Mac is getting it wrong here as even setting vertical-align: baseline; doesn't change the result.

That said, there's absolutely no reason to to use images here to emulate any one browser's rendering. A website need not look the same in all browsers.

Answer 2

I have the same problem. Have you managed to solve it? I'm having the issue with fonts included with @font-face

Answer 3

The issue probably arises due to Mac and Safari tuned to typography far more than any other browser or operating system. It's more likely to correctly display fonts as they should be displayed. I've read about this on countless occasions over the years but, unfortunately, can't recall any of it beyond that. I'm sure someone will come along with a link that explains this further.