IE9’s Stunning Text Rendering Quality

IE9’s Stunning Text Rendering Quality

Rate This
  • Comments 22

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.

Chrome

Firefox

IE9

Safari

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?

Leave a Comment
  • Please add 3 and 7 and type the answer here:
  • Post
  • Maybe u should upload some snaps of OSX, which really means quality

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

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

  • @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.

  • @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 typekit.com/.../full, pick a font you would like to see results and select Browser Samples.

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

  • 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.

  • 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.

Page 2 of 2 (22 items) 12