Tips for top typography

People often mistake typography for font. It is in fact much more than that. Typography refers not just to a font but the way is sits on a surface. This includes the space around it, the space between it, the size of the lettering, the colours use in the background and the font itself, and how the lettering interacts with the space and objects around it.

It has been suggested the web design is 95% typography. Whether you agree with the statement or not, there is no doubting the importance of typography to ensure an effective user experience.

Here are some tips for optimising your typography.

Choosing a font

Most web pages will use a standard serif/sans-serif fonts for the body copy on a website. This is because these are clear, easy to read and tend to be web-safe (all computers can read them).

Line height/width

Spaces between lines of text - also known as leading -  shouldn't be too big or small, just as the lines of text themselves should have an optimum size. A line height of 1.2 - 1.4em tends to work best for body copy. The line length should be somewhere between 45-75 characters including spaces.

The longer the line of text, the larger the leading should be. Equally, smaller lines of text require less space between lines to read well.

It can be tempting to try and fill every inch of space on a page, but white space around content is very important. It makes it easier to read, balancing the page and allowing the eye to move around the text more effectively.

Limit the number of fonts

Lots of fonts can look messy and inconsistent. Limit the number of fonts you use to 2-3 to ensure your website remains easy to read and pleasant to look at.

Colour

For optimum clarity, there should be as much contrast as possible between text and its background. The clearest way of doing this is putting black text on a white background. Most websites take this approach, or something similar, using a very pale or light background. The key thing is to ensure text is easy to read.

Size

Body text should be kept above 10 or 12 pixels to ensure it is easy to read. The size of the font you use should also reflect it importance and relevance. For example, you would have a smaller title or header followed by a larger paragraph of text. The size and to a certain extent the font you use creates a hierarchy of information, telling the reader what is most important and what information is less so.