IE 9 does not use sub-pixel antialiasing under certain conditions

Jacob picture Jacob · Apr 5, 2011 · Viewed 14.3k times · Source

[Original title: IE 9 text renders very poorly; is there a workaround?)

IE 9 is rendering the text in my application very poorly. The problem is not in my monitor's Clear Type settings, since IE 9 in compatibility mode, Firefox, and Chrome all render text nicely. Here's a side-by-side comparison of how the text is rendered with IE 9, IE 9 in compatibility mode, and Chrome:

IE 9

IE 9 Compatibility Mode

enter image description here

I tried applying this answer, but it doesn't seem to apply to anything after IE 7. Does anybody know of any workarounds we can apply to our site to fix IE 9's bad text rendering?

Edit:

I've boiled down the problem page to the bare essentials. As you can see, it doesn't take much to reproduce. Be sure that IE has a browser mode if IE9 and document mode of IE9 standards:

<html xmlns="http://www.w3.org/1999/xhtml">
  <body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
    Home
  </body>
</html>

Answer

David d C e Freitas picture David d C e Freitas · Apr 12, 2011

Short answer: this is an issue when you specify font sizes in pt (points), rather than pixels.

So what happens is that the new IE9 rendering engine uses DirectWrite, which won't snap to the nearest pixel as it did with GDI+, so if your pt size doesn't map to a whole pixel number, it will draw it exactly that way, which makes it appear blurry.

The IE8 compatibility mode wouldn't suffer this issue as it uses regular GDI rendering that we are used to.

So check out all your style sheets etc and if you are asking for point size font's, that's exactly what will be given in IE9, and depending on your font used etc, your point size might or might not map to a crisp and clear size.

This is explained in detail here: