Font Rendering Differences: Firefox vs. IE vs. Safari
You can get pretty specific when declaring how you want text to look with CSS:
p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}And that’s not even all of it… But still, even if you get that specific, there are drastic differences from browser to browser on how the actual rendered text looks. The important lesson here is that you no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.
Here are some screenshots of the exact same page in several browsers:
Mac Firefox 2:
Mac Safari 2: (a little blurrier)
Mac Opera 9:
Mac IE 5:
UPDATE: The last four images in this post are mysteriously lost forever. The most important one was the final one where you could see, when all laid on top of each other, they were all slightly different.
PC IE 6:
PC Opera:
PC Firefox:
The differences seem pretty subtle, but look what happens when these screenshots are placed right on top of each other with some opacity applied in Photoshop:
In fact, these difference are pretty subtle with a single line of text, but you can see how when compounded, they could add up to a pretty significant difference. Most importantly, don’t count on text for specific layout positioning, as you can see by the images on either of this line, they will vary in position from browser to browser.
See the page these screen captures were made from.
Loading ...
1
Yeah, this is so damn annoying… especially when you have multiline text in width/height specific div… Total breakup on Safari because of that font rendering…
Well most of developers do know that but client usually just say “Well this doesnt look the same to me…”
So instead making mess with font rendering, they should think of supporting css in fully as w3c propposed, imho…
Comment by Boko — September 25, 2007 @ 2:53 pm
2
This is very annoying. The differences between Firefox and IE6 are sometimes even bigger than what you show on this page. Unfortunately the last 4 images in your article seem to be lost.
Comment by Peter — February 22, 2008 @ 3:13 am
3
Looks like the last four images are still missing from the article.
Comment by Ian — May 5, 2008 @ 11:52 am