Internet Explorer 9 introduced sub-pixel font positioning as part of its hardware-accelerated rendering of HTML5 content as described in this IEBlog post. That was an important step into the future as it enabled zoom-independent text metrics—an important characteristic when pinch-zoom is part of the browsing experience as it is in IE10 on Windows 8 touch-enabled devices.
As noted in that post 18 months ago, IE9’s legacy compatibility modes use whole-pixel text metrics. This compatibility-driven decision continues in IE10 with IE5 quirks, IE7 standards, and IE8 standards modes all running with whole-pixel font metrics; IE10 document modes Standards, Quirks, and IE9 Standards all use sub-pixel text metrics.
As a result, the text in sites running in legacy document modes 5, 7, and 8 does not scale smoothly when the page is zoomed by pinch-zoom, double-tap zoom, or when the page is auto-zoomed for display in Windows 8’s snap and fill views.
Zoom Example: Legacy vs. Standards Modes
Below are side-by-side comparisons showing text from a popular news site in 8 and 10 document modes at 100% and 150%. Note the especially poor letter spacing between some letters in the 150% 8 mode example (upper right).
| Default size (100%) | Optically zoomed to 150% | |
|---|---|---|
| 8 |
|
|
| 10 |
|
|
Move to Standards Today
The best fix for this behavior is to move your pages to IE9 or IE10 Standards mode. IE10 Compat Inspector is a valuable tool to help you migrate to IE9 or IE10 mode. Compat Inspector identifies potential issues and offers steps you can take to resolve them. In general, the HTML, CSS, and JavaScript markup and code you use with other browsers will work great in IE10 once any browser detection is replaced with feature detection and vendor-specific CSS prefixes are updated to include -ms- or unprefixed versions. Modernizr is a JavaScript library that can help with these issues.
Specifying Sub-pixel Metrics in Legacy Modes
If moving to standards-based markup is out-of-scope for your site at this time,
you may enable sub-pixel text metrics in legacy document modes using an HTTP header
or tag. Based on our testing, most sites will work fine with natural text metrics.
The format of the HTTP header is:
X-UA-TextLayoutMetrics: Natural
The syntax of the tag is:
<meta
http-equiv="X-UA-TextLayoutMetrics"
content="natural"
/>
Support for this HTTP header and tag are new in the final
release version of IE10 on Windows 8.
To improve the Windows 8 out-of-box experience for touch-enabled devices, we’ve
added a
Be Ready for IE10
Move your legacy document mode site to IE9’s default standards mode today and be ready for IE10 tomorrow. Visitors to your site using IE10 on Windows 8 will thank you.
—Ted Johnson, Program Manager Lead for Web Graphics