IE9’s Stunning Text Rendering Quality

If you follow my blog, you may know that I’m deeply involved in the planning and execution of our PDC, MIX, and Tech·Ed events (including Tech·Ed Europe). My team works on keynotes and content (sessions, hands-on labs, workshops, etc.), among many other things. As a matter of fact, I have an open position on my team for someone who can plan, build, and maintain the public and internal web tools for our big tier-1 events. Apply, if you’re interested. But I digress…

During the lead-up to our MIX10 event this spring, I knew that one of the features that Steven Sinofsky and Dean Hachamovitch would show in our day 2 keynote (demo starts at 19:00) was the hardware-accelerated text quality in IE9. The feature takes advantage of DirectWrite, ClearType, and sub-pixel positioning to improve font quality and readability. This additional precision allows glyphs to start “within” a pixel and not just at their boundaries resulting in more precise and consistent glyph spacing and proportions. This article on ClearType does a good job explaining some of the magic, even though it’s focused on WPF.

If you’re like me, when you hear “sub-pixel positioning” and glyphs that start “within” a pixel, you probably think, “yeah…right!” The MIX10 keynote demo certainly shows an improvement, but Steven and Dean had to zoom pretty far into the text to illustrate the difference. Fast forward to this past weekend.

Recently, I’ve been spending time on an upcoming project for my good friends at MIX Online (just down the hall from me in building 24). The project involves working with the HTML5 canvas element, and I’ve been performing most of my tests with IE9 Platform Preview 3. This weekend, I decided to run some of my test files (HTML and JavaScript) with the latest versions of Firefox, Safari, and Chrome. Honestly, I didn’t expect to find many differences. So imagine my surprise when I saw these results (in alphabetical order):

Update: Some users were reporting that IE8 was automatically resizing these images because of their width. So, I've cropped the images to avoid this behavior. If the images still look "squashed," you can click to view them directly.





What a difference! Look at the rendering quality, readability, and positioning of the text. These are unmodified screenshots from the latest versions of the browsers running on Windows 7 with ClearType enabled. All of the text is rendered with the canvas .fillText command and there are no bitmap images…everything is either text or drawn to the canvas with vectors. I encourage you to try similar tests with your own content. I think you’ll be surprised!

If want to learn more about the technology behind all of this, take a moment to read about the hardware accelerated canvas support in IE9 on the ieblog.

And, of course, I love it when people take the time to send me a quick email. What do you think?

