Web font rendering in IE9

Wouter Bos — Thu, 18 Mar 2010 22:31:54 +0000

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' 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

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

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.

The Bright Lines » direct2d

Web font rendering in IE9

Some notes on rendering