About Text Rendering in Windows Internet Explorer 9

This informational topic advises developers about how sub-pixel positioning and hardware-accelerated text affect the way that webpages are displayed in Windows Internet Explorer 9 across different display resolutions and zoom factors, and how text display has changed from previous versions of Windows Internet Explorer. This topic also might be of interest to enthusiasts who want to learn more about web typography and readability.

Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations. This topic contains the following sections:

• Font-rendering types in Windows
  • Bi-level rendering
  • Font smoothing
  • ClearType
• ClearType and readability
• Sub-pixel positioning
  • Whole-pixel positioning
  • Device-independent pixel units
  • Using sub-pixel positioning on your website
• Hardware acceleration
• Other new text features
• Related topics

Important  The text placement advances described in this article are available only in Internet Explorer 9 when the browser is in IE9 Standards mode. Pages displayed in compatibility modes—such as IE8 Standards mode, EmulateIE7 mode, IE5 (Quirks) mode, and so on—will display text by replicating the layout mechanism of the older versions of Internet Explorer. Be aware that this also means that most of the standards-based improvements in Internet Explorer 9 will be unavailable. For more information on compatibility modes, see Defining Document Compatibility.

Font-rendering types in Windows

Bi-level rendering

Bi-level type rendering is the most basic kind of rendering. It is also referred to as "black and white" or "aliased" rendering because outline fonts are rasterized using whole pixels in one of two colors—black (or whatever color the foreground color is) and white (or whatever color the background color is). No intermediate gray pixels are used to smooth the jagged diagonals and curves of each letter, but font hints (if present) are applied to produce more uniform and readable letter shapes. In some fonts, typically East Asian fonts, bi-level bitmaps might be included in the font to achieve similar results. This typically results in aliased, or "jagged" text.

For instance, the following is an example of bi-level rendering. Note the jagged appearance of each character. Prior to the Microsoft Plus! add-on for Windows 95, this was the only built-in rendering option for text in Windows.

Font smoothing

Font smoothing, also known as anti-aliasing or grayscale, uses shades of gray (or of whatever color the foreground color is) to make text appear smoother and less jagged.

For instance, the following is an example of traditional font smoothing in Windows. Note that each character is lined with different shades of gray pixels, which, when viewed from a distance, makes the characters appear smoother than a computer screen is capable of displaying. This was the default rendering in Windows starting with Windows 2000, and was designed primarily for viewing with cathode-ray tube (CRT) monitors.

ClearType

Microsoft ClearType was developed to take advantage of the transition from CRT monitors to liquid crystal displays (LCDs). It is a sub-pixel text-rendering technology developed to improve both the appearance of font rendering and reading performance on LCD screens, though CRT users have also noted an improvement.

Individual pixels on an LCD screen are each composed of three sub-pixels in red, green, and blue. ClearType uses these sub-pixels in its anti-aliasing—treating the sub-pixels as if they were full pixels—to improve resolution while minimizing the perception of color artifacts. The following image from the Microsoft typography website illustrates this technology by explicitly rendering the sub-pixels of an LCD screen.

ClearType was first released with the Microsoft Reader, and later shipped as an optional feature of Windows XP. At first, ClearType was part of Windows Graphics Device Interface (GDI). It has evolved over the years, and is now part of the Windows Presentation Foundation (WPF) and DirectWrite. For a history and overview of ClearType technology, see Engineering Changes to ClearType in Windows 7 on the Engineering Windows 7 blog. For a technical overview of ClearType from Microsoft Research, see Technical Overview of ClearType Filtering.

ClearType and readability

Research has shown that, for the vast majority of readers, ClearType improves readability better than simple font smoothing. However, there is no one "best" way to render text. Readability depends on the individual user's visual capabilities and personal preference.

From the early days of ClearType, users have been able to "fine-tune" ClearType on their displays to meet their individual preferences. Though ClearType was not enabled by default in Windows XP, users could turn it on and fine-tune it using either the ClearType Tuner PowerToy or the online ClearType tuner for Windows XP. ClearType is turned on by default in Windows Vista, and users can fine-tune it using either the aforementioned PowerToy or the online ClearType Tuner for Windows Vista.

With Windows 7, ClearType tuning is built into the operating system. In Control Panel, click Appearance and Personalization, and then under Fonts, click Adjust ClearType text.

Sub-pixel positioning

Development of ClearType did not stop with the initial version. The latest version of ClearType—sometimes called Natural ClearType—is used for text rendering in DirectWrite, which is the Microsoft DirectX API used to render text in Internet Explorer 9. DirectWrite is supported in Windows 7 and in Windows Vista Service Pack 2 (SP2) with the Platform Update for Windows Vista.

One significant improvement in the latest version of ClearType is sub-pixel positioning. While ClearType has always used the sub-pixels on LCD screens to anti-alias text, sub-pixel positioning takes the sub-pixels into account when positioning text on the screen. Contrasted with whole-pixel positioning, it enables more accurate text placement and truer adherence to the original design of the typeface. For web developers, sub-pixel positioning in Internet Explorer 9 means zoom- and resolution-independent text layout.

Whole-pixel positioning

