Practical Font Usage

Legibility is key on any website, so make sure yours is as nice to read as possible with this tutorial.

When we're communicating via a website, we have to use text, and how we portray that text is a central choice we face every time we create or update a site. Our choice of font can make the difference between our readers being able to read the text comfortably, or abandoning the site in droves. Further, our font choices can reflect our personal or brand values, helping to convey subtle moods to visitors, so we need to get these choices right.

When considering our font choices, we should be thinking about technical, usability and aesthetic considerations.

We're not going to talk too much here about the technical side, since we have a great reference article on this topic.

It's worth remembering, though, that when defining a font in HTML/CSS, it needs to reside on the final user's machine, since the browser is using those fonts, not yours!

Readability and usability

We'll start with a point worth stating:

Users need to be able to easily read the text on your site.

It sounds obvious, but the readability of your site is absolutely crucial, so your choice of fonts and how they sit on the page is a big decision.

Contrast

We'll start with contrast. It's easier to read text when it has a greater contrast with its background. That means that light grey text on a slightly darker grey background is harder to read that black text on a white background. You can see this in action here:

Grey body text with a grey background
Grey body text with a grey background
Black body text with a white background
Black body text with a white background

It's also important to choose the right font for "body text" (a term used by the publishing industry to mean the bulk of your content in paragraph form). Here are two paragraphs with the same text in two different fonts. The first is in Brush Script, the second in Verdana:

Body text set in Brush Script
Body text set in Brush Script
Body text set in Verdana
Body text set in Verdana

Which is easier to read? That's right, the Verdana paragraph is much easier. It's because there's less detail in the font, allowing for easier appraisal by your eye and brain. Despite the norms of the print world, serif fonts like Times are also harder to read on the Web. Because the resolution of your screen is much lower than the resolution of the printed page, the serif elements of serif fonts "decay" when set at body text sizes, making them hard to read.

Font face

So what fonts can you use for body text? I'd always stick with Verdana (specifically designed for on-screen reading) or Arial, though you can make the case for Trebuchet too.

Font size

The size of your font is critical for body text. How big should it be? The answer is basically "big enough to read". There's no point creating a great site if lots of visitors are squinting at it - they'll simply give up and go elsewhere. Of course, that point is different for different groups of visitors, so the other thing your font sizes should be is "variable".

That means that you should allow re-sizing of text by the user. If you define font sizes in fixed units like pixels, then this won't allow IE users to re-size via View > Text Size. If however you define font sizes in units like "em", then this won't be a problem. You can define your default size as you like, but others can re-size to fit their needs.

The typesetting trap

Watch out for using tiny text sizes if you're a designer. A paragraph of small text is nicer to set, since it feels more like a block, but text set at bigger sizes is messier. That means we all tend to want to use smaller fonts as they sit better within the composition of the page. Again, though, we should be thinking about legibility as well as style.

Aesthetic

We've discussed the use of fonts for body text, and it's looking like a pretty paltry selection from a designer's point of view, but there are things you can do to spice up your font usage.

For instance, your choice of headline font can liven up the page. Consider these two variants on what is basically the same thing:

Headline set in Arial
Headline set in Arial
Headline set in Times, small caps and green
Headline set in Times, small caps and green

The colour usage, the small-caps and the serif face make the second image an altogether classier offering. Note that here, using the serif font is fine - it's big enough to cope with the low on-screen resolution without starting to decay too much. Generally this serif/non-serif mix is a pleasant one.

You could also try a drop-capitial for your first paragraphs. You can see this in action in the "Blur" PageKit at:

http://www.elated.com/pagekits/blur/

Here I've coupled a non-serif body text set in Arial, with a larger serif for the drop-cap. The separate colours also help to bring the text to life.

Generally, you're looking for fonts that complement each other. Use only two fonts (maybe with various weights) for a professional-looking layout. Certainly no more than three. Be consistent in their use too. If all your headings use Times, make sure that this applies throughout a site.

Text as images

Of course, you can create text as images, in which case you can use whatever font you like. Generally though, apart from logos, this is frowned upon in this day and age. It won't re-size, a screenreader can't see it, and it doesn't obey any of the rules of good markup (using H1 for headers for example). Sometimes you have to do this though, for instance during a big commercial job where a company's brand image comes into direct conflict with the niceties of accessibility.

In this fonts tutorial, we've covered readability and aesthetic issues. As online designers, we're unlikely to have the range of fonts available to us that our offline cousins enjoy. I like to think there's an element of "art through limitation" involved in that though!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page