Sub-pixel Fonts in IE9

Internet Explorer 9 introduces sub-pixel ClearType® font positioning as part of its hardware-accelerated rendering of HTML5 content. With IE9 now in beta, we’re getting a lot of feedback and questions about this feature. The bulk of this post describes issues Web developers should be aware of. But first, since all Windows users can benefit by tuning ClearType for their display, let’s start there.

Tuning ClearTypeScreen shot of Windows 7 ClearType tuner

For best results, you should tune ClearType for your particular display hardware.

Windows 7 users can use the built-in ClearType tuner found in the Windows Control Panel under “Appearance and Personalization / Fonts / Adjust ClearType text” to adjust your ClearType settings. (Page 2 from this 4 page tuner is shown to the right.) Windows Vista users can use the online tuner from within Internet Explorer. (The online tuner must be used with Internet Explorer because it depends on an ActiveX control.)

ClearType and sub-pixel positioning work by exploiting certain hardware characteristics of LCD displays to deliver improved font display quality over traditional forms of font smoothing or anti-aliasing. This improves readability on color LCD displays with a digital interface, such as those in laptops and high-quality flat panel displays. Readability on CRT screens can also be somewhat improved.

What Sub-pixel Fonts Mean to Web Developers

Text in your Web page will lay out the exact same way across different display resolutions and zoom factors when measured and rendered using sub-pixel fonts. Sub-pixel ClearType font positioning offers the most accurate spacing of characters on screen, especially at small sizes where the difference between a sub-pixel and a whole pixel represents a significant proportion of glyph width. It allows text to be measured in ideal resolution space and rendered at its natural position. This means that line breaks in text on your Web page will not shift around between different users’ configurations.

ClearType font rendering is used in all IE9 document modes; sub-pixel positioning is used only in IE9’s default standards mode. IE9’s compatibility modes—Quirks, 7, and 8—use whole-pixel text metrics.

Older versions of Internet Explorer use whole-pixel text metrics in which font sizes, character widths, and line heights were all rounded to the nearest pixel. For example, with IE8 if you ask for a font size of 10pt, you get a 13 pixel font size, even though a mathematically accurate conversion of points to pixels yields a 13.333 pixel font size. The following table illustrates this for common font sizes specified in points.

Point size requested Precise pixels Rounded pixels Point size you got in IE8 Font size change in IE9
8pt 10.67px 11px 8.25pt Smaller
9pt 12 12px 9pt None
10pt 13.33px 13px 9.75pt Larger
11pt 14.67px 15px 11.25pt Smaller
12pt 16.px 16px 12pt None
14pt 18.67px 19px 14.25pt Smaller
16pt 21.33px 21px 15.75pt Larger
18pt 24px 24px 18pt None

In IE9’s default standards mode, you get what you ask for: ask for 10pt, you get 10pt (13.33 pixels), slightly larger than what you got in IE8 and before. Similarly, 8pt ends up a quarter of a point smaller in IE9.

Sub-pixel versus Whole Pixel: Differences in Display

To understand what sub-pixel fonts do to your Web page, it’s important to understand how the older versions of Internet Explorer’s fonts work. The two tables below compare two font sizes of four different font families.

In the first table, the examples’ font-size and line-height are specified in pixels (12px and 16px, respectively). This means the same font size and line spacing is used in both IE9 and legacy modes. This isolates the differences to sub-pixel versus whole-pixel widths. You’ll notice that IE9’s sub-pixel widths generally display slightly narrower than the whole-pixel widths of the IE8 column. This is typical for normal weight fonts; bold weight fonts tend to display slightly wider. The difference is especially noticeable in the third row, font family Georgia.

IE9 Sub-pixel Widths IE8 Whole Pixel Widths Your Browser
IE9 12px/16px Verdana font sample IE8 12px/16px Verdana font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 12px/16px Arial font sample IE8 12px/16px Arial font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 12px/16px Georgia font sample IE8 12px/16px Georgia font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 12px/16px Times New Roman font sample IE8 12px/16px Times New Roman font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
font-size: 12px; line-height: 16px; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman

In the second set of examples, I’ve requested a font-size of 8pt and a line-height of 1.3em. As noted above, in prior versions of IE, an 8pt request actually results in an 11px, or 8.25pt, font. The differences below are a result of both sub-pixel effects: a smaller, more accurate font-size and sub-pixel widths on that smaller size.

IE9 Sub-pixel Sizes IE8 Whole Pixel Sizes Your Browser
IE9 8pt/1.3em Verdana font sample IE8 8pt/1.3em Verdana font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 8pt/1.3em Arial font sample IE8 8pt/1.3em Arial font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 8pt/1.3em Georgia font sample IE8 8pt/1.3em Georgia font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
IE9 8pt/1.3em Times New Roman font sample IE8 8pt/1.3em Times New Roman font sample
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
font-size: 8pt; line-height: 1.3em; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman

If you examine the above two samples closely, you’ll notice that the cap- and x-height of the fonts are the same but that the character widths and line spacing differ. In the sub-pixel case, the character widths and line spacing matches the requested font exactly; in the whole pixel case, the font request is rounded.

The Effect on Zoom and Scaling

I noted above that text measured and rendered using sub-pixel techniques is both zoom- and resolution-independent. This is important as more and more laptops are shipping with high-resolution displays. With those displays, Internet Explorer defaults to 125% percent zoom.

The following diagram illustrates what happens in IE8 with whole-pixel widths. Notice that at 125%, “pellentesque” now fits on the fifth line whereas at 100% it wrapped to the sixth.

