Skip to content Skip to footer

How to ensure Typography is legible

London Underground sign illustration, a famous example of a sign with a legible font.
Article Content
  • Why choosing the right font is important because legibility is vital for content to be understood.
  • The positive impact font legibility can have on users with dyslexia and visual impairments.
  • The difference between a serif and sans serif font and when it is right to use them in headings and body text.
  • How modern fonts, such as Volkorn allow for more flexibility in using serif fonts in body text.
  • How, despite improvments in modern fonts, you should still be cautious when using serif fonts in body text and particiarly when using cursive fonts.

Choosing the right font style is something that appears deceptively simple. When compared to the complexity of learning to code, visiting Google Fonts, and clicking on the font that looks the prettiest, seems like a nice bit of light relief. Yet, choosing the right font is a key part of the process of building an accessible website that shouldn’t be underestimated.

Think about the importance of fonts in your daily life. The font used for the London Underground was carefully chosen for its legibility. Imagine for a moment the daily chaos if he had decided to go for a cursive font.

The context may be different for a website, but the principle is the same. You don’t want the wrong font to be a barrier to users understanding your content. If you choose your font with legibility in mind from the outset, you will not only make the experience better for everyone. You will ensure that users, with visual impairments, cognitative disabilities such as dyslexia and any other condition which affect reading have no barriers accessing your content.

How to choose the right font.

Where then do you start?

A key principle is to first understand the difference between a serif font and a sans serif font. Graphic design geeks could write essays and books on the subject (in fact many have). In very simple terms a serif font has little feet on the end (descenders). The Times font is a classic example. A sans serif font does not, hence the ‘sans’ (Excuse my French).  A classic example of a sans serif is the Swiss font Helvetica.

The little feet on the serif fonts were originally designed to help try to increase legibility in the printed form by giving the eye a line to follow (You can read more about this in Garfields’s excellent book on typography).  In the world of digital screens, these lines tend to decrease the legibility of the font, particularly if serif fonts are used for large chunks of written content.

As a consequence, it is common practice to only use Serif Fonts in the headers. where the quantity of text is smaller. This meant designers could have the impact and style of serif without negatively affecting the legibility of the page (although you should still ensure these are legible as possible); whilst using the more legible sans-serif fonts for the largest quantity of text on the page.

Bear in mind with these rules they are not an excuse to have horribly illegible serif font in the headers. Also, just because a font is sans-serif doesn’t automatically make it highly legible. Don’t just select any sans serif, assuming it will be legible, be selective.

Useful Tip

When you find a font that works well for legibility it is well worth reading any design documents from the fonts designers. This will give you a strong idea of the technical reasons why the font is legible and help you choose the right font in the future. For example, this site uses Atkinson hyper legible checkout the information about the font. (to read more about Atkinson font read this article).

Why there is flexibility to following these rules.

If you are worried that this is too restrictive, don’t panic. It is a solid starting point, but the advent of high-resolution screens, and the sheer quantity of different fonts available, allow for a greater level of flexibility.

There are now many modern serif fonts, such as Volkorn (view the font here), which have been designed to have an old-fashioned serif style and still be highly legible (More legible in fact, than some sans-serif fonts).

However, it is still wise to tread carefully. If deciding to use a serif font for body text, you need to be very selective over your choice to ensure that it is as legible as possible.

Can you ever use cursive fonts?

Cursive gets a bad reputation for its lack of legibility (often, that reputation is deserved).

However, there are some more modern cursive fonts which are legible. Amatic SC (view font here) and Courgette (view font here) are two of my personal favourites.

Yet, my advice would be to use cursive fonts with extreme caution, they can be hazardous. Headings or pull-out quotes are easier to get right, but body text is dangerous territory if used. Make sure you do a lot of testing for legibility.

Leave a Reply

Your email address will not be published. Required fields are marked *