Get in touch

+44 (0) 28 9099 2882
deeper@fathom.pro

Fathom

Four features of accessible typography

Four features of accessible typography

“The power of the Web is in its universality.           Access by everyone regardless of disability is an essential aspect.” 

Tim Berners–Lee, W3C Director and inventor of the World Wide Web.

All too often, accessibility is seen as an afterthought or a “nice–to–have” feature in design projects, rather than a key requirement for a truly usable and inclusive interface. This is particularly true when it comes to typography, as it is often thought that the choice of type on a website is a minor consideration. However, with estimations that written language accounts for 95% of information on the web, the importance of displaying this information in a way that all users can read easily should not be understated.

With that in mind, this article will look at some essential tips for ensuring your written information is delivered effectively to every user of your website.

Selecting the right typeface

Choosing an appropriate typeface is usually one of the first challenges when creating a new interface. In recent years, the world of UX opinion blogs has been awash with articles suggesting that – for dyslexic users in particular – fonts such as Comic Sans can aid with the readability of content.

Fear not though, this does not mean everything must be designed in Comic Sans for it to be accessible. A recent study has found that Sans Serif, Monospace and Roman font types all perform well with dyslexic readers, with content written in italics performing poorly – Arial Italic in particular.

Selecting a style that has a large x–height and good character differentiation is the first step in choosing a typeface that will be accessible for all readers.

Good and bad examples of character differentiation

Devlin, M. (image creator). Good versus bad character differentiation [digital image]. Property of Fathom.

Size and contrast

Once a good, accessible typeface has been selected, making sure your readers can actually see it is an appropriate next step. With approximately two million people in the UK living with a form of sight loss, ensuring that your content uses appropriate size and contrast is vital.

It has been suggested that 16px+ is the optimal font size for accessible body content on a website. However, some readers can find this too large, and some too small. So the ideal solution – as suggested by WebAIM – is to design the type in relative units (such as ems) in order to allow the size of the type to be scaled up and down, depending on the users’ preference.

Much like choosing an appropriate font size, ensuring an acceptable level of contrast between your content and the background is also dependent on a few variables. For example, content written in 12px regular weight in a certain colour may be inaccessible, however, the same typeface in 16px in the same colour could pass accessibility checks. It’s easy to ensure that contrast is acceptable throughout the design process by using accessibility checkers, such as WebAIM’s contrast checker.

  Good versus bad contrast

Devlin, M. (image creator). Good versus bad contrast [digital image]. Property of Fathom.

Line length and line height

Now that you have a nice, accessible typeface selected, with the text rendered in a friendly, contrasting colour and at a readable size, it’s time to consider the layout of the text.

Having a minimum and maximum line length reduces how taxing it is to read your content. Lines that are too short cause the text to become fragmented. If your lines are too long, the content doesn’t flow well and the reader loses track of the start of each line. It is recommended that line lengths are no longer than 75 characters and no shorter than around 50 characters.

  Good versus bad scanability

Devlin, M. (image creator). Good versus bad text layout [digital image]. Property of Fathom.

Scanability

That’s it – everything has been checked–off in terms of providing accessible content. Your audience is going to read and savour every single word, right?

Not quite. In a study by Jakob Nielson, it was found that 79% of new users to a site always scanned the content they were presented with, and only 16% read the same content word for word. Therefore, it is important to design with this in mind by keeping a clear hierarchy throughout your content. For example, you should insert short, clear headings, use bulleted lists where possible, and write in the inverted pyramid style by beginning with the conclusion.

Validation

The four features of accessible typography outlined in this article are based on robust research, and provide a solid baseline to quickly improve the accessibility of your written copy. However, it’s almost certain that your users have their own specific needs that will not be entirely solved by the points I’ve just addressed. So, what’s the solution? In our experience, there’s no better way of finding out if a design – including the typography – is going to work than by getting it in front of real users early in the project, and seeing first–hand how it performs.

Find out more about an accessibility audit or usability testing >> 

 

Cover image: Strand, K. (photographer). Type [digital image]. Retrieved from Unsplash. Cropped and filtered from original.

 

By Mark Devlin

Mark was a UX Designer with Fathom from January 2019 to April 2020, when he moved to take up a Senior Product Designer role at Signifyd.

View more insights by Mark

Like to read more of our insights regularly?

Receive our monthly insights newsletter straight to your inbox.

To prove you’re a human please rewrite the following into the box below.
mq7yy55k

Latest from the blog

Our latest views and ideas

Our Cookie Policy

Find out more I accept

Like most websites, ours uses cookies to make sure you receive the best experience possible. These cookies are safe and secure and do not store any sensitive information. To continue, please accept the use of cookies.