CSS Available Fonts


Arguably the most annoying problem designers face with regard to the Web is the poor choice of fonts available. This boils down to the fact that the only fonts that can be specified are the ones certain to be installed on every computer used to view the web site. For example, just because you have Sharktooth Italicized installed on your computer doesn’t mean everyone elsehas. Specify it in your style sheet, and the text on your web site, as viewed on your computer, will be rendered with it, but very few other users will have such an obscure font installed and available to their browser. The more obscure the font you specify, the more likely it is that you’ll run into trouble.

Web-Safe Fonts

Always, always think about clarity and legibility here. Choose fonts that look good not only on your chosen platform (most look fabulous on a Mac), but also on others. How legible is your 11-pixel Times text over on a colleague’s PC? What if that colleague has/hasn’t enabled ClearType font smoothing? What if you need to render some information in italics? Does your chosen font cope well in such circumstances?

Let’s look at the web-safe fonts available at the time of writing, illustrated in blow, and consider why some might be more useful than others, and what kind of web sites they might suit.

Verdana

Verdana is super-legible, and copes with smaller font sizes very well indeed. It is devoid of extraneous curly bits (technically speaking this means it is a sans serif font—that is, without serifs), and I’ll bet my laptop that 99.9% of web users will have it installed on their machine, especially as it comes bundled with Internet Explorer. Use Verdana for a government or blue chip business web site.

Georgia

Georgia is a serif typeface (so it does have curly bits). It is a web designer’s favorite because unlike most serif fonts, Georgia has been designed especially for the screen. Its italics, which are unusually clear and legible on screen, are a major bonus. Use Georgia for a historical information site, such as a web site about World War II.

Times New Roman

If a font has Times in the name, you can assume it will give the impression of a newspaper typeface, although this is not always a good thing on screen. Another serif font, Times New Roman is intended for PC platforms, and is hinted especially for the screen. That said, many would argue that Georgia supersedes it if you want a particularly legible serif font for your web site.

Times

Times is the Mac equivalent to Times New Roman, but is not designed specifically for screen. However, Macs being Macs, it’ll still render pretty well on that platform. Use Times New Roman or Times for a financial institution’s web site.

Arial

Like Verdana, Arial is another sans serif font that lends a more modern feel to web sites. It is widely used, but doesn’t work very well at lower font sizes, and there isn’t much default space between the characters. Use Arial for a pretentious museum’s web site.

Helvetica

The closest web font to Arial for the Mac, Helvetica is another sans serif font regarded as a superstar typeface in the real world, but faring not so well on screen. Use Helvetica for a new media company’s web site.

Tahoma

With so little choice for web designers, you’d think there would at least be some variety on the menu, but sadly there isn’t. Tahoma resides on any computer that has Microsoft Office installed on it, and is thus available to most of your visitors, but it bears an uncanny resemblance to Verdana, and is therefore used rarely. Use Tahoma for a business web site, or alternatively just use Verdana.

Comic Sans MS

You want variety? Well, this is pretty wild. I say wild, but really Comic Sans is a bit of a joke. It’s rare that you’ll come across a design that demands its text be rendered in this very informal typeface. It is unfortunate that any web sites using Comic Sans tend to have that “my first web site” feel about them, and it is best reserved for unfunny jokes or printable party invitations. Use it if you wish, but steer clear if you are looking to present even a tiny amount of professionalism. Use Comic Sans for your little sister’s web site about ponies.

Trebuchet

A great screen font, designed originally at a smaller size than most fonts, which usually means a font that has less unique subtleties. That said, Trebuchet manages to convey a contemporary feel in a limited space, and is a stylish choice that ships with copies of Internet Explorer. Use Trebuchet for your personal portfolio.

Courier

Courier is a monospaced font, meaning every character is the same width as you would find on a traditional typewriter, so they line up vertically as well as horizontally. Courier New is the most common monospaced font but can appear faint when anti-aliased at smaller sizes. Alternatives are Lucida Console (Windows), American Typewriter (Mac), and Monaco (Mac). Use Courier or its alternatives to display code or simulate typewriter text.