Font: Times New Roman

It's the default font on most browsers and it's been kicking about since 1932 when it was first invented for the Times newspaper, so you might expect to see more of it on the web these days, but you simply don't.

It's been out of fashion with web designers for years and the general consensus is that, in its original form, it's fairly ugly. A recent article over at Usable Type however, showed how, with a bit of CSS trickery, we can breathe new life into the font, improving legibility and appearance.

Try the following CSS:

div { 
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.6em; 
  word-spacing: 0.2em; 
  font-size: 90%; 
  letter-spacing: 0.02em; 
}

The results:

Font: Georgia

A very popular serif font on the web. It's classy, elegant and doesn't have the cluttered, dated look that Times can have. It also looks great at large font sizes, making it ideal for headings. This is generally the serif font of choice for most designers nowadays as it was specifically designed for the screen.

div {
  font-family: Georgia, Times New Roman, Times, serif;
  line-height: 1.8em;
  word-spacing: 0.05em;
  font-size: 95%;
  letter-spacing: 0.01em;
} 

The results:

Font: Verdana

When to use it: Works best with modern designs, but to be honest you can use Verdana anytime.

There's an old web designers saying: "if in doubt, use Verdana". And it's fair enough. Verdana is probably the easiest font to read on the web. It's wider than Arial, making it more legible and it looks good even at small sizes.

Try the following CSS:

div {
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  line-height: 1.7em;
  font-size: 76%;
} 

The results: