CSS Font Specs

by Joe Gillespie — Apr 1, 2002

There isn't a lot of choice when it comes to specifying fonts for a Web site, everybody sticks to the same tried and trusted ones.

The most common set of fonts are the various sans-serifs that can be found on any Windows or Mac machine plus a default 'sans-serif' spec that works on other platforms.

What isn't generally appreciated is that the order you put these fonts in can make quite a difference and there are a few less common fonts that you can use too. All the examples below are set at the same 12px font size.

Geneva, Arial, Helvetica, sans-serif

Arial, Geneva, Helvetica, sans-serif

Helvetica, Geneva, Arial, sans-serif

Of these, I prefer the first option. Where Geneva is installed (on Macs) it takes precedence. Geneva is a better screen font than Arial or Helvetica so it kicks-in first on Macs, and Windows users get Arial. Helvetica is not a very good font for Web use but it is the default sans-serif on some UNIX systems. If you are viewing this on a PC, they will all look the same as you are getting Arial in each case!

Verdana, Geneva, Arial, Helvetica, sans-serif

My favorite spec, and the one I use here on WPDFD, puts Verdana in front. Verdana is not quite so ubiquitous as Geneva and Arial but it's not very far behind and is a much better screen font than either of the other two because of its squarish shape and large x-height.

"Trebuchet MS", Geneva, Arial, Helvetica, sans-serif

Trebuchet MS is another possibility which is somewhere in-between traditional sans-serif and serif styles.

Times, "Times New Roman", serif

"Times New Roman", Times, serif

For some reason, somebody chose to make Times and its derivatives the default font for most Web browsers. Times is just about the worst font they could have chosen. Serif fonts, in general, don't work very well on a computer screen and Times in particular is difficult to render against the pixel grid of a screen. As you can see here, it is small and more difficult to read than most other fonts.

Georgia, "Times New Roman", Times, serif

Palatino, "Book Antiqua", Georgia, "Times New Roman", Times, serif

If you really must use a serif typeface, put one of these alternatives at the front of the list. Palatino and its clone, Book Antiqua, are fairly common on Mac and Windows machines and work pretty well on screens, but follow up with Georgia and Times as fail-safes.

Courier, "Courier New", Monaco, monospace

Then there are the monospace fonts like Courier, Courier New, Monaco etc. These are best used sparingly but are useful for quotations and special effects.

Finally, be aware that all these fonts can look quite different depending on the font-size you specify. They are not simple enlargements or reductions of the same thing, pixels don't allow that!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float