Dress Up Your Text: The Ins and Outs of Web Fonts

How you use fonts on a web site can help users understand your content and show off your professional design skills. You can also get into trouble if you go overboard.

I learned many years ago that what I thought was a cool font for a project was actually a font used for fashion magazines. My editor politely pointed this out to me, but had she not, the page would have given a weird impression. Needless to say, I was not writing for a fashion magazine, it was a medical software company. On a web site, you have to think about fonts in two ways. Those that are regular text (those that can be selected using the mouse) and those turned into graphics.

The three most popular selectable body text fonts are Verdana, Geneva, and Times Roman. These are very safe for use in your content areas. Arial is commonly used in header areas. It is best to have no more than three different fonts on your site. More than three and your text will look disjointed and inconsistent. Your headers and subhead are generally sans-serif fonts (serifs are those little swirls on the edges of letters). Serif fonts (like Times Roman) are, as mentioned above, best used for body text.

When designing the text on your web page, you can tell the browser what fonts you would like it to use (when using a cascading style sheet, the style sheet file indicates what fonts you want to display). But remember the fonts you want to use on a web page are limited to those * resident * on the person's computer. The browser can only work with the fonts it has available to it. So if you ask for "Bank Gothic" and that font is not on 30% of your target user's computers, then those computers will have to make a font substitution (which may not be look very professional). So stick with the most common fonts to be safe. This is not the case for text that you write, then turn into a graphic. In this case you can use whatever font your heart desires, but again, be cautious. Just because a font looks neato to you, doesn't mean it will get a similar response from your audience.

Try to match the goals of your site to the fonts you use. A day-care web site can use Comic Sans font effectively whereas a real estate company would be better off staying with conservative fonts like Helvetica or Arial. It all depends on what type of information you plan to convey. Fonts can be fun to work with but also overwhelming, since there are so many to choose from!

- Kaufman Web Design™