November 3rd, 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.
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|
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.
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.
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:
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:
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.
—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.