Modern browsers like Internet Explorer 10 and 9 introduced sub-pixel font positioning as part of its hardware-accelerated rendering of HTML5 content. That was an important step into the future as it enabled zoom-independent text metrics—an important characteristic when touch gestures like pinch-zoom are part of the browsing experience on Windows 8 touch-enabled devices. This article shows how easy it is to help your fonts look better across many browsers by declaring Standards Mode.
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).
Move to Standards Today
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:
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.
Be Ready for IE10
Fonts aren’t the only reason to move towards Standards. There are also other factors like 30% better performance. We hope these changes help you moved your site from 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 definitely thank you.
About the Author
Ted Johnson is a Program Manager Lead in the Internet Explorer team focusing on Web Graphics