+
+

What makes a good, accessible, easy to read font?

What makes a good, accessible, easy to read font?

What makes a good, accessible, easy to read font?

What makes a good, accessible, easy to read font?

Lizzie Bruce

Freelance Content Consultant

This question has come up for me as a content designer a few times recently. First, I got involved in an accessible fonts discussion on Twitter last year. Next, I was asked my opinion on readable fonts by a large charity. I shared the evidence that people who knew more than me had shared on Twitter. Lastly, I read The Non-Designer’s Design Book this January, to learn more about graphic design, and the author, Robin Williams, had some insights on font choices.

Initially, my instinct was to stay away from this topic, as it is hotly debated and there seems to be no absolute consensus. However, in the spirit of helping us all aim for improvement, rather than perfection – especially as there may not be one perfect answer – I’ve gathered up a few observations.

Top line summary

What I learnt can be summarised in these overall takeaways:

  • user research and testing with a broad range of real users, in the context in which they will encounter your content, will help you find the best font for your purposes
  • professional opinion varies, but some pointers around letter shape can guide you to make more accessible font choices
  • a sans serif font is not necessarily more readable than serif font: some san serif fonts can be less readable than some serif fonts
  • easy differentiation of letter shapes, and also between headings and body text, is very important
  • font weight, as well as shape, needs to be considered for legibility
  • exemplar, usability tested accessible fonts are available

Pointers for a good, legible font

Steve O’Connor, Design Lead at Sigma, noted that there’s no single solution for all – for example different fonts work for different people with dyslexia. 

Gareth Ford Williams, Head of User Experience Design and Accessibility at BBC, wrote a detailed article on making a good font choices, which WebAIM recommended I read: ‘What makes a typeface accessible and how to make informed decisions’.

The following pointers gather together some of their recommendations. 

Do have:

  • Tall x-height: the height of the lower case letters like m, a, x, and r.
  • Height difference between ascenders and capital letters, so that for example capital "i" and lower case "l" look different.
  • Distinguishable characters, for example L, l, and 1 should all look different from each other, as should o, e, c, a.
  • Adequate letter spacing.

But avoid:

  • Thin weights on smaller font sizes.
  • Narrow width fonts.
  • Block capitals.
  • Fonts where the letters mirror each other, for example d, b, p and q should be have features that differentiate them from each other, through more than just their ascender and descender position.

Why is a clear font important?

Typefont confuses people if it’s not well-defined. The following letters and symbols were confusing for people aged 13 to 45, with no dyslexia or visual impairments, source: study by Thomas Bohm of User Design, Illustration and Typesetting. I’ve bolded the letters and symbols that were confused.

clear / dear
turn / tum
CS5 / CSS
105 / IOS
5AM / SAM
Z2 / 22
LJ, LI, Ll / U
ce / oe


When you add a visual impairment or increase user age to over 45, the range of characters that may be confused increases (source as above):


i / j
B / 8
D / O, 0, o
0 / O o
k / R
a / o
F / f
r / v / Y
g / q


Similarly shaped letters and characters, and short ascenders and descenders, increase letter confusion and decrease legibility and readability for people with dyslexia.

In fact, GOV.UK avoid using certain characters in passcodes altogether, because of these legibility issues.

Heading font contrast is also important for readability

Robin Williams in her seminal book the Non-designer’s design book, stresses the importance of heading hierarchy and contrast. This means headings must be easy to perceive as different from body text, and from other heading ranks, for example, h2, h3 and h4 headings should easy to tell apart from each other, as well as from body text.


This is how GOV UK’s design system treats heading font sizes:


You can try the following really useful online tool to explore font sizes: Typescale.com

Legible apostrophes and quotation marks

Another thing to check for is how defined the apostrophe and quote mark characters are. It is better to have curly or slanted marks than straight, vertical marks. If your default marks are straight, use the keystroke combination of: option + Shift + { or }.

Exemplar fonts

While the GOV UK font, GDS Transport, has been tested for usability, it’s not publicly available for use as it’s copyrighted, important so that it remains associated with trustable public information.

Similarly, the BBC’s typeface family BBC Reith is copyright-protected. But it’s worth looking at because, as noted by Gareth Ford Williams, it was developed with a neuroscientist on the team, and their research user groups included people with moderate to severe vision impairment and dyslexia, as well as people who didn’t identify with any related conditions.

Mencap have made their accessible font, FS Me available for public purchase and use. As they mention on the Fontsmith website, “every letter of FS Me was tested for its appeal and readability with a range of learning disability groups across the UK”. This is a screenshot of one of the marketing images for their font:

Further reading and resources

