Font Choices in designing web

When it comes to fonts on the web, we’re limited. You must design for the most common fonts that are widely available across operating systems. It doesn’t mean you shouldn’t spend time really considering what your options are.

I think about the type of information the site holds, what’s expected along with what’s in vogue right now. I then consider my fonts and mix them carefully. I usually think in terms of headers, secondary fonts, block-quotes, specialty text (like depictingcode), and paragraph page text. You can use any fonts you want as long as you think there’s a really good chance that others will have the same font on their computers. Here is a list of the basic fonts I mix and match from and why:

San-Serif Fonts: These fonts don’t contain ’serifs’ (hence the name san-serif). Serifs are the little ‘feet’ you see on the appendages of type faces. San-Serif fonts are usually considered more new and modern.

Verdana: This font is common on every platform and was specifically designed for web reading at smaller web sizes. When you really want to use a san-serif font for your body text, this is your best bet.

(There was a great article in The New Yorker in 2007 about the designer of this font.)

verdana, sans-serif

Arial and Helvetica: Common on every platform. A little tame. Great for clean headlines, but a bit hard to read at smaller font sizes.

Arial and Helvetica

Trebuchet: Fairly common nowadays, and a pretty popular font on the ‘web 2.0′ styled sites. Clean like Arial with a lot more character. It reads a little better at smaller sizes than Arial. This was originally a Microsoft font, so sometimes it doesn’t appear in older Mac or Linux OSs (Verdana is a MS font too, originally released with IE 3, but its design for screen readability got it opted quickly by other OSs).

Trebuchet

Century Gothic: Fairly common. Clean and round, a nice break from the norm. Reads terribly at small sizes though. Use for headings only.

Century Gothic

Comic Sans Serif: Another MS font, but common on all platforms. Fun and friendly, based on traditional comic book hand lettering. I’ve never been able to use it in a design (I do try from time to time, and feel it’s ‘hokey’), but I always admire when it’s used well in site design (See Chapter 9 for a great example).

Comic Sans Serif

Serif Fonts: These fonts are considered more traditional, or ‘bookish’, as serif fonts were designed specifically to read well in print. The serifs (those ‘little feet’) on the appendages of the letters form subtle lines for your eyes to follow.

Times New Roman and Times: Very common on all platforms; one of the most common serif fonts. Comes off very traditional, professional, and/or serious.

Times New Roman and Times

Georgia: Pretty common, again predominately a Microsoft font. I feel it has a lot of character, nice serifs, and a big and fat body. Like Verdana, Georgia was specifically designed for on-screen reading for any size. Comes off professional, but not quite as serious as Times New Roman.

Georgia

Century Schoolbook: Pretty common. Similar to Georgia, just not as ‘fat’.

Century Schoolbook

Courier New: This is a mono-spaced font, based on the old typewriters and often what your HTML and text editor prefers to display (the point of mono-type is that the characters don’t merge together, so it’s easier to see your syntax). As a result of that association, I usually reserve this font for presenting code snippets or technical definitions within my designs.

Courier New