HTML and CSS Reference
In-Depth Information
FIGURE 3.3
A web-font exam-
ple with the
<h1>
set to 48px
in Firefox 8 on the Mac (top)
and in IE6 (bottom). The IE6
rendering, as well as getting
the sizing wrong so it looks a
lot smaller, is more jagged and
fuzzier looking.
WINDOWS RENDERING PROBLEMS
Another problem you'll come across with web fonts fairly frequently is that web-font
rendering can be pretty awful with certain fonts on certain browsers, especially
IE on Windows.
Windows uses a technology called ClearType, which uses subpixel rendering
to make font rendering appear smoother. If this option is not enabled, the font
will look worse on Windows, and it's not something you can control. That said,
this technology has been around forever (it is turned on by default in most mod-
ern Windows systems but not XP, unfortunately), but it still doesn't look appeal-
ing for larger font-size rendering compared to Apple's anti-aliasing on Mac OS X
(
Figure 3.3
). For more on this rendering problem, be sure to read Jon Tan's excellent
post “Display type and the raster wars”
(http://jontangerine.com/log/2008/11/
Some modern browsers do font anti-aliasing as well, which can help when
rendering. Chrome, IE, and Safari use the operating system default, whereas Firefox
seems to use its own font-smoothing system. Opera doesn't do any anti-aliasing
of its own.
Because there are so many variables, the only way to approach this rendering
problem is to do a decent amount of testing across Windows XP, Vista, Windows 7
and later versions, including the full gamut of modern browsers, as well as IE6-8.
See if the quality of the font rendering is acceptable to you and your clients, and
explain the potential problems with Windows.