This question has come up for me as a content designer a few times recently. First, I got involved in an accessible fonts discussion on Twitter last year. Next, I was asked my opinion on readable fonts by a large charity. I shared the evidence that people who knew more than me had shared on Twitter. Lastly, I read The Non-Designer’s Design Book this January, to learn more about graphic design, and the author, Robin Williams, had some insights on font choices.

Initially, my instinct was to stay away from this topic, as it is hotly debated and there seems to be no absolute consensus. However, in the spirit of helping us all aim for improvement, rather than perfection – especially as there may not be one perfect answer – I’ve gathered up a few observations.

Top line summary

What I learnt can be summarised in these overall takeaways:

  • user research and testing with a broad range of real users, in the context in which they will encounter your content, will help you find the best font for your purposes
  • professional opinion varies, but some pointers around letter shape can guide you to make more accessible font choices
  • a sans serif font is not necessarily more readable than serif font: some san serif fonts can be less readable than some serif fonts
  • easy differentiation of letter shapes, and also between headings and body text, is very important
  • font weight, as well as shape, needs to be considered for legibility
  • exemplar, usability tested accessible fonts are available

Pointers for a good, legible font

Steve O’Connor, Design Lead at Sigma, noted that there’s no single solution for all – for example different fonts work for different people with dyslexia. 

Gareth Ford Williams, Head of User Experience Design and Accessibility at BBC, wrote a detailed article on making a good font choices, which WebAIM recommended I read: ‘What makes a typeface accessible and how to make informed decisions’.

The following pointers gather together some of their recommendations. 

Do have:

  • Tall x-height: the height of the lower case letters like m, a, x, and r.
  • Height difference between ascenders and capital letters, so that for example capital "i" and lower case "l" look different.
  • Distinguishable characters, for example L, l, and 1 should all look different from each other, as should o, e, c, a.
  • Adequate letter spacing.

But avoid:

  • Thin weights on smaller font sizes.
  • Narrow width fonts.
  • Block capitals.
  • Fonts where the letters mirror each other, for example d, b, p and q should be have features that differentiate them from each other, through more than just their ascender and descender position.

Why is a clear font important?

Typefont confuses people if it’s not well-defined. The following letters and symbols were confusing for people aged 13 to 45, with no dyslexia or visual impairments, source: study by Thomas Bohm of User Design, Illustration and Typesetting. I’ve bolded the letters and symbols that were confused.

clear / dear
turn / tum
CS5 / CSS
105 / IOS
5AM / SAM
Z2 / 22
LJ, LI, Ll / U
ce / oe


When you add a visual impairment or increase user age to over 45, the range of characters that may be confused increases (source as above):


i / j
B / 8
D / O, 0, o
0 / O o
k / R
a / o
F / f
r / v / Y
g / q


Similarly shaped letters and characters, and short ascenders and descenders, increase letter confusion and decrease legibility and readability for people with dyslexia.

In fact, GOV.UK avoid using certain characters in passcodes altogether, because of these legibility issues.

Heading font contrast is also important for readability

Robin Williams in her seminal book the Non-designer’s design book, stresses the importance of heading hierarchy and contrast. This means headings must be easy to perceive as different from body text, and from other heading ranks, for example, h2, h3 and h4 headings should easy to tell apart from each other, as well as from body text.


This is how GOV UK’s design system treats heading font sizes:


You can try the following really useful online tool to explore font sizes: Typescale.com

Legible apostrophes and quotation marks

Another thing to check for is how defined the apostrophe and quote mark characters are. It is better to have curly or slanted marks than straight, vertical marks. If your default marks are straight, use the keystroke combination of: option + Shift + { or }.

Exemplar fonts

While the GOV UK font, GDS Transport, has been tested for usability, it’s not publicly available for use as it’s copyrighted, important so that it remains associated with trustable public information.

Similarly, the BBC’s typeface family BBC Reith is copyright-protected. But it’s worth looking at because, as noted by Gareth Ford Williams, it was developed with a neuroscientist on the team, and their research user groups included people with moderate to severe vision impairment and dyslexia, as well as people who didn’t identify with any related conditions.

Mencap have made their accessible font, FS Me available for public purchase and use. As they mention on the Fontsmith website, “every letter of FS Me was tested for its appeal and readability with a range of learning disability groups across the UK”. This is a screenshot of one of the marketing images for their font:

Further reading and resources

Ready to get started?
Start your 30-day free trial now
Start free trialBook a demo
No items found.

About the author

Lizzie Bruce

Lizzie is the author of 'Task-based intranet content, a step by step guide to user-centred design'. She led Content Design London's collaborative Readability Guidelines project, and provides content services through Cake Consultancy Ltd. With 17 years’ content usability experience across private, public and charity sectors, Lizzie is keen to share her learnings.

Related posts you might like