Crucial to the ethos of the web is providing information in a way which is easy to read. It sounds simple, but there are many design considerations which factor into this, one of the most obvious being: "Which typeface do I choose?"

Even though we are limited to a handful of fonts on the web, choosing the right one for the job can seem a frustrating task. Fonts not only need to legible but they also convey certain moods which affect the way people interpret the words and concept they represent.

So when you're creating a new website there's clearly no right font. You've got to look at what you are trying to say, the identity or brand and incorporate a font appropriate for the design.

What types of font are there?

Although there are many classifications for fonts we generally think of two kinds: Serif and sans-serif. Serif fonts (Times New Roman, Garamond etc) are the ones with the little "feet" on the bottom while sans-serif fonts (Arial, Verdana etc) are without the extra adornments. Generally speaking serif fonts have a more traditional old-fashioned feel, and a sense of history attached to them, while sans-serif fonts have a more modern, contemporary look.

It is often thought that in print serif fonts are more legible, while on screen sans-serif fonts are more readable. Indeed the most common fonts on the web these days are sans-serif fonts like Arial and Verdana, but that's not to say the serif fonts can't and shouldn't be used.

Lets take a look at the most popular fonts and how they can be tweaked for maximum legibility with the help of CSS.

Fonts in action

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:

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.

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:

The results:

Font: Arial

When to use it: Arial has a modern feel, but is more compact than Verdana. Useful for designs where space if limited.

Often thought of as Verdanas ugly cousin, Arial has a much tighter feel to it which arguably makes it harder to read. It is a very clear font though so you'll still see it used a lot. Sometimes a certain design will just feel better using Arial as opposed to Verdana.

Try the following CSS:

The results:

Font: Trebuchet MS

When to use it: When you need a slightly quirky feel to your text

A sans-serif font that really gives a distinctive offbeat look to text, while still maintaining very good screen readability. Trebuchet MS is now becoming a very popular font with designers who want their sites to stand out from the crowd.

Try the following CSS:

The results:

Is that it then?

Well no, there are other popular fonts out there that people use, but the ones above are probably the best for day to day use. Remember though, that choosing the right font is only the first step in crystal clear readable type. There's a lot more to think about, and factors such as margins around text have a huge impact on the overall readability.

And of course you've got to have something worthwhile to say as well!