“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.
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.
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.
Devlin, M. (image creator). Good versus bad text layout [digital image]. Property of Fathom.
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.
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.
Cover image attribution: Strand, K. (photographer). Type [digital image]. Retrieved from Unsplash. Cropped and filtered from original.