I'm using a web font (@font-face) taken from google's web font gallery. The text should be vertically centered as I have an equal padding on top and bottom. BUT it doesn't look properly on linux/mac. I've tested it using both Chrome and Firefox: http://img156.imageshack.us/img156/7114/fontissue.jpg as you can see, Ubuntu does not include some of the pixels on top as part of the text and therefore, when adding 5px of padding to top and bottom, it doesn't look centered.
Have you seen this before? It happens for most of the custom fonts. This is very annoying and has made me go back to regular fonts a couple of times.
I'd like to know, why this happens; and if there's any solution for it.
Change the word from 'Test' to 'Test-jump' (note the descenders) and suddenly Mac and Linux have it right and Windows has extra padding on the top. Its just the difference in the way the line box is calculated.
I've tested on Mac, Windows 7 and XP, in FF, Chrome, Safari, and IE 7 and 8. I get consistant results with multiple fonts. When looking at the entire font (the top of the capital T to the bottom of the j ) Mac (all browsers) is showing equal spacing above and below, while on Windows shows more spacing above the 'T' than below the 'j'. You have different results? I agree that the space below the baseline is more than above the font, but you should factor in the descenders.
as you can see, Ubuntu does not include some of the pixels on top as part of the text and therefore, when adding 5px of padding to top and bottom, it doesn't look centered.
Ah, okay - I don't have linux here. But if you compare Windows to Mac (with the descenders) it looks like Windows is off (greater space on top). With your linux/windows comparison, I can see why you're saying Windows is right...
At any rate, I don't think there's much you can do to change things. The same fonts render differently on different platforms - and that's true in other applications as well, not just browsers. Filemaker has notoriously had rendering differences between platforms.
Some things you might try: Set a font-size for the h3 - right now it's being calculated as a percentage of the body default and resulting a fractional pixel, so browsers may handle that different. Another to try is setting the line-height, although admittedly I don't think it will change anything. And lastly, here's a trick that might gain you something.
h3:before { content: ""; font-size: 20px; }
This will change the line-box calculated height (using the greater of the two inline-box heights).
http://jsbin.com/ateji4/3/edit
I'm using a web font (@font-face) taken from google's web font gallery. The text should be vertically centered as I have an equal padding on top and bottom. BUT it doesn't look properly on linux/mac. I've tested it using both Chrome and Firefox:
http://img156.imageshack.us/img156/7114/fontissue.jpg
as you can see, Ubuntu does not include some of the pixels on top as part of the text and therefore, when adding 5px of padding to top and bottom, it doesn't look centered.
Have you seen this before? It happens for most of the custom fonts. This is very annoying and has made me go back to regular fonts a couple of times.
I'd like to know, why this happens; and if there's any solution for it.
This can happen with 'regular' fonts as well...
Here's what I've got:
http://img156.imageshack.us/img156/7114/fontissue.jpg
as you can see, Ubuntu does not include some of the pixels on top as part of the text and therefore, when adding 5px of padding to top and bottom, it doesn't look centered.
Hopefully it's just me.
At any rate, I don't think there's much you can do to change things. The same fonts render differently on different platforms - and that's true in other applications as well, not just browsers. Filemaker has notoriously had rendering differences between platforms.
Some things you might try: Set a font-size for the h3 - right now it's being calculated as a percentage of the body default and resulting a fractional pixel, so browsers may handle that different. Another to try is setting the line-height, although admittedly I don't think it will change anything. And lastly, here's a trick that might gain you something.This will change the line-box calculated height (using the greater of the two inline-box heights).
var os = navigator.platform.toLowerCase();
if( os.indexOf('mac') != -1){
$(parentDivOfAnnoyingSpan).css({'line-height':'22px'});
}