In the original ClearType, font sizes, individual character widths, and line heights were all rounded to the nearest physical screen pixel. This is called whole-pixel positioning, and its effect is most noticeable when viewing smaller type. Windows Internet Explorer 8 and earlier render text using the original ClearType and whole-pixel positioning.

Though it doesn't necessarily give readers an unpleasant experience, the effect of whole-pixel positioning is most noticeable when zooming a webpage, or when viewing the same webpage on screens of different resolutions. When text placement is pixel-based, it will not remain constant from one zoom level to the next, because the number of available pixels has changed. This causes Internet Explorer 8 to refactor the text positioning, which changes the relative placement of characters and words.

For instance, the following diagram illustrates what happens between zoom levels when text is rendered using whole-pixel positioning in Internet Explorer 8. One would expect the text and its containing box at 125% to appear in the exact same relative positions to the 100% original. However, because the text is rendered using whole-pixel positioning, the line lengths have shortened and "pellentesque" now fits on the fifth line of the 125% sample, whereas at 100% it wrapped to the sixth.

The following diagram shows the 125% zoom view overlaid on top of the 100% zoom view stretched by 125%.

Every line in the 125% zoom view renders shorter than the scaled-up 100% zoom view. This is because the rounding errors from whole-pixel positioning are greater at smaller zoom factors. Attempts to compensate for the rounding errors would result in letters crashing together and generally uneven spacing, severely damaging the readability of the content.

With high-resolution displays becoming more prevalent all the time, fewer and fewer readers will be viewing webpages at the traditional 100%. This is of real concern to web designers and developers who rely on their webpages looking the same from user to user. They need a way to ensure that text is laid out predictably, regardless of the resolution of users' screens or the level of zoom that users have chosen.

Device-independent pixel units

Sub-pixel positioning is based on the idea of the device-independent pixel unit (DIP). This "virtual pixel" is 1/96th of an inch in size, and is a much more precise way to measure text placement than physical pixels. Each character, or glyph, is sized to these fractional pixels, which enables them to be placed on the screen relative to each other in the way the type designer originally intended, regardless of size or zoom level. This creates more natural word shapes and brings onscreen text closer to print quality.

Following is the same block of text, with a 125% zoom view overlaid on top of a 100% zoom view stretched by 125%.

The difference is indistinguishable. The sub-pixel widths at 100% scale uniformly to the 125% sub-pixel widths; therefore, the line breaks are also identical.

You can even see a difference with a small snippet of text. Following are two samples of the words "Internet Explorer 9" in 12-point Segoe UI, with default kerning (the space between characters), enlarged by 700% and overlaid with the same word zoomed by 700%. On the top is Internet Explorer 9, and on the bottom is Internet Explorer 8. At large font sizes, the type designer's original intention for kerning becomes clear. Even at such a small size, the benefits to sub-pixel positioning are obvious. (The image has been reduced in size to fit on this page.)

Using sub-pixel positioning on your website

Text on your webpage will lay out the exact same way across different display resolutions and zoom factors when measured and rendered using sub-pixel positioning. 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 webpage will not shift between different users' configurations.

For example, in Internet Explorer 8, if you specify a font size of 10 points, 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.

In Internet Explorer 9, you get exactly 10 points, or 13.333... pixels. This is slightly larger than what you got in Internet Explorer 8 and earlier. Similarly, 8-point text ends up a quarter of a point smaller in Internet Explorer 9. For more examples of text size differences between Internet Explorer 8 and Internet Explorer 9, see the post titled Sub-pixel Fonts in IE9 on the IE Team Blog.

To enjoy the benefits of sub-pixel positioning on your website, simply opt into IE9 mode. The best way to ensure that your page is displayed in IE9 mode is to use a standards !DOCTYPE directive and no X-UA-Compatible meta tag or HTTP header. The !DOCTYPE directive to invoke IE9 mode is the following.

<!DOCTYPE html>

Pages displayed in compatibility modes—such as IE8 mode, EmulateIE7 mode, IE5 mode, and so on—will display text using whole-pixel positioning. For more information on compatibility modes, see Defining Document Compatibility.

Hardware acceleration

In addition to superior text positioning, Internet Explorer 9 also features hardware-accelerated text. The job of rendering both text and graphics has been pushed off of the central processing unit (CPU) and onto the graphics processing unit (GPU). This is accomplished using both DirectWrite and Direct2D—part of the DirectX families of APIs—which enable Internet Explorer 9 to use the underlying hardware through Windows.

Today's GPUs provide many times the processing power of CPUs. The DirectX APIs in use in Internet Explorer 9 tap into the power of the GPU so that web developers and designers do not have to. That is, the same standards-based markup used for other browsers will just work faster in Internet Explorer 9. Web designers and developers do not have to do anything extra to take advantage of hardware acceleration. To see all the hardware-accelerated speed demonstrations, see the IE Test Drive site map.

Other new text features

Internet Explorer 9 contains several other new text- and font-related features. For instance, you can learn about the new capabilities of the @font-face rule plus support for the Web Open Font Format (WOFF) by reading How to Enhance Your Website's Type Design with CSS3.

Related topics

Other Resources

Internet Explorer 9 Guide for Developers

Internet Explorer 9 Test Drive

Spotlight on Internet Explorer