home button
Johann Sparkling 96pt

Back to the top

Web-Safe Fonts
introduction

Start here for web-safe font information

Typographic control in web page layout is getting better than ever, what with CSS’s ability to specify leading, case and so on. But there’s an area that remains a challenge for any type-aware designer: specifying type faces. In HTML and CSS, you just ask the web browser to show type in a particular font. If the person viewing your site doesn’t have that typeface they won’t see the text as you planned.

In the absence of specific instructions browsers will default to Times New Roman, hardly a good choice for on-screen typographic setting. When it comes to the options normally provided we’re not much better off. In the serif corner we have Times New Roman and Georgia, while in the sans corner there’s Arial, Helvetica, Verdana and Trebuchet MS. Add the monospace Courier and you have what’s regarded as the list of ‘web-safe’ fonts; typefaces assumed to be on almost everyone’s computers, whether Mac or PC.

Because you can never be sure if a font’s going to be available on someone’s computer font families are used. These are prioritised lists of font names used instead of a single typeface name, and the browser uses the first one that’s available on the end user’s computer. But as typical font family lists show, these still stick to the web-safe options along with generic category names such as serif, sans-serif, monospaced, and so on. Impressed? No, we didn’t think so. This is a poor showing for those used to having to use font management utilities to keep their type libraries in check.

Some web designers will try setting portions of text as bitmap graphics in order to use the typefaces they prefer. This works, but it is not an approach that’s generally very useful as the end result is nothing but a picture, not real text. The same goes for setting text in Flash SWF files. The results are not friendly to search engines or those with accessibility needs, they aren’t able to adjust to browser window resizing, and they compromise print quality as well.

But with some mental flexibility and lateral thinking you can put the font family concept to work, specifying a range of custom fonts that just might be on visitor’s computers along with the more regular fall-back ones for the more typeface-challenged. There’s no reliable way to embed actual font outline data in web pages and there may never be, but this shouldn’t prevent you from exploiting your knowledge of type to get more from your layouts when the fonts are available. It isn’t perfect, but this can get you close to having your cake and eating it too.