Online content consumption is soaring, due to people spending more time on their digital devices than ever before. Text makes up a very large portion of this content, so the need for this to be accessible is crucial.
Ensuring that you use accessible typography needs to be part of everyday practice. This blog will highlight some key areas for content design consideration.
Why accessible fonts are important for web accessibility
Accessible fonts are ones that are easy to see, read, and understand for all people. The font you choose can have a positive or negative impact on those consuming your online content. This is due to some fonts and typefaces being easier to understand than others.
Choosing the wrong font or typeface can slow down the reading speed of any website visitor. Worse, it can actually exclude a wide demographic from being able to read your text altogether. In particular, this could create accessibility barriers for dyslexic people, site visitors with low vision, or people with learning difficulties.
One of the main principles of accessibility is that your website’s “information and user interface components must be presentable to users in ways they can perceive.”
Selecting the right accessible font creates a strong foundation in working towards digital accessibility. This said it’s more than just the font type that you select. There are other factors to determine if your text is inclusive, such as size, spacing, and colour, that need assessing. Once addressed, you will improve the legibility and readability of your website for everyone. Resulting in your organisation will be able to reach a wider online audience.
Choosing the right font type
Don’t worry, as accessible as Comic Sans may be, I’m not going to suggest implementing that style across your website – I’m not that mean. Luckily, there are some attractive fonts out there that are accessible and ensure your website remains aesthetically pleasing.
It’s important to choose a simple, embellished, and clear typeface. Ones that score highly for web accessibility are Sans Serif fonts. The difference being that San Serif does not have decorative lines on letters, unlike Serif fonts such as Times New Roman. Serif fonts can distract the eye of users and cause confusion on the overall shape of a letter.
We’d advise using a widely available font for consistency, across devices and browsers, such as:
- Arial
- Calibri
- Helvetica
- Tahoma
- Verdana
Slab serif fonts, such as Arvo, Museo Slab and Rockwell, are also considered to be accessible. However, these are mostly used in headings rather than the main body of text.
If writing content specifically for dyslexic people, consider using fonts such as Dyslexie and OpenDyslexic. These are free to download and have been designed to make content easier to read.
Setting the correct font size and spacing
Everyone is different with the requirements that they need when accessing online content. Some users prefer to read larger text, whilst others process content easier when it’s smaller for optimal reading. Although Web Content Accessible Guidelines (WCAG) doesn’t specify a minimum text size, good standard practice is for font sizes to be 12pt or above. Many use size 16pt as a standard.
If your website meets WCAG compliance standards, users should be able to increase or decrease the text size accordingly. WCAG specifies that “except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.” If line or character spacing is changed below the default settings, when adjusted this can sometimes cause an overlap of text. Resulting in users not being able to read the content.
Adequate letter, word, and line spacing provides separation and clarity for users. If too close together, it can cause overcrowding and confusion due to them being hard to differentiate.
The World Wide Web Consortium (W3C) specify that spacing should be at least:
- Line height (line spacing) – 1.5 times the font size.
- Spacing following paragraphs – 2 times the font size.
- Letter spacing (tracking) – 0.12 times the font size.
- Word spacing – 0.16 times the font size.
Inaccessible formatting that you should avoid
Along with choosing the right font for your audience, there are some other inclusive considerations to make. Here are some top tips to help you avoid common mistakes in content.
Avoid using:
- Justified text, as this makes scanning documents a challenge. Left align text for user-ease.
- Different font types across a page, it’s important to keep consistency throughout.
- Underlined text. This should only be used to identify hyperlinks.
- Fonts that have ‘imposter letter shapes’. These are designed to be very similar as part of their visual style and can be confusing. Such as the number 1 and a lowercase l.
- Fancy fonts or italics. These can cause problems for people with cognitive disabilities, due to the change in shape of the letters.
- Block capitals. Not only are these hard to read, but screen readers will read out each letter rather than the word itself. This causes a real nightmare for visually impaired users.
- Bold text to convey emphasis on words or sentences. This is not highlighted to screen reader users, often resulting in blind people or those with low vision missing out on important information.
- Images instead of text. Blind users cannot access content presented in this way.
- Headings that are not set in a correct heading level structure. This is key for making your content accessible for users of assistive technology.
- Large blocks of content. Break text up into smaller sections, with the use of bulleted lists.
Colour contrast for web accessibility
Using adequate colour contrasts helps users to create a clear separation between the foreground and background. Enabling users to easily distinguish, read, and understand text. When levels are not at a sufficient level, it can make text difficult and, in some cases, impossible to read.
Adjusting text to the correct contrast levels helps all users to process your visual information easier. Reducing cognitive strain and confusion for users. This is particularly important to support users with:
- Low vision
- Colour deficiencies
- Dyslexia
- Presbyopia, which is usually linked to changes in vision accompanied with ageing.
An example of good colour contrast ratios
You can easily read all of this text
An example of poor colour contrast ratios
It is difficult to read all of this text
Web Content Accessibility Guidelines (WCAG) colour contrast requirements
The minimum WCAG requirements for contrast ratios in text for an AA level rating is at least:
- 4.5:1 for normal text
- 3:1 for large text
- 3:1 for graphics and user interface components (such as form input borders).
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Upskilling accessibility training
The design process plays a fundamental role in achieving an accessible interface. We offer robust web accessibility for designer training that covers user journey considerations and inclusive design best practices relevant to those within the design industry.
In a communications or content editor role? Learn how to create accessible content across your online platforms and social media channels.
