Font Rendering Differences: Firefox vs. IE vs. Safari

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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:
firefoxtext.png

Mac Safari 2: (a little blurrier)
safaritext.png

Mac Opera 9:
opera923.png

Mac IE 5:
macie52.png

PC IE 6 (Windows 2000):

PC IE 7:

PC IE 8:

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.

Special thanks to Erik for re-creating the images from this post after I had lost them!