Why does IE render Arial so differently?

Associate
Joined
18 Sep 2007
Posts
572
IEandChrome.png


The top half is how the page titles look in IE 9.

The bottom half is Chrome.

I can understand a slight difference between browsers but how come IE seems to increase the font size all by itself and Double Bold it?!

here's the CSS:

font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
 
That's a big enough difference to make me suspect that IE is referencing a different font file for Arial on that particular computer. It looks like it might be an Extra Bold or even a Black variant.

As a graphic/web designer, I've got a range of Helvetica Neue font files on my PC, of all weights and foundries. When a website specifies "Helvetica Neue", I've found that most browsers on my computer reference a normal-weighted font file, while Firefox - for some reason, maybe file name - uses a light-weighted variant, despite the CSS being identical. It's a patently different font weight, despite the CSS declaring one font-weight; it's not something like sub-pixel rendering differences.

So check it out on other computers, see if the difference is as big. Not that there's much you can do about it, other than perhaps explicitly specify a particular Arial font file.
 
Last edited:
Back
Top Bottom