Which Font Works for My Web Site?

Hostway Marketing, October 13, 2009 POSTED IN:Web Design TAGGED: , ,

By Hostway

You’ve wowed them with your design. That’s great. Now you have to get Web site visitors to read your copy. Your success depends not only on your writing chops; the font you choose will impact whether readers make the effort.

If you’re a print-trained designer, you can throw the conventional wisdom you’ve been taught about fonts out the window. What makes text easy to read on the printed page most likely makes it more difficult to read on screen. For example, serif fonts are widely considered the most legible for print as they gracefully lead the eye from letter to letter across the page. But surveys have shown that most people find sans serif fonts easier to read on screen.

As a designer, you also may be used to choosing your font with artistic intent—matching the material and your overall design with a typeface that echoes the tone and style. You can choose an obscure, designer font for your Web site, but only a few lucky viewers will see your masterpiece as it was intended to be seen. An end user can only see the font you choose if that particular font file is installed on his or her computer. So, your artistic vision needs to be tempered with a dose of reality.

You might be wondering about your logo and any stylized text you want to use in banners and billboards. You can use any font you want with those, and they will display consistently for all viewers if you save them as an image file. Now, for the rest of your Web site, lets take a look at some of the most popular options for text.

Which Fonts Work on the Web?

A good font for the Web has certain qualities that make it easy to read:

  • Low contrast
  • Simple, consistent strokes
  • Wide letters and spacing
  • Wide space within the letters themselves

Here are some fonts with those qualities that are installed on most people’s computers:

  • Verdana
  • Trebuchet MS
  • Helvetica

CSS Can Help

If you still want to use a less common font, you can maintain some control over your design for users that do not have that font by creating a CSS rule specifying a list of fonts for the browser to default to if the top choice is not available. If you don’t do this, the browser will replace your font choice with the default font, which is usually Times New Roman.

Learn more about Web site fonts in this W3Schools tutorial.