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.

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?