Comparison of IE8 text block at 100% and 125% zoom levels

This change of wrap is the result of a change in line lengths. The following diagram shows the 125% zoom view overlaid on top of the 100% zoom view stretched by 1.25x:

IE8 text blocks at 100% and 125% zoom levels overlaid

You can see that every line in the 125% view renders shorter than the scaled up 100% view. This is because the rounding errors from whole-pixel positioning are greater at smaller zoom factors.

Compare this to the same sample in IE9 using sub-pixel font positioning:

IE9 text blocks at 100% and 125% zoom levels overlaid

You can’t even see the difference. That’s because the sub-pixel widths at 100% scale uniformly to the 125% sub-pixel widths. This uniform scaling is a major benefit of sub-pixel font positioning. Also notice that in IE9, all the lines break the same whereas in IE8 the line breaks changed. This means that the layout of the Web page may change as users zoom in and out—a behavior not typically expected when developing a Web site.

Ready for the Future

IE9’s sub-pixel font sizes and character widths are an important step into the future. The IE9 examples above illustrate what we mean by zoom-, or scale-, independent text metrics. This is an important characteristic of text as we move toward higher resolution displays, new form factors where pinch-zoom is an essential part of the experience, and Web features such as SVG, HTML5 canvas, and CSS 2D Transforms that assume uniform scaling of text.

Web developers need to be aware that with sub-pixel font-sizes, what you ask for is what you get. While it has always been true that Web page designs should be resilient to minor differences in fonts and font rendering, the introduction of sub-pixel fonts makes that all the more important. The benefit is that the page design will look the same independent of device resolution, zooming, or scaling.

[IE9 implements sub-pixel positioning using Windows’ Direct2D and DirectWrite subsystems.]

—Ted Johnson, Program Manager Lead for Web Graphics

Edit 11/8 – correcting typos in the bottom two lines of the first table in the post.

