Skip to content

Web font rendering in IE9

Some weeks ago I did a test to see how fonts look in a browser when they are not optimized for that. The result was that rendering and legibility was sometimes poor on Windows. Now that the IE9 Platform Preview is out, it’s time to do the test once more.

IE9 on Vista on the left and IE8 on Windows 7 on the right

IE9 on Vista on the left and IE8 on Windows 7 on the right. The font is Bodoni

For those who read my article on font rendering of professional fonts were surely disappointed to read that their fonts would most likely not render well in browsers on Windows if you use the CSS technique @font-face.

At the moment your best chance of getting a font rendering well in a browser is by buying or renting one from a font foundry like FontFont or Ascender, who optimize their fonts for the web. Fonts that aren’t optimized most likely will not render that well.

Well, there is some good news. IE9 uses Direct2D and DirectWrite and it seems that it does a much better job at font rendering as you can already see in the example on the left. So although we will still be very much dependent on those optimized fonts until the predecessors of IE9 have finally faded away, there is light on the horizon.

Its very exiting to see that the font rendering improved so much. Just look at the zoomed in part of the letter ‘g’:

The letter g at 500%. Again: IE9 on the left and IE8 on the right, in case you were still wondering ;)

The letter 'g' of the font Bodoni at 500%. Again: IE9 on the left and IE8 on the right, in case you were still wondering ;)

Some notes on rendering

Not very surprising, but sometimes the rendering of a piece of text in IE9 can result in something that’s significant wider than in IE8:

Two screenshots of identical texts in IE8 and IE9, placed on top of each other

Two screenshots of identical texts in IE8 and IE9, placed on top of each other

You can still find some rendering glitches like you can see here:

Still some bad rendering in IE9 with Helvetica at font-size 14, 15 and 16

Still some bad rendering in IE9 with Helvetica at font-size 14, 15 and 16

Dax too still renders bad at some font sizes. The first line is IE9. The second line shows the font in Safari, rendering it as it should be.

Dax too still renders bad at some font sizes. The first line is IE9. The second line shows the font in Safari, rendering it as it should be.

Just to make it absolutely clear: the fonts in these examples are converted without any hinting improvement.

Bookmark and Share
3 Responses
Follow responses to this entry through this RSS.
  1. Kok Hsien

    I found out that IE9 is very bad at rendering Verdana. Makes it look too blocky and bold for my taste.

  2. Thomas Phinney

    That wasn’t clear at all: what do you mean by “the fonts in these examples are converted WITHOUT any hinting improvement.” Converted from what to what?

    If you converted them from OpenType CFF or PostScript Type 1 to TrueType outlines (in an EOT or WOFF wrapper), then you did not get optimal rendering out of IE9. IE9 can render WOFF with OpenType CFF in the WOFF wrapper, and in our testing over at WebINK we find that yields better results than auto-hinted TrueType outlines (whether in WOFF or EOT).

    Cheers,

    T

    Thomas Phinney
    Sr Product Mgr, Fonts & Typography
    Extensis / WebINK

  3. Michele Caldwell

    Talk about font rendering — I downloaded the final version of IE 9 and found right away that whole blocks of text were missing from some of my favorite sites. It took me almost a whole week of tinkering with settings before it finally dawned on me that all the fonts looked the same on the affected (disappearing) areas when I viewed them on Firefox. I checked the style sheets on the sites that had the problem and saw that the common denominator was Helvetica. I created a test page using Helvetica as the font and sure it enough, it displayed in Firefox but not IE 9. I deleted Helvetica from my fonts and now all pages display correctly. Check out my blog to see my write-up.

Leave a response