Grow your CSS skills. Land your dream job.

Font Rendering Differences: Firefox vs. IE vs. Safari

Published by Chris Coyier

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!

Comments

  1. Boko
    Permalink to comment#

    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…

  2. Peter
    Permalink to comment#

    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.

  3. Looks like the last four images are still missing from the article.

  4. Ethan Sisson
    Permalink to comment#

    Holy cow. I’ve only been on Mac for a couple years, but I had forgotten how indescribably hideous text looks on windows. Why can’t Microsoft pay attention to such fundamental details as text rendering? Even the newer text rendering in Vista and IE 7/8 only manage to make the characters look blurry.

  5. Mike
    Permalink to comment#

    Safari’s font rendering is the worst IMO, all the text seems bold.

  6. Ve Watkins
    Permalink to comment#

    I’m new at developing web sites. Been working on http://www.mywcmassage.com and notice a big difference in how the text appears in FireFox vs. IE — FireFox the words seem too sharp, jagged, not smooth. Also the spacing and placement is different.

    Is this just accepted? Are there ‘hacks’ or css fixes I could use to override this effect?
    Does anyone have any answers?

  7. Permalink to comment#

    This is a pain for web developers. How many browsers can one test against? Why not all browsers just stick with one font rendering standard? Even though Safari’s font looks bold I think at times that looks crisp and easy on the readability side.

  8. m
    Permalink to comment#

    You forget to change color profiles for pictures from mac. That means almost all browser will render these pictures wrong, and pictures from mac will be darker, for example in FF3 default settings.

    So, one innocent windows soul, educated and using FF, may be looking at mac type rendering, but it would look darker and blurier. You should convert them in sRGB or wait 10 years to correct display of all browsers.

  9. Junaid
    Permalink to comment#

    i have applied this css in my test web page , firefox is playing fine but I.E is not playing well…can any one help me!!!! plzzz

  10. julie
    Permalink to comment#

    So, are there any fonts you recommend that do the best job of being rendered similarly in FF and MSIE? At this point I don't care so much which is "best" (some say MSIE renders "better" than FF), I just want to put something in my CSS that will result in the most predictable look across browsers. I trial Arial and Trebuchet MS, but I know there are hundreds of options out there and maybe someone has found a simple workhorse font… Thanks.

  11. Cris
    Permalink to comment#

    Best tool for this type of issue (that I’ve found) is the site http://browsershots.org/

    It allows you to view any page of any site in virtually every browser known to mankind. Very handy, although very frustrating, too, since you get your screenshots back and they all look different!

    Still helpful, in my opinion.

  12. Dan
    Permalink to comment#

    Cris,

    Browsershots is ok, but the wait is rediculous. You need to check out the best damn tool I’ve found:

    http://www.crossbrowsertesting.com

  13. anand
    Permalink to comment#

    hi ,
    this is anand from hyderabad this forum is very help to me

    thanku

  14. Permalink to comment#

    I bookmark this post for next time I have to explain browser rendering differences. You know, it could be a school example. Very smart mate! I wish Firefox would render better quality with fonts (I prefer Safari’s rendering a lot!).

  15. Simar
    Permalink to comment#

    Have any tried for the solution for this?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".