Sub-pixel Fonts in IE9

Article
11/03/2010

Internet Explorer 9 introduces sub-pixel ClearType® font positioning as part of its hardware-accelerated rendering of HTML5 content. With IE9 now in beta, we’re getting a lot of feedback and questions about this feature. The bulk of this post describes issues Web developers should be aware of. But first, since all Windows users can benefit by tuning ClearType for their display, let’s start there.

Tuning ClearType

For best results, you should tune ClearType for your particular display hardware.

Windows 7 users can use the built-in ClearType tuner found in the Windows Control Panel under “Appearance and Personalization / Fonts / Adjust ClearType text” to adjust your ClearType settings. (Page 2 from this 4 page tuner is shown to the right.) Windows Vista users can use the online tuner from within Internet Explorer. (The online tuner must be used with Internet Explorer because it depends on an ActiveX control.)

ClearType and sub-pixel positioning work by exploiting certain hardware characteristics of LCD displays to deliver improved font display quality over traditional forms of font smoothing or anti-aliasing. This improves readability on color LCD displays with a digital interface, such as those in laptops and high-quality flat panel displays. Readability on CRT screens can also be somewhat improved.

What Sub-pixel Fonts Mean to Web Developers

Text in your Web page will lay out the exact same way across different display resolutions and zoom factors when measured and rendered using sub-pixel fonts. Sub-pixel ClearType font positioning offers the most accurate spacing of characters on screen, especially at small sizes where the difference between a sub-pixel and a whole pixel represents a significant proportion of glyph width. It allows text to be measured in ideal resolution space and rendered at its natural position. This means that line breaks in text on your Web page will not shift around between different users’ configurations.

ClearType font rendering is used in all IE9 document modes; sub-pixel positioning is used only in IE9’s default standards mode. IE9’s compatibility modes—Quirks, 7, and 8—use whole-pixel text metrics.

Older versions of Internet Explorer use whole-pixel text metrics in which font sizes, character widths, and line heights were all rounded to the nearest pixel. For example, with IE8 if you ask for a font size of 10pt, you get a 13 pixel font size, even though a mathematically accurate conversion of points to pixels yields a 13.333 pixel font size. The following table illustrates this for common font sizes specified in points.

Point size requested	Precise pixels	Rounded pixels	Point size you got in IE8	Font size change in IE9
8pt	10.67px	11px	8.25pt	Smaller
9pt	12	12px	9pt	None
10pt	13.33px	13px	9.75pt	Larger
11pt	14.67px	15px	11.25pt	Smaller
12pt	16.px	16px	12pt	None
14pt	18.67px	19px	14.25pt	Smaller
16pt	21.33px	21px	15.75pt	Larger
18pt	24px	24px	18pt	None

In IE9’s default standards mode, you get what you ask for: ask for 10pt, you get 10pt (13.33 pixels), slightly larger than what you got in IE8 and before. Similarly, 8pt ends up a quarter of a point smaller in IE9.

Sub-pixel versus Whole Pixel: Differences in Display

To understand what sub-pixel fonts do to your Web page, it’s important to understand how the older versions of Internet Explorer’s fonts work. The two tables below compare two font sizes of four different font families.

In the first table, the examples’ font-size and line-height are specified in pixels (12px and 16px, respectively). This means the same font size and line spacing is used in both IE9 and legacy modes. This isolates the differences to sub-pixel versus whole-pixel widths. You’ll notice that IE9’s sub-pixel widths generally display slightly narrower than the whole-pixel widths of the IE8 column. This is typical for normal weight fonts; bold weight fonts tend to display slightly wider. The difference is especially noticeable in the third row, font family Georgia.

IE9 Sub-pixel Widths	IE8 Whole Pixel Widths	Your Browser
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
font-size: 12px; line-height: 16px; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman

In the second set of examples, I’ve requested a font-size of 8pt and a line-height of 1.3em. As noted above, in prior versions of IE, an 8pt request actually results in an 11px, or 8.25pt, font. The differences below are a result of both sub-pixel effects: a smaller, more accurate font-size and sub-pixel widths on that smaller size.

IE9 Sub-pixel Sizes	IE8 Whole Pixel Sizes	Your Browser
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
font-size: 8pt; line-height: 1.3em; font-families (top to bottom): Verdana, Arial, Georgia, Times New Roman

