Accessibility and typography in Joomla: choosing an accessible font
The issue of accessibility is highly topical in the business world, as well as in local authorities. In the web domain, this concerns the hearing and visually impaired, as well as certain dyslexic disorders, and even cognitive disorders.
Joomla and accessibility
Accessibility is often discussed at meetings between specialists in the field, and was the subject, for example, of a specific session at Joomladay France in Metz in October 2024. Joomla developers have been taking accessibility criteria into account when developing new versions for a long time, and we can proudly shout "Joomla is the first accessible CMS!"
Joomla's built-in accessibility plugin offers visitors a lot of possibilities. Changing font size, controlling colours and contrast, audio playback - these are just some of the options available to enable visitors to adapt the site to their own needs.
Readability for everyone
Despite this option, when creating and setting up our Joomla site, we should take into account a number of criteria to ensure that all visitors are satisfied, and that no one suffers from having to read or find information on the site. It's a question of business, but above all of respect.
So, when choices have to be made, the principle of access for all must guide us.
Choice of images, colours, contrasts, legible content, but also: fonts.
Accessible typography: pay attention to your fonts
Often, the customer wants to impose fonts in his graphic charter, either out of taste, or because it's the brand's font, or simply because a graphic designer has been there. The choice may be judicious, but most of the time the problem of good legibility and therefore accessibility has not arisen.
A poorly chosen or badly used font can discourage visitors from continuing without us even realising it: an audience experiencing difficulties or fatigue will more easily abandon their visit, and may also misunderstand the message we want to convey.
Which well-known fonts are the most accessible?
Among the fonts you already know, because they are used by many people, and provided by default on computers, browsers, there are some that are more readable than others. Specialists say that you should prefer:
- Sans serif fonts,
- Distinct letter shapes: Avoid fonts with letters that are too similar (such as "b" and "d", "1" "I" "l" and "i", "O" and "0 "etc ).
- Uniform spacing: Consistent spacing between letters and words helps visual clarity.
- Weighted bottoms: Some fonts have subtle "weighting" at the bottom of letters, creating a sense of stability.
- Avoid italics: Italic fonts can be more difficult for dyslexic readers to decipher.
While no font can completely eliminate the challenges of dyslexia, some fonts can dramatically improve legibility for dyslexic people. And while individual experiences vary, popular dyslexia-friendly fonts include:
- OpenDyslexic
- Arial
- Verdana
- Helvetica
- Comic Sans
Now, if you want to break away from classic fonts and add a modern touch, explore fonts like Montserrat (similar to Gotham), Nunito Sans (similar to Proxima Nova), and Raleway for a clean, contemporary feel.
Fonts specialising in accessibility management
When it comes to accessibility, there's always room for improvement.
As you can see, it will be very complicated to satisfy all the people who have access to your content, and an improvement for one may be a constraint for another.
However, there are fonts that have been specially designed to be easy to read and to solve as many problems as possible.
These include :
Atkinson Hyperlegible from Braille Institute
the oldest of the specific fonts, whose principle focuses on shape differentiation. It was created in 2019 and has won numerous awards.
It was soon used by precursors and as they themselves say on their site:
From space travel to agriculture to blogs to books, thousands across the world are using Atkinson Hyperlegible to reach wider audiences.
Examples include:
- Jeff Bezos’ Blue Origin website
- Billy and the Giant Adventure by Jamie Oliver
- Available on Canva (online graphic design tool)
- Doheny Eye Institute UCLA website”
Link : https://www.brailleinstitute.org/freefont/
Tiresias
The Tiresias font family was developed by the British National Institute for the Blind in London. Designed to improve legibility for the visually impaired, it has become a benchmark in this field. The Tiresias Screenfont version is used by several TV and set-top box manufacturers.
Link : Tiresias
Eido
The Eido font was developed for researchers at the Marseille cognitive psychology laboratory. It features optimised character shapes to avoid visual confusion. Visually impaired people often encounter difficulties due to the visual similarity of certain letters, such as b and d, or p and q. Eido was therefore designed to accentuate the physical differences between these often confused characters. The font is made up of 26 letters with highly contrasting shapes, and can be downloaded and used freely.
Link: Eido
and finally:
LUCIOLE
Luciole is the latest inclusive font, designed to meet the specific needs of the visually impaired. A dozen criteria guided its design, including letter structure, word spacing and visual ergonomics, to guarantee pleasant, accessible reading. Particular attention was paid to numbers, mathematical signs and punctuation for optimum legibility.
This project mobilised a number of experts, including a laboratory at the University of Lyon (France), which carried out in-depth reading tests with visually impaired pupils from elementary school through to high school. The Luciole font is available for free download under a Creative Commons Attribution licence.
Link: Luciole
The subject is vast, and we've only touched on the choice of font, but what about you: what are your criteria? Do you know of any other fonts to recommend, and why?
Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments