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
Anonymous
July 26, 2010
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 goalAnonymous
July 27, 2010
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!Anonymous
July 28, 2010
Excellent. Now can you convince the OS team to allow this rendering method everywhere?Anonymous
July 28, 2010
The IE9 font rendering is very similar to that of X.org. Example from X.org: http://bit.ly/bqm9LIAnonymous
July 28, 2010
looks like your safari is suffering from a double bolded font. This happens when you have some corrupted fonts installed.Anonymous
July 28, 2010
where is the test page source w/ resources?Anonymous
July 28, 2010
@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.Anonymous
July 28, 2010
All the browsers in your example leave waaay too little space after a period.Anonymous
July 28, 2010
Are they any different? Why would anyone care about these?Anonymous
July 28, 2010
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!Anonymous
July 28, 2010
The comment has been removedAnonymous
July 28, 2010
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.Anonymous
July 28, 2010
@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.Anonymous
July 28, 2010
The comment has been removedAnonymous
July 28, 2010
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!Anonymous
July 29, 2010
Maybe u should upload some snaps of OSX, which really means qualityAnonymous
August 01, 2010
Your screenshots are all scaled to a non-native size and aspect ratio. So... they all look quite a bit worse than they should.Anonymous
August 02, 2010
@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.Anonymous
August 26, 2010
@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.Anonymous
September 08, 2010
good news, no need to use javascript libraries to rerender fonts for atleast one browserAnonymous
September 23, 2010
The comment has been removedAnonymous
December 20, 2010
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.