Comments (22)
  1. asf says:

    I'm not a fan of the fat apply style font rendering so I hope the IE team does not have that as the end goal

  2. pranava says:

    Yea… Even I have experimented few sites in IE9 PP3. The content positioning and quality is much better than previous versions. To my surprise, some websites which didn't work (content positioning and scripting) in IE 7/8 has shown up perfectly in IE9 PP3. 🙂


  3. happy says:

    Excellent.  Now can you convince the OS team to allow this rendering method everywhere?

  4. Patrick says:

    The IE9 font rendering is very similar to that of Example from

  5. Stefan Penner says:

    looks like your safari is suffering from a double bolded font. This happens when you have some corrupted fonts installed.

  6. aroon says:

    where is the test page source w/ resources?

  7. mswanson says:

    @Stefan: Good thought, so I just checked the fonts, and everything reports okay. Plus, all of these browsers are on the same machine with the extact same fonts, so if there was a problem with one, you'd think you'd see a similar problem with all of them. Plus, I've run many more test files than this, and the behavior is consistent.

    @aroon: The test files are part of an upcoming project, and while they will certainly be released, I can't release them yet. I realize that this isn't ideal, and I'd expect people to question the results. That's why I encourage everyone to try your own content with these browers to form your own opinions. As I said, the differences surprised even me.

    Last, I want to remind everyone that this is text that's rendered inside of an HTML5 canvas element. I think that's why we're seeing any significant differences at all.

  8. sara says:

    All the browsers in your example leave waaay too little space after a period.

  9. Smart Boy says:

    Are they any different? Why would anyone care about these?

  10. tack says:

    from whatwg:…/the-canvas-element.html

    "Only vector fonts should be used by the user agent; if a user agent were to use bitmap fonts then transformations would likely make the font look very ugly."

    These examples look just like what the whatwg spec version describes if one were to use a bitmapped font. It could be that IE9 Pre3 is handling the error very beautifully and for that it would deserve some serious cred. But care should be taken that the tests are run with vector fonts. Otherwise it's an unfair comparison.

    As for font rendering outside of canvas, I've noticed IE9 pre3 type rendering is much more beautiful than IE7, IE8 and Firefox 3.6.x. Great work!

  11. zzz says:

    Sara's right. The periods look off. Also the text is too bold even in the IE9 shot. Interestingly the period problem applies also to this text in this comment box in IE8. So it appears to be a font issue. The text in your blog looks fine.

  12. bf says:

    You have to compare browsers that will be in final versions at the time IE 9 final is going to be released. So you should be comparing IE9 preview to Firefox 4.0 b2 and Chrome 6.0 dev channel. Otherwise it would be like comparing 2010 car model of one brand to 2009 car model of another brand.

  13. mswanson says:

    @tack: You're correct. In this case, though, the artwork uses a vector-based OpenType font called Myriad Pro from Adobe:…/index.cfm. The results certainly vary from font to font, but the relative quality differences between browsers seem to remain the same.

    @bf: Unfortunately, nobody seems to agree which versions should be tested. Believe me…I've received many conflicting recommendations via e-mail. At the end of the day, though, I encourage everyone to distrust my results and to form their own conclusions.

  14. Mark Chambers says:

    I take it that's FFX, Chrome and Safari on Windows OS? I thought the text was rendered via Windows ClearType (OS font renderer) rather than being browser level font rendering. That's why Safari looked so crap (compared to Safari on Mac) when it was released for Windows.

    Anyway, those results for IE9 look amazing.

  15. Josh says:

    Cool stuff I guess, as a developer I'll be ecstatic just to have full HTML5/CSS3 support.  I hate the idea that something as simple as rounded corners isn't supported by IE8.  And while IE9 is supposed to be more standards compliant, I can't count on all (or even the majority) of end users upgrading any time soon.  So while focusing on using hardware to improve the text rendering is cool, I wish the IE development team would focus more on standards compliance.  I guess I'm just going to be stuck rounding my own corners for the next few years!

  16. HUan says:

    Maybe u should upload some snaps of OSX, which really means quality

  17. Paul Irish says:

    Your screenshots are all scaled to a non-native size and aspect ratio.

    So… they all look quite a bit worse than they should.

  18. mswanson says:

    @Paul: The screenshots are all at 100%, and–other than cropping–they've not been modified in any way. It's possible that your browser is automatically resizing them, and I've had a few poeple write me about this issue. If you're unsure, click each image for a full size version.

  19. iMadalin says:

    @Patrick you are right. The patched freetype2 in Ubuntu makes fonts look best in chrome/firefox/opera if using Ubuntu default desktop. You may experience some differences with Kubuntu default setup but can be easy fixed.

    try this to see some diferences in different operating systems: go to…/full, pick a font you would like to see results and select Browser Samples.

  20. Asad says:

    good news, no need to use javascript libraries to rerender fonts for atleast one browser

  21. Josiah Sprague says:

    My experience with IE9's text rendering has been completely different. I am on Windows 7 with ClearType enabled, and the browser seems to render text with very pixelated edges, sometimes even off-colored pixels around the text. I am excited that it seems to support font-weight fully, but that wont really matter if fonts render as poorly as the text on my website.

  22. sandy90 says:

    The quality of text rendering is good but performance of rendering is really bad. It's about 50% slower than Firefox and Chrome. Chrome 8 has a good quality / performance mix. I need to call fillText() 1000+ times with small amounts of text and I am seeing a big performance hit in IE9. Please, please, please improve performance of fillText() and other drawing functions. Thanks in advance! And thanks for making a great product.

Comments are closed.

Skip to main content