The tasteful use of fonts on a Web site conveys a professional image, whereas wacky and tacky font usage does quite the opposite. Depending on the type of site you're creating, you'll want to go one way or the other. But, in most cases, tastefulness is what you'll be looking for.

One Serif, One Sans-Serif

An oft-cited rule is to use one serif font and one sans-serif font in graphic design. There may be good reason to break this rule sometimes on the Web, but it's nonetheless a good place to start.

First, you need to know the difference between serif and sans-serif. If you've used a word processor in the last 10 years, you've seen them both, but maybe without knowing it:

• A serif font has small decorative lines on each letter, and looks somewhat old-fashioned. Serif fonts are typically used for newspaper stories and novels. Times New Roman and Georgia are serif fonts. Serif fonts lead the eye from letter to letter, word to word, and are best used as paragraph text.
• A sans-serif font doesn't have serifs (for those of you spared the joys of learning French, note that sans means without) and creates a somewhat more modern look. Examples include Arial, Helvetica, and Verdana.

Sans-serif fonts are best used for short phrases or groups of text, such as headers or links. Serif fonts tend to be used for paragraphs. Figure 2-5 gives an example of how this would look on a Web page.

Figure 2-5: Example of serif and sans-serif fonts on a Web site.

As is typical on the Web, you can break the rules a little bit. Using Arial for both headers and text would be fine as long as the headers are sufficiently larger than the text (to clearly differentiate them). It might not be as visually interesting as mixing it up a bit more, though.

When You Need a Third Style

On the Web, there are page elements other than just headers and text, such as site navigation, sidebars, and/or pop-up windows. You want to use another font, or at least another style, to differentiate these areas from the rest of the page.

How to do this is partly a judgment call, but a good rule to remember is, if you're going to make it different, be sure to make it significantly different rather than slightly different. For example, if you're creating a sidebar for the style in Figure 2-5, you could make it Arial, but bold and green.

You can also differentiate special areas from the rest of the page using background colors.

Size Matters

Another case in which to keep the make-it-significantly-different rule in mind is when creating various levels of headers. Your second-level header should be sufficiently smaller than your top-level header so users can notice the difference. When deciding on heading sizes, view your page in several different browsers to see whether it works.

Now you know how to use colors and fonts on your Web site. The next step is to add images to enhance your message. Pick up some tips for using images wisely on your Web site in the next section.