By Marko Dugonjić CHAPTER 9On Windows, we can improve how type appears on the screen by se-
lecting the appropriate font format. For IE6–8 — which use GDI (Windows
Graphic Device Interface) ClearType subpixel rendering — the only viable
options at smaller sizes are well-hinted^26 TrueType Web fonts. However,
there is one problem. GDI ClearType improves rendering only along the
horizontal axis, because red, green and blue subpixels are only available in
that direction. To better understand the effects of this, zoom into a screen-
shot of text and observe the orange and blue halo around a curved letter,
such as O. The halo is only present in the horizontal direction and is the
result of subpixel rendering.
On the vertical axis ClearType uses the most primitive black-and-
white rendering (instead of grayscale rendering, which is an interme-
diate anti-aliasing solution). The effect is easily noticed at the top and
bottom of curves in some letters, like o, p and b, where steps and jags
ruin the shape, especially when display type is set at a large size. As GDI
ClearType is dependent on good hinting, and well-hinted fonts are hard
to find, using tried and tested fonts such as Georgia or Verdana for body
copy combined with a Web font for headlines and subheads at larger
sizes makes perfect sense.
PostScript fonts — which use a different type of hinting — are better
for large sizes and oval shapes in IE6–8. Unlike TrueType fonts, Post-
Script fonts are not rendered with GDI ClearType, but instead fall back to
grayscale rendering, which yields better results in the vertical direction,
thereby improving the overall appearance of shapes. Some foundries and
services, such as JAF^27 and Typekit, deliver different formats depending on
the use of the typeface.
Self-hosted Web fonts can be embedded with two different formats
for IE6–8, using TrueType font files for content elements set at smaller
sizes (about 14px and below) and PostScript font files for elements set at
26 Hints are built-in instructions that ensure correct positioning of character shapes within the pixel grid.
27 http://justanotherfoundry.com/