If you examine the above two samples closely, you’ll notice that the cap- and x-height of the fonts are the same but that the character widths and line spacing differ. In the sub-pixel case, the character widths and line spacing matches the requested font exactly; in the whole pixel case, the font request is rounded.

The Effect on Zoom and Scaling

I noted above that text measured and rendered using sub-pixel techniques is both zoom- and resolution-independent. This is important as more and more laptops are shipping with high-resolution displays. With those displays, Internet Explorer defaults to 125% percent zoom.

The following diagram illustrates what happens in IE8 with whole-pixel widths. Notice that at 125%, “pellentesque” now fits on the fifth line whereas at 100% it wrapped to the sixth.

Comparison of IE8 text block at 100% and 125% zoom levels

This change of wrap is the result of a change in line lengths. The following diagram shows the 125% zoom view overlaid on top of the 100% zoom view stretched by 1.25x:

IE8 text blocks at 100% and 125% zoom levels overlaid

You can see that every line in the 125% view renders shorter than the scaled up 100% view. This is because the rounding errors from whole-pixel positioning are greater at smaller zoom factors.

Compare this to the same sample in IE9 using sub-pixel font positioning:

IE9 text blocks at 100% and 125% zoom levels overlaid

You can’t even see the difference. That’s because the sub-pixel widths at 100% scale uniformly to the 125% sub-pixel widths. This uniform scaling is a major benefit of sub-pixel font positioning. Also notice that in IE9, all the lines break the same whereas in IE8 the line breaks changed. This means that the layout of the Web page may change as users zoom in and out—a behavior not typically expected when developing a Web site.

Ready for the Future

IE9’s sub-pixel font sizes and character widths are an important step into the future. The IE9 examples above illustrate what we mean by zoom-, or scale-, independent text metrics. This is an important characteristic of text as we move toward higher resolution displays, new form factors where pinch-zoom is an essential part of the experience, and Web features such as SVG, HTML5 canvas, and CSS 2D Transforms that assume uniform scaling of text.

Web developers need to be aware that with sub-pixel font-sizes, what you ask for is what you get. While it has always been true that Web page designs should be resilient to minor differences in fonts and font rendering, the introduction of sub-pixel fonts makes that all the more important. The benefit is that the page design will look the same independent of device resolution, zooming, or scaling.

[IE9 implements sub-pixel positioning using Windows’ Direct2D and DirectWrite subsystems.]

—Ted Johnson, Program Manager Lead for Web Graphics

Edit 11/8 - correcting typos in the bottom two lines of the first table in the post.

Comments

