Think picking a font for the web is a simple case of finding something that looks good, is ‘different’ and is legible? Then you’re missing a trick…
Web typography is just as important an element of your site’s design as the images you choose and the content you supply. And just like the images and carefully crafted content, your web typography needs to appeal to your target audience and evoke an appropriate emotional response in them. The other issue with web typography is making sure it’s legible and readable on a screen. Here’s our quick guide to understanding web typography.
Web typography principle #1 − picking and pairing fonts
The font you choose will end up being an important element in the whole feel of a site, especially if it’s text heavy. So picking a font that feels right for the content is an important first step. This is an art rather than a science but a good designer will read the content and analyse your target market to pick fonts that will appeal. In general serif fonts look more elegant, whereas sans serif fonts look modern and clean. Context is key, because the choice of fonts helps to determine the kind of experience your viewer will have on your site. For instance, a text heavy site with small margins will look better with a lighter type.
Using a single font can also look rather ‘flat’, therefore a good designer will try several font pairings to find the right combination. The conventional wisdom is that serif fonts are better used in headlines and sans serif is better for body copy. That’s because screen resolutions still aren’t as good as print, and those lovely serifs that lead the eye from one letter to the next can look blurry and pixelated when rendered in less than 16 pixels. However sometimes a designer will break this rule to great effect.
“Text sizes should be set large enough for the average person to read, especially where the target audience is an older person more likely to be needing glasses.”
Web typography principle #2 − contrast
Your web typography needs to be both legible and readable. Text sizes should be set large enough for the average person to read, especially where the target audience is an older person more likely to be needing glasses. For body copy this is 14px and above. And the contrast between the background colour and the text needs to sufficient to make it legible. So many websites ignore this to their cost.
One quick way to check whether your text is legible is to take a screen shot of your page and reduce it to greyscale in Photoshop. If you can still read it easily, it’s fine. Reversed out white text on black can look striking but tends to be harder to read, and is best used in small amounts for impact. Fonts also need to be set to the correct size and weight to achieve enough contrast with the background and other visual elements on the page.
Web typography principle #3 − grids
Designing to a grid is the safest and fastest way to ensure that the design remains consistent and elegant. Great spacing, colours and fonts will only go so far. The layout has to work. Grids provide a clear structure when your designer is considering the balance and geometry of the design. It’s also a good way to establish visual hierarchy, and sizes of text.
Web typography principle #4 − hierarchy
Hierarchy is a way to signal to readers the relative importance of each piece of text. The most obvious method is to make headlines large, subheads smaller and body copy smaller still. However, size isn’t everything. Different fonts can be used to emphasise headlines and subheadings, as well as emboldening, italicising and using all capitals or contrasting colours. All of this helps to highlight text in ways that placement alone cannot achieve. Headline and subheading text needn’t be that large in comparison to body copy providing colour, weight and placement have been utilised to make it stand out sufficiently.
Web typography principle #5 − space
Typically a designer will consider the impression that the amount of space around blocks of text gives on the screen, but the spacing between letters and lines is also important. Leading size is a term that refers to the amount of space which is left between each line. On the web, it’s best to leave 150% of the letter height between each line to increase the appeal of body copy. Where blocks of text appear too dark, increasing the leading size can also make them look lighter. Bolded or extra small text may require extra leading.
Kerning and tracking refer to the amount of space between the letters. Tracking is a general tool for increasing each space the same amount while kerning considers letter pairs individually. Kerning is probably too specific a tool to use over a whole site, but can be used to great effect on headlines. As the font gets larger, letters can start to seem disconnected, and reducing letter and word spacing can add weight, elegance and emphasis. Tracking can increase the apparent size of a line without increasing the pt size at all.
Web typography principle #6 – does it look right?
Don’t underestimate the power of your gut when judging the final design. If it feels pleasing it’s probably right. If something nags at you, it may well need adjusting. Just finally, don’t forget to check how the design looks both on PC and Mac at different resolutions.
If you need help with the look and feel of your site, why not consult our award-winning designers? Give Oxygen a call today on 0845 2606 255.