Not all your website users will have 20/20 vision. In fact, according to WHO, at least 2.2 billion people globally have a near or distance visual impairment.
As digital producers, it is our responsibility to ensure that the content and web pages experiences we create are universally inclusive. This means considering how legible copy and headlines are for users with visual impairments or reading disorders.
In this video by Visual Web Designer Nick Garratt, you can discover top tips for choosing accessible fonts and improving type readability. Nick provides fantastic insights on the importance of letter spacing, line height, font families, font styles, and capital letters.
You can watch the video here, and find the transcript below.
Accessible Typography Transcript
"Text might be the most important thing on a webpage.
It's the primary way we share information on the Internet. So it needs to be readable and accessible to all.
Your typeface and design choices can aid understanding, readability, and comprehension.
We make all of our design work as accessible as possible at Cyber-Duck.
Here's a quick guide to how we make typography accessible and how you can too.
Remember there are no hard and fast rules when it comes to typography. It's not all black and white. It's more like a spectrum from less accessible to more accessible.
Step one, audit what you've got.
Amongst other questions ask yourself these, early in a redesign project. What fonts are used, in how many weights and how are they used? Then you can work out what needs to change.
Step two, choose your new type case.
Here's a few things to look out for. Is there a good enough distinction between weights? I L L, is there a good enough distinction between letterforms? ILL, is a good test for this. Does the uppercase I have enough distinction from the lower case L.
Make sure you have the right kind of font. Brandon is a popular font that is often used for body text, but it's not designed for that purpose. When used for long-form text, Brandon is bad for readability because of the very short X Height and tool Ascender Line. There's a specific body version called Brandon Text, which has a much better balance.
Some great accessible typefaces are Logical from Bold Monday, FS Elliot from Fontsmith, Aller from Dalton Maag, and my favourite Halyard from Darden Studio. Halyard is a really nice Grotesque typeface. It's versatile with lots of weights and the contrasting shoulders and exaggerated indents make it super readable. Especially with the different versions for display, body, and small text.
Step three, use it well.
Here's a few best practices when designing with your new typeface.
Fewer weights, make the hierarchy clearer and comprehension easier.
Minimise the use of all caps. It's harder to read at a glance because of how our eyes scan text. We read lowercase faster because of the ascenders and descenders differentiating letter forms. It should only be used for non-critical content.
Use scale for a better hierarchy. Scale is much more effective than other methods like caps and colour.
Avoid changing Kerning. Trust your Typographer. They know what they're doing.
Use a heavier weight on darker backgrounds for better contrast. Maintain a line length of 45 to 75 characters when possible, anything more is difficult to scan. Use larger font sizes. Aim for above 16 pixels for body fonts, we normally aim for 18 to 20. Increase the line height for longer line lengths and decrease it with shorter line lengths for another edge on readability.
Head to our website for more on web accessibility.
And get in touch to bring your accessibility up to scratch with Cyber-Duck. You can also request a free UX audit to identify any potential issues, helping you to understand where you could become more accessible.
