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 5 and 7 and type the answer here:
  • Post
  • 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

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

    Thanks!

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

  • The IE9 font rendering is very similar to that of X.org. Example from X.org: http://bit.ly/bqm9LI

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

  • where is the test page source w/ resources?

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

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

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

  • from whatwg:

    www.whatwg.org/.../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!

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

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

  • @tack: You're correct. In this case, though, the artwork uses a vector-based OpenType font called Myriad Pro from Adobe: store1.adobe.com/.../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.

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

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

Page 1 of 2 (22 items) 12