Good Fonts For Good Web Design

Visitors to your website are going to spend most of their time doing 1 thing: reading your content. Given that the web is a medium mainly devoted to reading, it's surprising just how ignorant most web page authors are about typography. If you use the wrong font, you make your page painful, or even impossible, to read.

The Problem

The problem with the web is that you can only specify fonts by name using HTML and CSS. Which means that, apart from logos (which can be done as images), you're relying on the people visiting your site to have the fonts you're using installed on their machine. Most people will only have the basic fonts that come with their operating system -- and, worse, there are different operating systems and hence different sets of fonts to contend with.

What you have to do, then, is provide a preference order: a list of similar fonts, with your favorite first. The list will then end with either 'serif' or 'sans', depending on whether the font had serifs (the tiny extra parts on the letters, like a little kick after a small d). 'Sans' is short for 'sans-serif', meaning that the font has no serifs.

So what are the "web-safe" fonts? In practice, there aren't that many. You're pretty much limited to choosing either Georgia/Times New Roman/Serif, or Verdana/Arial/Sans.

As a general rule, it's better to use sans-serif fonts on the screen, and serif fonts in print-outs: serif fonts are difficult to read on a monitor because they're hard to represent in pixels, while sans-serif fonts have a tendency to look 'chunky' when printed.

Some Other Choices

There are a few other fonts that most users have installed and that might be useful to you (although not for body text). These include Courier New (a typewriter-like font), Trebuchet (an interesting font for headings), Impact (a tabloid newspaper-like font) and Webdings (a set of images with things like fast forward and rewind symbols, a tick and a cross, and so on).

Pay Attention to Size

Having read that, you might be ready to just set your web page in Verdana and forget about it, but wait a second. Verdana looks terrible in larger sizes -- it's just too wide and large. You need to set it to around 80% of its default size before it's really tolerable. This also means that Verdana is generally bad for headlines. You might try Arial instead for this, preferably in bold. An ideal combination for many sites is large Arial for headlines with small Verdana for body text.

Also make sure that you don't make your fonts too small -- older users or others with bad eyesight will have trouble reading them. Always specify font sizes in relative units (such as percentages), not absolute units (such as pixels). This will ensure that your font sizes work with the preferences users have set in their browser: if they've asked for very large fonts, they'll get very large fonts. Never forget that it's ultimately up to your users how they want to see your site.

Keep 1 principle firmly in mind when designing -- the reader is ready to leave your site in an instant. Only 3 things will maintain your tenuous contact: good information, good writing, and good design.