Comments (94)

  1. Aethec says:

    I was expecting a "sorry, we messed up font smoothing, we'll fix it" post.

    Instead of this, you're happily messing up web pages using very bad font smoothing for small font sizes – and you're proud of it.

    Don't make the same mistake the WPF team did – ask them how they fixed it, and do it, too.

    I really like IE9, but if you don't fix that problem, I won't use it. White-on-black text in IE9 is nearly unreadable on my system (GeForce 8800 GTS) while current IE versions display it just fine. This was also the case with WPF apps, but they fixed it.

  2. Michael says:

    There's a reason I've displayed ClearType on my system; I can't stand the color bleeding it introduces. If IE9 forces this, that means I won't be upgrading.

  3. Alexander says:

    The new font smoothing is great. Better font kerning makes text easier to read. It just needs some time to get used to.

  4. ThomasScheidegger says:

    I completely agree with 'Aethec'!

    If I disable this _UnlearType_ nonsense in Windows, I expect it to be respected system-wide, especially by MSIE!

    There are no 'sub-pixels', please stop this fraud.

  5. Olivier says:

    @Aethec : Microsoft messed up when they created cleartype some years ago. This "technology" is there to render black text colorful and any other text blurry.

  6. anonymous says:

    I have to read this blog in Chrome to get through it, since whatever font size it specifies looks blurry in IE9, along with many other websites.  But hey, it's accurate, which is clearly more important than, say, legibility.

    Thanks for making it easy for me to stick with other browsers.

  7. sukru says:

    Tried this current page both on Firefox 3.6.12 and IE9 Beta1. Clearly IE9 version looks much blurry, and for lack of a better word "worse".

    I do like ClearType on my LCD displays. It's much better than previous smoothing options in Windows. However the IE9 implementation is not as good, and is actually worse on the eyes.

  8. Mario says:

    Hello, is it safe to delete the IE8 folder in the windows folder if i don't want to restore ie8?

  9. Greg says:

    In the "IE9" / "Your browser" section, I almost consistently prefer my browser (Firefox 3.6). The only exceptions are where they're identical.

    Don't get bogged down in making websites look pretty or smooth in lieu of making them look like the developer wanted. We should be able to design websites in pure HTML and rely on them looking the same to everyone, no matter their system or browser. It would be truly lovely if IE9 would eradicate that bit after designing a nice site where I have to check it in Internet Explorer and then hack it about so it looks at least passable.

  10. brad says:

    I agree you guys might be able to more accurately represent the size of the font with sub-pixel rendering, but it just looks horrible.  I don't think anyone in their right mind would really say the IE9 sub-pixel rendering is clearer and easier to read than the IE8 whole-pixel from your example graphic above.

  11. Craig says:

    While I don't doubt the technical superiority of the IE9 rendering, the bottom line is that it is fuzzy and annoying to read.

  12. Aethec says:

    @Michael, Thomas, Olivier >> Let me be clear about that : ClearType looks great, and works great on my system. IE9's implementation of DirectWrite + ClearType looks horrible.

    brad >> +65536. The IE team is either blind or too proud of their work to admit they messed it up.

  13. mmm says:

    IE9 font hinting is horrible. It remains me crappy linux fonts. IE8 is definitelly better.

  14. Eamon Nerbonne says:

    Opinions differ: I prefer the smoother spacing and smoother letters IE9 uses over the higher-contrast, larger IE8 rendering.  And if the size bugs you; you just zoom everything up by 5% or so…

  15. Prior Semblance says:

    Looks fine on my computer, not seeing any of the stuff you guys are complaining about.

  16. Jeremy says:

    I absolutely love ClearType for its clarity and ease of reaing. However, these sub-pixel width look awful, and are hard on the eyes. You aren't _really_ going to ship it this way, are you?

  17. Patrick Blackstone says:

    I'd like to point out that (at least for me anyways) viewing this this blog in the IE9 beta it is displayed in the IE7 Compatibility view which as this blog post points out renders text with the IE8 style whole pixel rendering.  Also for some reason viewing this post in Chrome or Safari the example images are shrunk slightly making them look even worse and in effect making the your browser text look even better.

  18. Stefan Farthofer says:

    Apart from very small font sizes, I find the new ClearType rendered text much better than what we get from IE8, Firefox or Chrome.

    That said, the fonts on this page in particular really help to bring out the weak point of the renderer: As it is more accurate, you really get what you ask for. In this case what the MSDN blog style asks for is small text with a font face that has very light glyphs and to top it off the text is rendered in gray, light gray, and light blue. This is asking for trouble with legibility.

    As @Aethec pointed out the WPF team had similar problems with legibility of small text and finally conceded by introducing a rendering mode that mimics the old GDI pixel aligned rendering. I think something similiar is essential for IE9. Many pages use small fonts for large bodies of text and those just look terrible with the non-aligned renderer.

    While one could argue that this is a problem with the styling of the particular pages, it is not realistic to expect millions of sites to change their styling to accomodate the new renderer of IE9 in a short time frame. You could either use pixel aligned rendering when glyph sizes get to small or provide a switch for putting the renderer in pixel aligned mode on a per page basis…

  19. JB says:

    This is awesome in theory.

    In practice, after several hours of using it, going back to classic ClearType is like a breath of fresh air. This applies to anything using DirectWrite, including the latest Firefox betas too.

    The problem is that current displays have too low DPI to pull this off. Most current displays have around 100dpi. At these pixel densities, you can't afford precise positioning. The hand-tweaked, whole-pixel-aligned classic rendering is going to produce better results every time, even if it breaks metrics somewhat

    Ironically, it was the very mediocre high DPI support what killed the marked for high DPI displays years ago. I remember 15" laptops used to come with 1400×1050, that's just 120dpi but apparently too much already, people complained that everything was "too small". Reminds me of this article:…/follow-up-on-high-dpi-resolution.aspx

    Now we're going to be stuck in this low-DPI hell for quite a bit of time, and on top of that, inadequate font rendering. Good times.

  20. Aethec says:

    @JB >> Actually, WPF's text stack uses DirectWrite, and it looks decent (if you set TextOptions.TextRenderingMode to Display in your software, that is). But you're right – all this "sub-pixel" thing is useless unless you're using a ~300 DPI display. Not really common.

  21. commenter says:

    The IE9 screenshots on this page look bad in Chrome, but they look great  in IE9 preview 6, which is strange, given that they are bitmaps! They look the same as the non-bitmap snippets of text, too.

    I think Chrome is resizing these bitmaps a small amount, which always makes bitmaps look bad.

  22. John Williams says:

    It's interesting no one here talks about the problem Microsoft are trying to solve.  The idea of fonts that scale exactly is a nobel one, and it would be great if a page could be zoomed to any size without the fonts shifting within their containing elements.  However it seems clear that this is not a big problem for most people, whereas the tradeoff (fuzzy font rendering) negatively impacts the entire user experience (as it did with WPF).  The IE team need to be very careful with this one.

  23. Vasil Dinkov says:

    The fact that IE8 behaves like all other current browsers on Windows and IE9 differs in font rendering, speaks for itself. Why break something that already works well for users?

  24. GT says:

    I prefer auto switch based on the LCD screen, I have many LCD screens at work, we wrote a WPF application for one year and a half, and it looks good on one of the screens only and acceptable on the other screens.

    I will never ever use WPF again, not only because of the VS2010 bugs, or horrible performance, but because of the font problems too.

    The sub pixel font is maybe the future, but how many LCDs support it today?

  25. Marton Sari says:

    At last, Microsoft converts to the right (i.e. mac style) font rendering! Halleluja. I guess no designers are among those who blame MS for this move. It was a necessary move and the only one possible. Line wrapping was a very bad idea, and as said in the post, this strategy ultimately fails in new technological challenges (pinch zoom etc.). Line wrapping cleartype traded precision for readibility, and this was a mistake, because precision is a number 1 priority.

    Thank you IE team, and keep up the good work and stay on the path of right decisions!

  26. Matt says:

    I think it's funny to hear the comments of people threatening not to upgrade their browser over this. Fine, don't. Use Windows XP, for all we care.

    I'm not sure if any of you use and iPhone or iPad, but the reason you can double tap to zoom into a web page and it looks good is because those devices render fonts in this way. If you want IE to never work properly on devices, keep trying to persuade the IE team not to change.

    I'm sure Steve Jobs won't mind at all if Windows users demand that Windows and IE not make the necessary technical improvements to prepare for the future. You're already doing that with your boycotts of Windows Vista and Windows 7. Steve Jobs thanks you.

    I'm a Mac user now, but I honestly feel bad for the IE team. Congratulations on making this change, it's a good one.

    (I'll not tell your users that although the fonts look "blurry" at first, once you stop staring at individual characters, text is actually easier to read because of the correct spacing. It will just make them angry.)

  27. Mac says:

    Looks nice on all the screens I could test it on, which is amost a dozen so far. But then, I love ClearType and I never faced the white on black problems in VS when they switched to WPF. Maybe I'm just lucky.

    @Aethec: re "all this "sub-pixel" thing is useless unless you're using a ~300 DPI display", actually it's quite the opposite. It's with low resolution displays that sub-pixel rendering is more useful; if the resolution is high enough, the advantage becomes less and less visible.

  28. John Williams says:

    Yes, that's an interesting point about how mobile Safari already uses this technology to excellent effect.  There is no obvious trade-off in readability.  So I guess the question is, if Apple can do it right, why can't Microsoft?  Wow, just got a real sense of deja vu there…

  29. A Hylian Human says:

    So why do the IE9 screen shots and the "Your browser" box look completely different in IE9? In fact, the "Your browser" box resembles IE8 more! Not to mention the IE9 screenshots look horribly fuzzy. So to me, there's no difference with this "sub-pixel rendering" you speak of.

  30. Prior Semblance says:

    One other thing, is this feature in the IE9 beta?  Because I have cleartype enabled in the options, but it's rendering like IE8.  I only saw how it's supposed to look because it works in preview 6.

  31. Michael says:

    @Matt: The reason I won't upgrade is not that this feature exists, it's that I *can't turn it off* and it *doesn't respect my OS settings*. The color bleeding introduced by ClearType makes my eyes hurt, and this is *not* something I can just look past, even with all the tuning in the world. Subpixel rendering simply does *not* work for everyone or on every screen.

  32. John says:

    @A Hylian Human:

    This web page doesn't use the IE9 document mode, so it's not being rendered in the IE9 engine.

  33. SiSL says:

    May be you are forgetting the fact that this type of fonts only looks good when you REALLY adjusted your clear-type settings (without bleeding etc). But 99% of users will not bother with that, that I'm sure… I like the idea, I like the appearance when adjusted correctly, however it should be definitely adjusted to be seen with "DEFAULT" clear-type comes with Vista & Windows 7.

  34. SiSL says:

    Add: May be it is more related to Tahoma and 11px size –and especially bold state– (which is most commonly used on many sites including Facebook)

  35. pezzonovante says:

    This is one of the most awesome features of IE9 and Windows 7. I love the new font rendering introduced in IE9. Other browsers don't come close to IE9 in any regard. That's why IE has been and will continue to be my default browser for many many years to come.

  36. registradus says:

    I love the new font rendering. So smooth. It is the main reason I have switched from Chrome.

  37. steppres says:

    The new font rendering is awful and looks atrocious. I sincerely hope it gets fixed soon.

  38. zzz says:

    > The problem is that current displays have too low DPI to pull this off

    This. If MS can lay out a plan of how they can force the panel makers to convert all their factories to high DPI a year before release of IE9 then I might be more supportive but as is this isn't going to fly.

    The very least there needs to be user switch to set IE9 to render text exactly as IE8 by default unless there's some element specific toggle that lets the dev say "make text look like crap".

  39. Søren says:

    > his improves readability on color LCD displays with a digital interface

    What is the significance of "a digital interface"? Why wouldn't it work with a VGA cable?

  40. Laurent says:

    It's funny, because on my Firefox 3.6 on Mac, the "my browser" section look almost the same as IE9. I remember when I first open a Mac 1.5 year ago, I was horrified by how blurry the font looked. Now that I'm used to them? No problem, everything look fine. (except for very small font, like in this comment box. Small font are a useability problem, it would probably be appreciacted if you boosted the font size a little so I don't need to zoom the page and make every pictures blurry.) I still prefer the Windows font smoothing, but since the font size is lower in Windows for some reason, both have about the same level of legibility.

    Don't forget that it's easy to get fooled by the "it's not what I'm used to so it suck" effect. I remember in IE7 when then suddenly activated cleartype. At first I tought it sucked. Then I started applying cleartype on every WinXP I found that had a LCD.

    Question to IE team : Is there a way to activate those effect on a system wide setting so it don't have that "it look different than the rest of WIndows" effect?

  41. Stilgar says:

    Oh fine. It looks good on high DPI displays you say? When I have a high DPI desktop display 10 years from now I will install IE9 I promise. Oh why wait… I can use IE9 right now and press the "send all the standards work of the IE9 team to hell" button also known as Compatibility View and get readable text on my display.

    Why not just make it an option and have the option off by default on desktop systems and on by default on phones (when you port it to phones). You may even detect the DPI automatically and set the default. Users can then switch it on or off if they don't like the default.

  42. commenter says:

    God I hope nobody on the IE9 team reads these comments. What a shower of whiny gits!

  43. gigi says:

    WPF blurry text all over again. Yay!!! Don't you people talk to each other?

  44. LoveIE9 but... says:

    The text in your sample is much easier to read in "IE8 Whole Pixel Widths" than in "IE9 Sub-pixel Widths". I love IE9 and all the things you have done it it, but not the font! The font on pages in IE9 mode is blurry 🙁 Scott Gu fixed it in VS2010 so you can to! 🙂…/font-rendering-is-worse-in-ie9-than-ie8

  45. SvenC says:

    +1 for taking my settings under Computer>Properties>Advanced System Settings>Visual Effects for "Smooth edges of screen fonts".

    I unchecked that option intentionally and would like all of the apps to follow that setting by not using any kind of font smoothing on any text they display. It troubles my eyes and gives me headaches after a while when I have to look at smoothed fonts. My eyes are quite good so that I see sharp contrasts. When some apps start to smooth away that contrast, then my brain seems busy in turning those portions to sharp contrasts which they can't because the portion is less sharp on the screen than it could be.

    Please follow the WPF team and make font smoothing an option which can be turned off. Please look for people in your team who have very good eye sight (mine was measured to be 120% two years ago) and let them use IE9 beta for a day and have them switch back and forth between IE9 and some other text showing app with font smoothing disabled. Let them use a standard LCD monitor like 20" 1600 x 1200 pixels or 23" 1920 x 1200 pixels so that they use a currently common DPI setting.

    Please give us that option in the next beta of IE9 and please make that beta available soon, like next week or so 😉

  46. Thomas Scholz says:

    Since anything below 14px is unreadable now – will IE 9 get what all other browsers already have for years: a minimum font size setting?

  47. Thomas Scholz says:

    Since anything below 14px is unreadable now – will IE 9 get what all other browsers already have for years: a minimum font size setting?

  48. KS says:

    I've not been able to understand any of the complaints from people about "color-bleeding" in ClearType from the beginning. I have rarely seen that, maybe on really cheap monitors years ago. I love ClearType. However, I can understand that many people do not like this new sub-pixel rendering. In theory, it is great. In reality it introduces a lot of problems that several people have outlined in the comments already, I don't have to repeat that. The IE team should learn from that and allow (1.) an opt-out from the sub-pixel rendering in IE9 standards mode from the *designer's* side (e.g. a X-Render-Compatible meta switch) *and* (2.) on the user's side (from Options, Advanced, like with ClearType). Forcing a new technology that clearly isn't optimized yet and creates worse display than "older" technology for many people would be a stupid move. Try to make everything right with IE9, please.

  49. HubRis says:

    Please make sure to honor system preferences. That is all. We don't need another Safari doing whatever the hell is feels like, because not every person and not every monitor are the same. Opinionated hipsters who can't see the other side of the argument need not apply. I think this is a good option to have, because it may improve the experience for some people. But don't get lost in your celebration and forget that this isn't a setting that everyone will appreciate.

  50. Bleeding Eyes says:

    I don't care how "pretty" you make it.  Just let me disable it completely!  ClearType makes my eyes bleed.

  51. Linker says:

    I've been using that kind of font rendering for all web sites for several months, since the DirectWrite support appeared in Firefox nightlies (and now I use Firefox 4 beta which uses DirectWrite for all web sites by default). When I tried IE9 beta, but eyes did hurt, but they hurt not on DirectWrite-rendered web sites, but on compatibility mode web sites which still use the old type of rendering. I remember that it took for me about two weeks to get used to the new text rendering approach, but since the moment when I did get used to it, the old way to render text simply doesn't work for me anymore. The uneven letter spacing of GDI makes my brain hurt just about the same as that photohopped picture of a person with two pairs of eyes.

    And by the way, since moving to the DirectWrite-enabled version of Firefox I have noticed that reading long texts (like books in electronic form) from the screen became much easier for my eyes, and now I even thing that probably I don't even need that eInk book reader that I was dreaming to purchase for the purpose of reading long texts on it.

    In short: stop complaining about it and simply let yourself get used to DirectWrite. This is the future, and you can't escape it. The old font rendering was holding back too many wonderful technologies that you will definitely appreciate in future (like proper DPI scaling and pinch-zoom). It should be made non-user-disableable, and only then everybody will get used to it (and learn how to tune their ClearType).

    Remember, Macs use the same type of text rendering since the advent of OS X, and does anyone complain about the readability of text on Macs?

  52. Ted Johnson [MSFT] says:

    @Michael, others: Yes, IE9 respects the system-wide setting for ClearType on/off. In Windows 7, this is the "Turn on ClearType" checkbox in the ClearType Text Tuner. If system-wide ClearType is off, IE9 still uses sub-pixel positioning but uses grayscale anti-aliasing instead of the color-based ClearType techniques.

  53. Dude, you don't listen carefully, do you MS? Don't you realize that blurry text isn't good for human eyes? And now you argue that it's good by emphasizing more on technological reason than readability, health, and safety of users' eyes? That doesn't seem right at all to me.

    WPF has already made this same mistake since the first version (v3.0). But now, they have fixed it in the latest version (v4.0). Isn't it too much repeating the same mistake in IE9?

    I don't know exactly how Direct2D and DirectWrite work behind the scene. But since both WPF v4.0 and IE9 use it with the same terrible result, I begin to suspect that the actual problem lies in the Direct2D and DirectWrite themselves.


  54. Linker says:

    Maximilian, you don't get this issue right. Nobody wants to hurt eyes for the sake of technologies. Actually, ideal text rendering is BETTER FOR THE EYES, it just needs some time for your brain to adapt so your eyes can start receiving that benefit.

  55. Aethec says:

    @Ted Johnson: Is it too much to ask for a "Disable sub-pixel positioning" checkbox in IE's options?

    @Linker: WPF's TextOptions.TextRenderingMode has two values: Display and Ideal. In other words, "what users want" and "how it should be if we had screens from the future". And the extremely bold white-on-black text is not better for the eyes – my eyes hurt each time I visit a page with white-on-black text in IE9…

  56. Linker says:

    Have you people even seen a Mac?

  57. @Linker:

    "Actually, ideal text rendering is BETTER FOR THE EYES, it just needs some time for your brain to adapt so your eyes can start receiving that benefit."

    Then I'd like to read some researchs that PROVES it is INDEED BETTER FOR THE EYES. Please, show me such researchs if you think so. Or, this could be one of half-baked technology done with poor researchs. I begin to think that I prefer proofs and evidences to merely arguments or opinions.

    Also, you assume that everyone brains CAN adapt to such condition. How could you think so? Again, prove me with ACTUAL researchs. Based on my experiences with WPF since 2006 until before fixed in 2010, my brain and my eyes still decide that it has blurry text. So what is that? The brain failed to adapt?

  58. SvenC says:

    @Ted Johnson: +1 for Aethecs question: Is it too much to ask for a "Disable sub-pixel positioning" checkbox in IE's options?

    As suggested before it might be helpful if one could toggle that setting on a per page basis but still define what the default for a new page should be.

    That way you can choose if you primarily focus on text readability or page layout and switch that preference if needed.

    @Linker: that might be true if I activated font smoothing and ClearType on the OS level and all apps would show their text with smoothed text (1) *and* if I stop looking at things (especially text) in the *real*, the *analog* world. Text in books and news papers is sharp and not smoothed. As I *do* switch between looking at my LCD and looking at real things my brain cannot be re-trained by looking only at smoothed texts until it thinks smoothed font is normal. I have two colleagues who like font smoothing and guess what: both wear glasses. Let me repeat myself: people with less good eyes don't see problems with text smoothing because text to them always looks a bit unsharp no matter if on a monitor or on paper. But do we really all need to ruin our eyes to be IE9 compatible?

    (1) I tried that with different ClearType settings on my Win7 and went back to no smoothing, which btw is not respected in several Control Panel pages and in the new Windows Explorer toolbar and tooltip texts. I do not like that ignorance to my settings either but luckily I hardly need to look at those text parts, so that ignorance is easier to ignore than text displayed in my web browser 😉

  59. Linker says:

    SvenC, I have actually migrated to DirectWrite for all my web browsing for several months (by using pre-release builds of Firefox), so I'm not speaking of something that is untested and theoretical. If I say that one can adapt to it, I say it because I have already did that myself. All my web browsing uses DirectWrite, but all my other Windows apps use GDI. I assure you that I have no problems with that. UI elements and contents of web pages are perceived as different medias. But I must say while Firefox uses DirectWrite for all web pages, IE9 turns it off for quirks and compatibility mode web sites. This can impede the process of adaptation to DirectWrite. I think IE9 should use DirectWrite for the Quirks mode as well, because the Quirks mode is not transitional and will probably stay around forever.

    Who of those who criticize this decision have actually used DirectWrite for all their browsing for several months, like I did? Why criticize something that you haven't properly tried?

  60. SvenC says:

    Linker, humans can force themselves to all kind of migrations and changes. But in addition humans can ask themselves what kind of changes seem helpful. Some of us didn't miss sub-pixel text rendering so far and don't like it forced on them.

  61. Aethec says:

    @Linker: Microsoft cannot change the Quirks Mode's behavior. It must emulate old versions perfectly, even if this includes bugs, missing features, badly implemented features, and so on.

  62. steve says:

    Are you serious? – you went and botched this up even more? – Aghhh!

    ClearType (aka FuzzyType) was a flop – if I wanted blury, bolded rainbow text I'd ask for it! – I have the setting turned off in Windows AND in MSIE already.. for ALL my systems whether laptops, CRT's or LCD's, and especially for my TV.

    As other's mentioned, give up on the "sub-pixel" PR crud… the display won't divide pixels for you so stop claiming it can.  There is a reason why ALL my displays have an "optimal, NATIVE resolution".

    Now although I agree that the new FuzzyType is clearer than before because it no longer makes text BOLD to overcome the fact that there are no sub-pixels (well done) but at small font sizes it is still bold, and at all resolutions it is still blurry/fuzzy and produces horrible rainbowing when viewing black text on white (or vica versa).

    Please tell me that there is an option to FULLY disable FuzzyType in Windows 7/IE9 as I don't have enough vision coverage with my medical plan at work to cover getting new glasses when the eye-strain kicks in again (I had wicked bad headaches when I first tried to use ClearType… thus I had to disable it fully)

    Most of all, the biggest issue with ClearType is that you are actually changing the color of the text… there is no 100% black text with FuzzyType turned on… only 85% black which doesn't look right, especially when mixed with a 100% black image.

  63. factor says:

    This is not an okay way to render text:

  64. Linker says:

    "Microsoft cannot change the Quirks Mode's behavior" – I think it can, because this is just what Mozilla is doing in Firefox 4, and I see no problems with that (and I browse A LOT of web sites every day in my Firefox 4 beta).

  65. Ross says:

    @Linker: IE's quirks mode != Firefox's quirks mode.

  66. I HATE CLEAR TYPE says:

    Please ensure that cleartype can be fully and completely disabled in IE9 – it makes my eyes bleed, and as @factor noted – there is obviously still major issues with this font rendering.

  67. Michael Greenhill says:

    I manage the website of a Melbourne secondary college –

    All the white-on-dark text looks atrocious on my site now. Hell, even IE9 in IE8 mode looks better, but it looks gorgeous in Chrome.

    I *like* ClearType – just not IE9's standards mode implementation of it. When ClearType is properly tuned it looks great….just not in IE9.

    Gah, why have you done this!

  68. Kirrekug says:

    What about fonts with bitmaps for smaller sizes? Will final IE9 support this?

    Also, what about the new Opentype font size features?

  69. Kirrekug says:

    @Mac: »@Aethec: re "all this "sub-pixel" thing is useless unless you're using a ~300 DPI display", actually it's quite the opposite. It's with low resolution displays that sub-pixel rendering is more useful«

    True, but there is also a lower DPI border for sub-pixel-rendering which differs from person to person. If let's say a person has a 19" display with 1280×1024 (those were quite popular half a century ago) then he has just 87 DPI and this is where sub-pixel rendering might be annoying for a person with good sight.

    I sincerely hope the "retina"-DPI future will come soon so we can bury all this anti-aliasing hackery once and for all…

  70. Alex says:

    I love this! It's really going to speed IE's demise!

  71. Ben says:

    One little note for the folks suspecting that the images are being zoomed. There's a CSS rule in place that limits the width of the images to the width of the column they reside in. That column resizes as you resize the browser, so you need to make sure your browser window is wide enough so that the images are not being shrunk down. This only works in browsers that support max-width. So when judging the samples, widen your browser window until the samples stop growing.

  72. R says:

    Here's another guy to say IE Team failed again (after the bad UI given to IE9), now won't improve text rendering.

    This text rendering is completely broken, there is no good Cleartype configuration to make it better, and IE9 doesn't follow Windows' Cleartype configuration.

    It seems that these lazy developers couldn't code a fix for that, and then they need to justify it as being an evolution!

    No way, really no.

  73. jabcreations says:

    I'm not exactly sure what the point of ClearType is? I'm seeing comments about it attempting to deal with small fonts…how about people stop using font-size: 4px?

    I think Safari 3.1 introduced something like this where their fonts were all undeniably bold and then they thankfully recanted. I had to use text-shadow to make the not-bold fonts look only half-bold which was obnoxious.

    I just don't like fuzzy looking fonts…maybe it's better suited for people whose eyes can't focus as well as others or something? In the very least I think there should be some sort of CSS property (yeah proprietary) to disable this as clearly a lot of web designers would use it…or maybe a "font-smoothing" CSS3 property?

    I think people should just stick to larger more legible font-sizes as that would probably negate most of the problems. Seriously, 1080 HD screens are like hovering around the $160 mark now.

  74. asdf says:

    I agree with Aethec. You guys have the right idea, but you're doing it incredibly wrong and the fonts come out underhinted and blurry. Please stop showing off until you apply the same fix WPF did. Some, if not all of your examples look better in IE8. With proper subpixel rendering, DirectWrite should be blowing FreeType and Mac OS's renderer out of the water. Problem is, it isn't even beating GDI's rendering.

  75. Steve says:

    Sorry, guys. Both pictures from IE8 and IE9 look horrible (IE9 a bit more).

    Why don't you just try to license FreeType? Those guys got it right and the rendering is absolutely superior to the things Microsoft and Apple still try to achieve.

  76. brian says:

    We have yet to hear from Microsoft that the ClearType settings in Windows will be fully honored yet.

    Please state in 100% clear and no uncertain terms that ClearType settings in IE9 will observe and obey those set in Windows. e.g. if I have turned off ClearType like so many people do because the blurry bold multi-color text hurts our eyes – that IE9 will not inflict pain on end users by forcing them to use ClearType when they have absolutely no desire whatsoever to use it!

    More importantly, not only will they not be forced, but IE9 will most definately not come with ClearType turned on by default!!!!!!!! (absolute must!!!)

    thanks, looking forward to a public, quotable reference on this.

  77. Raffi says:

    No idea what people are whining about, IE9 easily has the nicest font rendering of any browser right now, don't listen to the haters.

  78. SvenC says:

    Please do not confuse ClearType and font smoothing. Font smoothing can be done with ClearType or gray scale anti aliasing or some other algorithms.

    While tuned ClearType might look better than gray scale anti aliasing, I prefer to turn of font smoothing all together.

    I disabled font smoothing on Win7 (Start > type "view advanced" and select "view advanced system settings" > Performance Settings > unchecked "Smooth edges of screen fonts". And that setting is what I would like to see respected in all apps including IE9.

  79. Todd says:

    @Raffi – sorry to hear that your vision is poor – those of us with good/great eyesight find ClearType to be atrocious.

  80. Jarrad says:

    Why should this even be implemented in the browser? Is it too much to ask to have uniform font rendering across my operating system? This is starting to look like the Linux desktop five years ago, with x different methods of font smoothing across different apps, all with their own flavour of crappiness. If I want sub-pixel positioning, I should be able to turn it on in Windows and have it in *all* apps, and likewise if I want to turn it / cleartype / greyscale anti-aliasing off then it should be done once for the entire OS. If OS X and the hodge-podge of modern Linux desktops can manage it, why can't Microsoft?

  81. Harry Richter says:


    Nothing wrong with my eye-sight (as said by the eye-doctor in preparation for a (armed forces) mission abroad), and I find nothing wrong with ClearType. Rather I find everything wrong with Clear Type turned off (I tried, but it leads to head-ache after a while).

    Don't you think it arrogant to speak of "those of us with good eyesight", when it clearly it it you that has a problem. If you do have supporting data that would allow for such a gross generalization then show us. But I assume there is none, because otherwise Microsoft would have to battle a class action by now.


  82. ZigPress says:

    For me, every box in the IE8 column looks better and more readable then the corresponding IE9 box.  Major fail.

  83. blah says:


    – The "IE8 Whole Pixel Sizes" in both sets has actually non-default ClearType setting that makes it look as if ClearType is more bold than it is. I have a clean Windows 7 install on which CT tuner has never been ran. If you need proof: Grab clean Windows install, open this in IE8, grab screenshot, open in paint, use color picked on the "your browser" and same letter pixel on "IE8 Whole Pixel Sizes" .. then open the "edit colors" to see the actual pixel values, they should match* but do not! The default untuned GDI rendering is lighter and sharper in appearance than what IE team wants you to believe. I have IE8 and IE9 Preview 6 installed so doing comparisons to see which is really better is easy, rather than the method of "lets get used to the inferior rendering and forget how it could look like" which conveniently happens if you install the Beta that's harder to side-by-side install with IE8.

    Also ask yourself *WHY* did WPF team spend all that effort to go back to imitate GDI at last minute before RTM? Because this new tech used in WPF/IE9 works wonders for readability on current hardware?

    * they should match because average user doesn't tune the CT to make all text bold (more saturation, less luminance in the sub pixels in the "IE8 Whole Pixel Sizes" sample)

  84. blah says:

    Ok, for those who have trouble noticing how bad IE9 rendering is. I cropped the examples from this blog, did comparison of IE8 normal rendering vs IE8 poorly-tuned-rendering on this blog vs IE9 sub-pixel-position-fuzzy-wpf-before-fixes-like-rendering…/

    There you have it. Unzip, click Preview (Opens in Windows Photo Viewer) and then flip through them with left+right arrow keys in both direction.

    Note: The 2 examples in the bottom half look quite acceptable atleast in that particular size. So if, based on that example, 50% of the text in the web in IE9 is readable and rest is fuzzy, does that make IE9 the better browser that people want to upgrade to and devs want to develop for?

  85. Thomas says:

    @Harry Richter – Are you telling me that you can't see the colors at the side of font curves and angles? Let me zoom that in for you (first image)…/fuzzy.png

    Oh snap! Now does it look like a rainbow of colors? Notice how what should be "crisp" text is now actually blurry text? Did you spot how what should be 100% black text on a 100% white background is now actually shades of gray, brown and blue?

    I'm sorry that you find it offensive when other developers point out that the "general population" with good eyesight has issues with ClearType when you have perfect eyes but can't see the blurry text, the lack of crispness, and an assorted rainbow of invalid colors presented for black text however the rest of us do have issues with this and thus we've disabled ClearType in Windows completely (except for when IE won't keep its nose out and tries to force it on us)


    Arguments above aside – stay safe on your mission abroad.  As much as we can disagree on software technology, personal & general opinions – I hope you return safely from your mission… and hope that it inches us closer to world peace.

  86. Klimax says:

    1)Seems like wrongly tuned – unless I use Magnifier(utility;700X) I can't tell something colourfull and blurry is happening. (LCD – native resolution ; shortsighted)

    2)You can turn it off – so what the hell is problem? (unless I missed it …)

  87. SvenC says:

    @Klimax – 2) no, you cannot turn off *font smoothing*. You can only "choose" between smooting with ClearType or gray scale anti aliasing. At least when not in IE8 compatiblity mode. Not sure how that affects smoothing and cannot test anymore as I reverted to IE8 – for one much explained reason 😉

  88. text-shadow says:

    and text-shadow?????????????????????????!!

  89. Christopher Dean says:

    After screen resolution exceeds the photoreceptor density threshold of the human retina wont this will eventually become moot?

    Curcio, C.A., K.R. Sloan, R.E. Kalina & A.E. Hendrickson (1990) Human photoreceptor topography. Journal of Comparative Neurology. 292, 497-523.…/apple-retina-display

  90. gary says:

    @Christopher Dean – yes you are correct – this will become a moot point when displays become that awesome.  However back in 2010/2011 we don't have such displays available to the masses (and or Video Processing to handle it) therefore it most certainly does matter!

    That's why there are so many complaints in this thread.  Since many of us have good vision (or corrective lenses/eyewear) to fix it – we do see a horrible blur effect on text, causing eye strain.

    All we are asking is that ClearType by default observe the Windows setting so that if we've specifically turned it off, it remain that way.

  91. Will says:

    I'd like to add a +10 to everyone else who, like me, went through exactly the same sorry tale with WPF/VS2010 and can barely believe it's happening all over again.

    To your credit, IE team, you're at least following *exactly* the path followed by DevDiv on this:

    * First, deny there's any problem at all

    * Next, instruct everyone to run their ClearType tuner

    * Next, ask them to run it again

    * Now issue a patronising lecture about what's going on (it's ok, we know what's going on, we've seen all this before)

    * Tell everyone to change all their fonts, to ones which you think work better

    * Remind everyone again that the new system is 'better', even if they think it's 'worse'.

    * Very, very, very slowly, hoist-in the fact that you've f'd up, and people are not going to use your product if it makes their eyes hurt, however much better *you* think it is

    * Fix it properly at the last minute before release.

    There will be but the slimmest of cigarette-papers between IE9 and its competitors by the time it launches.   This would be a truly stupid way to lose a whole bunch of users.

    You will fix it, because someone with sufficient clout, sufficiently high-up in the company is going to tell you to.  That's my prediction – fancy a wager?

  92. anonymous says:


    My vision is fine, in fact with some effort I can count the individual pixels of a character from a comfortable distance when using whole pixel rendering. To me IE9's rendering is far superior and I simply have no sympathy for anyone who thinks otherwise.

  93. jacob says:

    well said @Will – it is amazing that no one from Microsoft has stepped forward on this blog to give feedback on all the negative feelings towards clear type and the issues it causes.

    I feel sorry for @anonymous above that can (like me) see all the pixels in the output on screen yet s/he somehow isn't bothered by the font-smoothing applied to the characters with clear type turned on.  I just find it really aggravating that if I turn on clear type I have to spend all my time wincing my eyes to try and re-focus the blurry text.  I'm sure that this is massively unhealthy for my eyes thus I turned it off ASAP.  I will not be impressed if this is the default setting in IE9 and I will be fuming mad if I can't turn it off easily….. it should obey my Windows setting right from the install.

    Dear Microsoft; can you please clarify what the intentions of IE9 are when it releases regarding ClearType?  Will it follow the settings in Windows?  Will it be turned off by default? etc.