Anonymous
November 03, 2010
I was expecting a "sorry, we messed up font smoothing, we'll fix it" post. Instead of this, you're happily messing up web pages using very bad font smoothing for small font sizes - and you're proud of it. Don't make the same mistake the WPF team did - ask them how they fixed it, and do it, too. I really like IE9, but if you don't fix that problem, I won't use it. White-on-black text in IE9 is nearly unreadable on my system (GeForce 8800 GTS) while current IE versions display it just fine. This was also the case with WPF apps, but they fixed it.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
The new font smoothing is great. Better font kerning makes text easier to read. It just needs some time to get used to.
Anonymous
November 03, 2010
I completely agree with 'Aethec'! If I disable this UnlearType nonsense in Windows, I expect it to be respected system-wide, especially by MSIE! There are no 'sub-pixels', please stop this fraud.
Anonymous
November 03, 2010
@Aethec : Microsoft messed up when they created cleartype some years ago. This "technology" is there to render black text colorful and any other text blurry.
Anonymous
November 03, 2010
I have to read this blog in Chrome to get through it, since whatever font size it specifies looks blurry in IE9, along with many other websites. But hey, it's accurate, which is clearly more important than, say, legibility. Thanks for making it easy for me to stick with other browsers.
Anonymous
November 03, 2010
Tried this current page both on Firefox 3.6.12 and IE9 Beta1. Clearly IE9 version looks much blurry, and for lack of a better word "worse". I do like ClearType on my LCD displays. It's much better than previous smoothing options in Windows. However the IE9 implementation is not as good, and is actually worse on the eyes.
Anonymous
November 03, 2010
Hello, is it safe to delete the IE8 folder in the windows folder if i don't want to restore ie8?
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
I agree you guys might be able to more accurately represent the size of the font with sub-pixel rendering, but it just looks horrible. I don't think anyone in their right mind would really say the IE9 sub-pixel rendering is clearer and easier to read than the IE8 whole-pixel from your example graphic above.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
@Michael, Thomas, Olivier >> Let me be clear about that : ClearType looks great, and works great on my system. IE9's implementation of DirectWrite + ClearType looks horrible. brad >> +65536. The IE team is either blind or too proud of their work to admit they messed it up.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
Opinions differ: I prefer the smoother spacing and smoother letters IE9 uses over the higher-contrast, larger IE8 rendering. And if the size bugs you; you just zoom everything up by 5% or so...
Anonymous
November 03, 2010
Looks fine on my computer, not seeing any of the stuff you guys are complaining about.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
I'd like to point out that (at least for me anyways) viewing this this blog in the IE9 beta it is displayed in the IE7 Compatibility view which as this blog post points out renders text with the IE8 style whole pixel rendering. Also for some reason viewing this post in Chrome or Safari the example images are shrunk slightly making them look even worse and in effect making the your browser text look even better.
Anonymous
November 03, 2010
Apart from very small font sizes, I find the new ClearType rendered text much better than what we get from IE8, Firefox or Chrome. That said, the fonts on this page in particular really help to bring out the weak point of the renderer: As it is more accurate, you really get what you ask for. In this case what the MSDN blog style asks for is small text with a font face that has very light glyphs and to top it off the text is rendered in gray, light gray, and light blue. This is asking for trouble with legibility. As @Aethec pointed out the WPF team had similar problems with legibility of small text and finally conceded by introducing a rendering mode that mimics the old GDI pixel aligned rendering. I think something similiar is essential for IE9. Many pages use small fonts for large bodies of text and those just look terrible with the non-aligned renderer. While one could argue that this is a problem with the styling of the particular pages, it is not realistic to expect millions of sites to change their styling to accomodate the new renderer of IE9 in a short time frame. You could either use pixel aligned rendering when glyph sizes get to small or provide a switch for putting the renderer in pixel aligned mode on a per page basis...
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
@JB >> Actually, WPF's text stack uses DirectWrite, and it looks decent (if you set TextOptions.TextRenderingMode to Display in your software, that is). But you're right - all this "sub-pixel" thing is useless unless you're using a ~300 DPI display. Not really common.
Anonymous
November 03, 2010
The IE9 screenshots on this page look bad in Chrome, but they look great in IE9 preview 6, which is strange, given that they are bitmaps! They look the same as the non-bitmap snippets of text, too. I think Chrome is resizing these bitmaps a small amount, which always makes bitmaps look bad.
Anonymous
November 03, 2010
It's interesting no one here talks about the problem Microsoft are trying to solve. The idea of fonts that scale exactly is a nobel one, and it would be great if a page could be zoomed to any size without the fonts shifting within their containing elements. However it seems clear that this is not a big problem for most people, whereas the tradeoff (fuzzy font rendering) negatively impacts the entire user experience (as it did with WPF). The IE team need to be very careful with this one.
Anonymous
November 03, 2010
The fact that IE8 behaves like all other current browsers on Windows and IE9 differs in font rendering, speaks for itself. Why break something that already works well for users?
Anonymous
November 03, 2010
I prefer auto switch based on the LCD screen, I have many LCD screens at work, we wrote a WPF application for one year and a half, and it looks good on one of the screens only and acceptable on the other screens. I will never ever use WPF again, not only because of the VS2010 bugs, or horrible performance, but because of the font problems too. The sub pixel font is maybe the future, but how many LCDs support it today?
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
I think it's funny to hear the comments of people threatening not to upgrade their browser over this. Fine, don't. Use Windows XP, for all we care. I'm not sure if any of you use and iPhone or iPad, but the reason you can double tap to zoom into a web page and it looks good is because those devices render fonts in this way. If you want IE to never work properly on devices, keep trying to persuade the IE team not to change. I'm sure Steve Jobs won't mind at all if Windows users demand that Windows and IE not make the necessary technical improvements to prepare for the future. You're already doing that with your boycotts of Windows Vista and Windows 7. Steve Jobs thanks you. I'm a Mac user now, but I honestly feel bad for the IE team. Congratulations on making this change, it's a good one. (I'll not tell your users that although the fonts look "blurry" at first, once you stop staring at individual characters, text is actually easier to read because of the correct spacing. It will just make them angry.)
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
Yes, that's an interesting point about how mobile Safari already uses this technology to excellent effect. There is no obvious trade-off in readability. So I guess the question is, if Apple can do it right, why can't Microsoft? Wow, just got a real sense of deja vu there...
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
One other thing, is this feature in the IE9 beta? Because I have cleartype enabled in the options, but it's rendering like IE8. I only saw how it's supposed to look because it works in preview 6.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
@A Hylian Human: This web page doesn't use the IE9 document mode, so it's not being rendered in the IE9 engine.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
Add: May be it is more related to Tahoma and 11px size --and especially bold state-- (which is most commonly used on many sites including Facebook)
Anonymous
November 03, 2010
This is one of the most awesome features of IE9 and Windows 7. I love the new font rendering introduced in IE9. Other browsers don't come close to IE9 in any regard. That's why IE has been and will continue to be my default browser for many many years to come.
Anonymous
November 03, 2010
I love the new font rendering. So smooth. It is the main reason I have switched from Chrome.
Anonymous
November 03, 2010
The new font rendering is awful and looks atrocious. I sincerely hope it gets fixed soon.
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
> his improves readability on color LCD displays with a digital interface What is the significance of "a digital interface"? Why wouldn't it work with a VGA cable?
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
WPF team has fixed the problem a while ago: blogs.msdn.com/.../wpf-4-0-text-stack-improvements.aspx blogs.msdn.com/.../additional-wpf-text-clarity-improvements.aspx IE team should ask them, how to do this
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
WPF blurry text all over again. Yay!!! Don't you people talk to each other?
Anonymous
November 03, 2010
The text in your sample is much easier to read in "IE8 Whole Pixel Widths" than in "IE9 Sub-pixel Widths". I love IE9 and all the things you have done it it, but not the font! The font on pages in IE9 mode is blurry :-( Scott Gu fixed it in VS2010 so you can to! :-) connect.microsoft.com/.../font-rendering-is-worse-in-ie9-than-ie8
Anonymous
November 03, 2010
+1 for taking my settings under Computer>Properties>Advanced System Settings>Visual Effects for "Smooth edges of screen fonts". I unchecked that option intentionally and would like all of the apps to follow that setting by not using any kind of font smoothing on any text they display. It troubles my eyes and gives me headaches after a while when I have to look at smoothed fonts. My eyes are quite good so that I see sharp contrasts. When some apps start to smooth away that contrast, then my brain seems busy in turning those portions to sharp contrasts which they can't because the portion is less sharp on the screen than it could be. Please follow the WPF team and make font smoothing an option which can be turned off. Please look for people in your team who have very good eye sight (mine was measured to be 120% two years ago) and let them use IE9 beta for a day and have them switch back and forth between IE9 and some other text showing app with font smoothing disabled. Let them use a standard LCD monitor like 20" 1600 x 1200 pixels or 23" 1920 x 1200 pixels so that they use a currently common DPI setting. Please give us that option in the next beta of IE9 and please make that beta available soon, like next week or so ;-)
Anonymous
November 03, 2010
Since anything below 14px is unreadable now – will IE 9 get what all other browsers already have for years: a minimum font size setting?
Anonymous
November 03, 2010
Since anything below 14px is unreadable now – will IE 9 get what all other browsers already have for years: a minimum font size setting?
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 03, 2010
The comment has been removed
Anonymous
November 04, 2010
I don't care how "pretty" you make it. Just let me disable it completely! ClearType makes my eyes bleed.
Anonymous
November 04, 2010
I've been using that kind of font rendering for all web sites for several months, since the DirectWrite support appeared in Firefox nightlies (and now I use Firefox 4 beta which uses DirectWrite for all web sites by default). When I tried IE9 beta, but eyes did hurt, but they hurt not on DirectWrite-rendered web sites, but on compatibility mode web sites which still use the old type of rendering. I remember that it took for me about two weeks to get used to the new text rendering approach, but since the moment when I did get used to it, the old way to render text simply doesn't work for me anymore. The uneven letter spacing of GDI makes my brain hurt just about the same as that photohopped picture of a person with two pairs of eyes. And by the way, since moving to the DirectWrite-enabled version of Firefox I have noticed that reading long texts (like books in electronic form) from the screen became much easier for my eyes, and now I even thing that probably I don't even need that eInk book reader that I was dreaming to purchase for the purpose of reading long texts on it. In short: stop complaining about it and simply let yourself get used to DirectWrite. This is the future, and you can't escape it. The old font rendering was holding back too many wonderful technologies that you will definitely appreciate in future (like proper DPI scaling and pinch-zoom). It should be made non-user-disableable, and only then everybody will get used to it (and learn how to tune their ClearType). Remember, Macs use the same type of text rendering since the advent of OS X, and does anyone complain about the readability of text on Macs?
Anonymous
November 04, 2010
@Michael, others: Yes, IE9 respects the system-wide setting for ClearType on/off. In Windows 7, this is the "Turn on ClearType" checkbox in the ClearType Text Tuner. If system-wide ClearType is off, IE9 still uses sub-pixel positioning but uses grayscale anti-aliasing instead of the color-based ClearType techniques.
Anonymous
November 04, 2010
Dude, you don't listen carefully, do you MS? Don't you realize that blurry text isn't good for human eyes? And now you argue that it's good by emphasizing more on technological reason than readability, health, and safety of users' eyes? That doesn't seem right at all to me. WPF has already made this same mistake since the first version (v3.0). But now, they have fixed it in the latest version (v4.0). Isn't it too much repeating the same mistake in IE9? I don't know exactly how Direct2D and DirectWrite work behind the scene. But since both WPF v4.0 and IE9 use it with the same terrible result, I begin to suspect that the actual problem lies in the Direct2D and DirectWrite themselves. CMIIW.
Anonymous
November 04, 2010
Maximilian, you don't get this issue right. Nobody wants to hurt eyes for the sake of technologies. Actually, ideal text rendering is BETTER FOR THE EYES, it just needs some time for your brain to adapt so your eyes can start receiving that benefit.
Anonymous
November 04, 2010
@Ted Johnson: Is it too much to ask for a "Disable sub-pixel positioning" checkbox in IE's options? @Linker: WPF's TextOptions.TextRenderingMode has two values: Display and Ideal. In other words, "what users want" and "how it should be if we had screens from the future". And the extremely bold white-on-black text is not better for the eyes - my eyes hurt each time I visit a page with white-on-black text in IE9...
Anonymous
November 04, 2010
Have you people even seen a Mac?
Anonymous
November 04, 2010
@Linker: "Actually, ideal text rendering is BETTER FOR THE EYES, it just needs some time for your brain to adapt so your eyes can start receiving that benefit." Then I'd like to read some researchs that PROVES it is INDEED BETTER FOR THE EYES. Please, show me such researchs if you think so. Or, this could be one of half-baked technology done with poor researchs. I begin to think that I prefer proofs and evidences to merely arguments or opinions. Also, you assume that everyone brains CAN adapt to such condition. How could you think so? Again, prove me with ACTUAL researchs. Based on my experiences with WPF since 2006 until before fixed in 2010, my brain and my eyes still decide that it has blurry text. So what is that? The brain failed to adapt?
Anonymous
November 04, 2010
@Ted Johnson: +1 for Aethecs question: Is it too much to ask for a "Disable sub-pixel positioning" checkbox in IE's options? As suggested before it might be helpful if one could toggle that setting on a per page basis but still define what the default for a new page should be. That way you can choose if you primarily focus on text readability or page layout and switch that preference if needed. @Linker: that might be true if I activated font smoothing and ClearType on the OS level and all apps would show their text with smoothed text (1) and if I stop looking at things (especially text) in the real, the analog world. Text in books and news papers is sharp and not smoothed. As I do switch between looking at my LCD and looking at real things my brain cannot be re-trained by looking only at smoothed texts until it thinks smoothed font is normal. I have two colleagues who like font smoothing and guess what: both wear glasses. Let me repeat myself: people with less good eyes don't see problems with text smoothing because text to them always looks a bit unsharp no matter if on a monitor or on paper. But do we really all need to ruin our eyes to be IE9 compatible? (1) I tried that with different ClearType settings on my Win7 and went back to no smoothing, which btw is not respected in several Control Panel pages and in the new Windows Explorer toolbar and tooltip texts. I do not like that ignorance to my settings either but luckily I hardly need to look at those text parts, so that ignorance is easier to ignore than text displayed in my web browser ;-)
Anonymous
November 04, 2010
SvenC, I have actually migrated to DirectWrite for all my web browsing for several months (by using pre-release builds of Firefox), so I'm not speaking of something that is untested and theoretical. If I say that one can adapt to it, I say it because I have already did that myself. All my web browsing uses DirectWrite, but all my other Windows apps use GDI. I assure you that I have no problems with that. UI elements and contents of web pages are perceived as different medias. But I must say while Firefox uses DirectWrite for all web pages, IE9 turns it off for quirks and compatibility mode web sites. This can impede the process of adaptation to DirectWrite. I think IE9 should use DirectWrite for the Quirks mode as well, because the Quirks mode is not transitional and will probably stay around forever. Who of those who criticize this decision have actually used DirectWrite for all their browsing for several months, like I did? Why criticize something that you haven't properly tried?
Anonymous
November 04, 2010
Linker, humans can force themselves to all kind of migrations and changes. But in addition humans can ask themselves what kind of changes seem helpful. Some of us didn't miss sub-pixel text rendering so far and don't like it forced on them.
Anonymous
November 04, 2010
@Linker: Microsoft cannot change the Quirks Mode's behavior. It must emulate old versions perfectly, even if this includes bugs, missing features, badly implemented features, and so on.
Anonymous
November 04, 2010
Are you serious? - you went and botched this up even more? - Aghhh! ClearType (aka FuzzyType) was a flop - if I wanted blury, bolded rainbow text I'd ask for it! - I have the setting turned off in Windows AND in MSIE already.. for ALL my systems whether laptops, CRT's or LCD's, and especially for my TV. As other's mentioned, give up on the "sub-pixel" PR crud... the display won't divide pixels for you so stop claiming it can. There is a reason why ALL my displays have an "optimal, NATIVE resolution". Now although I agree that the new FuzzyType is clearer than before because it no longer makes text BOLD to overcome the fact that there are no sub-pixels (well done) but at small font sizes it is still bold, and at all resolutions it is still blurry/fuzzy and produces horrible rainbowing when viewing black text on white (or vica versa). Please tell me that there is an option to FULLY disable FuzzyType in Windows 7/IE9 as I don't have enough vision coverage with my medical plan at work to cover getting new glasses when the eye-strain kicks in again (I had wicked bad headaches when I first tried to use ClearType... thus I had to disable it fully) Most of all, the biggest issue with ClearType is that you are actually changing the color of the text... there is no 100% black text with FuzzyType turned on... only 85% black which doesn't look right, especially when mixed with a 100% black image.
Anonymous
November 04, 2010
This is not an okay way to render text: http://imgur.com/FcMqR.gif
Anonymous
November 04, 2010
"Microsoft cannot change the Quirks Mode's behavior" - I think it can, because this is just what Mozilla is doing in Firefox 4, and I see no problems with that (and I browse A LOT of web sites every day in my Firefox 4 beta).
Anonymous
November 04, 2010
@Linker: IE's quirks mode != Firefox's quirks mode.
Anonymous
November 04, 2010
Please ensure that cleartype can be fully and completely disabled in IE9 - it makes my eyes bleed, and as @factor noted -http://imgur.com/FcMqR.gif there is obviously still major issues with this font rendering.
Anonymous
November 04, 2010
The comment has been removed
Anonymous
November 04, 2010
What about fonts with bitmaps for smaller sizes? Will final IE9 support this? Also, what about the new Opentype font size features?
Anonymous
November 04, 2010
@Mac: »@Aethec: re "all this "sub-pixel" thing is useless unless you're using a ~300 DPI display", actually it's quite the opposite. It's with low resolution displays that sub-pixel rendering is more useful« True, but there is also a lower DPI border for sub-pixel-rendering which differs from person to person. If let's say a person has a 19" display with 1280x1024 (those were quite popular half a century ago) then he has just 87 DPI and this is where sub-pixel rendering might be annoying for a person with good sight. I sincerely hope the "retina"-DPI future will come soon so we can bury all this anti-aliasing hackery once and for all…
Anonymous
November 05, 2010
I love this! It's really going to speed IE's demise!
Anonymous
November 05, 2010
One little note for the folks suspecting that the images are being zoomed. There's a CSS rule in place that limits the width of the images to the width of the column they reside in. That column resizes as you resize the browser, so you need to make sure your browser window is wide enough so that the images are not being shrunk down. This only works in browsers that support max-width. So when judging the samples, widen your browser window until the samples stop growing.
Anonymous
November 05, 2010
Here's another guy to say IE Team failed again (after the bad UI given to IE9), now won't improve text rendering. This text rendering is completely broken, there is no good Cleartype configuration to make it better, and IE9 doesn't follow Windows' Cleartype configuration. It seems that these lazy developers couldn't code a fix for that, and then they need to justify it as being an evolution! No way, really no.
Anonymous
November 05, 2010
I'm not exactly sure what the point of ClearType is? I'm seeing comments about it attempting to deal with small fonts...how about people stop using font-size: 4px? I think Safari 3.1 introduced something like this where their fonts were all undeniably bold and then they thankfully recanted. I had to use text-shadow to make the not-bold fonts look only half-bold which was obnoxious. I just don't like fuzzy looking fonts...maybe it's better suited for people whose eyes can't focus as well as others or something? In the very least I think there should be some sort of CSS property (yeah proprietary) to disable this as clearly a lot of web designers would use it...or maybe a "font-smoothing" CSS3 property? I think people should just stick to larger more legible font-sizes as that would probably negate most of the problems. Seriously, 1080 HD screens are like hovering around the $160 mark now.
Anonymous
November 06, 2010
The comment has been removed
Anonymous
November 06, 2010
Sorry, guys. Both pictures from IE8 and IE9 look horrible (IE9 a bit more). Why don't you just try to license FreeType? Those guys got it right and the rendering is absolutely superior to the things Microsoft and Apple still try to achieve.
Anonymous
November 06, 2010
We have yet to hear from Microsoft that the ClearType settings in Windows will be fully honored yet. Please state in 100% clear and no uncertain terms that ClearType settings in IE9 will observe and obey those set in Windows. e.g. if I have turned off ClearType like so many people do because the blurry bold multi-color text hurts our eyes - that IE9 will not inflict pain on end users by forcing them to use ClearType when they have absolutely no desire whatsoever to use it! More importantly, not only will they not be forced, but IE9 will most definately not come with ClearType turned on by default!!!!!!!! (absolute must!!!) thanks, looking forward to a public, quotable reference on this.
Anonymous
November 07, 2010
No idea what people are whining about, IE9 easily has the nicest font rendering of any browser right now, don't listen to the haters.
Anonymous
November 07, 2010
Please do not confuse ClearType and font smoothing. Font smoothing can be done with ClearType or gray scale anti aliasing or some other algorithms. While tuned ClearType might look better than gray scale anti aliasing, I prefer to turn of font smoothing all together. I disabled font smoothing on Win7 (Start > type "view advanced" and select "view advanced system settings" > Performance Settings > unchecked "Smooth edges of screen fonts". And that setting is what I would like to see respected in all apps including IE9.
Anonymous
November 08, 2010
@Raffi - sorry to hear that your vision is poor - those of us with good/great eyesight find ClearType to be atrocious.
Anonymous
November 08, 2010
The comment has been removed
Anonymous
November 08, 2010
The comment has been removed
Anonymous
November 08, 2010
The comment has been removed
Anonymous
November 09, 2010
! IE9 TEAM CAUGHT WITH THEIR PANTS DOWN !

The "IE8 Whole Pixel Sizes" in both sets has actually non-default ClearType setting that makes it look as if ClearType is more bold than it is. I have a clean Windows 7 install on which CT tuner has never been ran. If you need proof: Grab clean Windows install, open this in IE8, grab screenshot, open in paint, use color picked on the "your browser" and same letter pixel on "IE8 Whole Pixel Sizes" .. then open the "edit colors" to see the actual pixel values, they should match* but do not! The default untuned GDI rendering is lighter and sharper in appearance than what IE team wants you to believe. I have IE8 and IE9 Preview 6 installed so doing comparisons to see which is really better is easy, rather than the method of "lets get used to the inferior rendering and forget how it could look like" which conveniently happens if you install the Beta that's harder to side-by-side install with IE8. Also ask yourself WHY did WPF team spend all that effort to go back to imitate GDI at last minute before RTM? Because this new tech used in WPF/IE9 works wonders for readability on current hardware?

they should match because average user doesn't tune the CT to make all text bold (more saturation, less luminance in the sub pixels in the "IE8 Whole Pixel Sizes" sample)
Anonymous
November 09, 2010
Ok, for those who have trouble noticing how bad IE9 rendering is. I cropped the examples from this blog, did comparison of IE8 normal rendering vs IE8 poorly-tuned-rendering on this blog vs IE9 sub-pixel-position-fuzzy-wpf-before-fixes-like-rendering vnena.fileave.com/.../IE9_vs_IE8_vs_IE8_from_IE_BLOG.zip There you have it. Unzip, click Preview (Opens in Windows Photo Viewer) and then flip through them with left+right arrow keys in both direction. Note: The 2 examples in the bottom half look quite acceptable atleast in that particular size. So if, based on that example, 50% of the text in the web in IE9 is readable and rest is fuzzy, does that make IE9 the better browser that people want to upgrade to and devs want to develop for?
Anonymous
November 09, 2010
The comment has been removed
Anonymous
November 09, 2010
The comment has been removed
Anonymous
November 10, 2010
@Klimax - 2) no, you cannot turn off font smoothing. You can only "choose" between smooting with ClearType or gray scale anti aliasing. At least when not in IE8 compatiblity mode. Not sure how that affects smoothing and cannot test anymore as I reverted to IE8 - for one much explained reason ;-)
Anonymous
November 11, 2010
and text-shadow?????????????????????????!!
Anonymous
November 11, 2010
After screen resolution exceeds the photoreceptor density threshold of the human retina wont this will eventually become moot? Curcio, C.A., K.R. Sloan, R.E. Kalina & A.E. Hendrickson (1990) Human photoreceptor topography. Journal of Comparative Neurology. 292, 497-523. prometheus.med.utah.edu/.../apple-retina-display
Anonymous
November 12, 2010
@Christopher Dean - yes you are correct - this will become a moot point when displays become that awesome. However back in 2010/2011 we don't have such displays available to the masses (and or Video Processing to handle it) therefore it most certainly does matter! That's why there are so many complaints in this thread. Since many of us have good vision (or corrective lenses/eyewear) to fix it - we do see a horrible blur effect on text, causing eye strain. All we are asking is that ClearType by default observe the Windows setting so that if we've specifically turned it off, it remain that way.
Anonymous
November 14, 2010
The comment has been removed
Anonymous
November 14, 2010
@gary My vision is fine, in fact with some effort I can count the individual pixels of a character from a comfortable distance when using whole pixel rendering. To me IE9's rendering is far superior and I simply have no sympathy for anyone who thinks otherwise.
Anonymous
November 14, 2010
well said @Will - it is amazing that no one from Microsoft has stepped forward on this blog to give feedback on all the negative feelings towards clear type and the issues it causes. I feel sorry for @anonymous above that can (like me) see all the pixels in the output on screen yet s/he somehow isn't bothered by the font-smoothing applied to the characters with clear type turned on. I just find it really aggravating that if I turn on clear type I have to spend all my time wincing my eyes to try and re-focus the blurry text. I'm sure that this is massively unhealthy for my eyes thus I turned it off ASAP. I will not be impressed if this is the default setting in IE9 and I will be fuming mad if I can't turn it off easily..... it should obey my Windows setting right from the install. Dear Microsoft; can you please clarify what the intentions of IE9 are when it releases regarding ClearType? Will it follow the settings in Windows? Will it be turned off by default? etc.

Share via