|
Font Smoothing
[Krzysztof Szafranek]
Krzysztof Szafranek explains font smoothing on computer screens. Things like antialiasing and subpixel rendering get a thorough treatment. Subpixel rendering seems to be the method of choice as of 2009, with Windows Vista's version called ClearType and the Masc OS X version called Quartz. I quote some of his conclusions. Unfortunately, a designer cannot ensure that users will see HTML text exactly as designed. Rendering the whole page as an image or Flash file is not a sensible alternative due to performance, usability and accessibility concerns. What, then, can a designer do to ensure maximum legibility and a good look of a type? - Accept the reality. Right now there's no way to tell what settings your users have. Most likely, they have subpixel rendering on Mac OS X, no antialiasing at all on Windows XP with IE6 or Firefox, and ClearType in IE7, IE8 or Vista, but you can't be 100% sure. Needless to say, a website will look very different across all these environments.
- Assume the worst. When designing the page in Photoshop, check how does it looks without any text smoothing at all and with Smooth setting applied. Bear in mind that Smooth setting is not equal to standard antialiasing and there's no Photoshop equivalent whatsoever to subpixel rendering. As for 2008, no smoothing at all is a very prevalent option out there, as it's used by IE6 and Firefox on Windows XP with default settings.
- Use fonts designed for a screen. So called web fonts were designed with the screen in mind and its low-resolution pixel grid. The list includes Arial, Courier New, Georgia, Times New Roman and Verdana. While these fonts may look like over-exploited cliché and you may prefer Helvetica over Arial (like me), they're also the simplest way to achieve legibility for the widest audience. The old rule still holds: when in doubt, use Verdana.
- Beware of big type. Big font sizes are especially harmed by pixelation when font smoothing is disabled. If your audience is likely to use this setting, avoid big type.
- Test. Make sure the page is legible with font smoothing turned off, standard antialiasing (Windows) and subpixel rendering (ClearType on Windows, Quartz on Mac OS X). Change the typeface or its size when legibility is a problem. If you use Windows, you can check Mac rendering with Safari. On Mac, you will need to install Windows XP or Vista. If you're a web developer, you probably already did so.
- Beware of ClearType fonts. Windows Vista and MS Office 2007 features a collection of fonts designed especially for use with ClearType: Constantia, Corbel, Calibri, Cambria, Candara and Consolas. Apart from sharing unfortunate naming, they can be barely readable when font smoothing is disabled (figure 6). While they may become a long-awaited refreshment to web fonts, one should avoid them if subpixel rendering is not ensured (e.g., on Firefox on Windows XP).
- Wait for a future. CSS3 includes
font-smooth property, which will allow designers to control text smoothing. Unfortunately, as for 2008, no browser supports this property. Keep in mind that the whole issue may become irrelevant before this CSS property will be implemented. Computer displays are being constantly improved and one day they should have enough DPI's to display type in a perfectly legible way without smart tricks.
|
EXTERNAL LINKS
Font Smoothing
MyFonts search
Monotype search
Fontspring search
Google search
INTERNAL LINKS
Fonts and HTML ⦿
The Polish type scene ⦿
|
