Sub-pixel Fonts in IE9

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 ClearTypeScreen shot of Windows 7 ClearType tuner

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 WidthsIE8 Whole Pixel WidthsYour Browser
IE9 12px/16px Verdana font sample IE8 12px/16px Verdana font sample
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.
IE9 12px/16px Arial font sample IE8 12px/16px Arial font sample
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.
IE9 12px/16px Georgia font sample IE8 12px/16px Georgia font sample
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.
IE9 12px/16px Times New Roman font sample IE8 12px/16px Times New Roman font sample
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 SizesIE8 Whole Pixel SizesYour Browser
IE9 8pt/1.3em Verdana font sample IE8 8pt/1.3em Verdana font sample
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.
IE9 8pt/1.3em Arial font sample IE8 8pt/1.3em Arial font sample
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.
IE9 8pt/1.3em Georgia font sample IE8 8pt/1.3em Georgia font sample
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.
IE9 8pt/1.3em Times New Roman font sample IE8 8pt/1.3em Times New Roman font sample
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.