Dyslexic-friendly Web typography
An attempt to make Websites easier to read by users with Developmental Dyslexia through scientific results, good design practices and implementation details.
Disclaimer: despite the reliability and the validity of the papers reported here, this article is not intended to be anything else than a simple way to implement research results into Web techniques. Scientific tests had not been run (yet) for reading on screen.
When we enter the field of legibility and readability in a Website we have a very large set of rules and practices to keep in mind, even if we are not specifically targeting dyslexic or low-level readers. Such rules regard the typography of paragraphs and text boxes in general, as well as layout responsiveness and the respect of color contrasts. Since the Web is liquid and open by nature, the implementation of the graphic project is way more complex than a replication using Web technologies, because we need to consider external customisation like zoom and preferred color schemes.
So, how can we design and develop typography rules which adapts to the user’s needs?
Font families and typefaces
By googling “dyslexic font” we get across a lot of resources about typefaces that should mitigate reading errors, even though their real efficiency has been often questioned by scientific studies. Such typesets feature increased weights in the lower part of the glyph and a larger space between each letter.
According to several studies [1][2], the odd shape that those letters have does not help users (shapes are important in general to help distinguish the characters) as well as the spacing. Instead, this could be achieved by using common fonts like Arial or Times New Roman with an increased letter distance. At the same time, reading speed and accuracy improve when characters are correctly recognised by the user, whereas letter recognition is linked more to the user’s habits rather than its shape [3].
Considering that letter and word spacing are customisable by developers using CSS and by users with custom browser configurations, any font indicated for paragraphs and long texts can be a good choice.
Furthermore, we suggest considering variable fonts as a proper solution to create targeted reading experiences: by introducing new patterns in the Web typography such as full shape and spacing control, variable fonts can be parameterised in order to generate ad hoc reading presets preserving font’s constraints. This is extremely useful when we work with the spacing between letters and words.
Size, line height and spacing
Webpages can change size, format, zoom level and base font-size. Using the correct unit when stylising paragraphs is fundamental in order to correctly handle typography: always avoid static units like px for the size of the text and make a large use of relative ones like em. In this way, the text will perfectly scale to match user preferences without losing its relation with surrounding content.
Like a lot of editing tools, browsers automatically set line-height to approximately 1.2 of the font size, but often this is not the correct value in a paragraph. Calculating the optimal line height with tools like tipometria.chialab.io will produce benefits for all kinds of readers, but especially for those users which have difficulties with visual crowding. Always use values relative to the font size in order to provide the best spacing between text lines even in zoomed contexts.
As many recent researches suggest [4][5], Dyslexia could not be linked to phonological issues only, but also to visual processing impairments. Properties like letter-spacing and word-spacing are generally set by the browser based on the font family and can be increased in order to improve reading performance of dyslexic users. For example, creating a preset with the following values will emulate the spacing rules used in the EasyReading™ font in order to provide the same facilitatory experience to any other family (anyway, fine tuning based on metrics is still required):
If you already provide a classic button to increase font size, you can use those rules to bind letter and word spacing in order to control visual crowding.
This configuration is limited by its linear increment, and the same applies to line height, which leads to non-optimal render. This is why working with variable fonts is a real plus in this case, since the font designer can parameterise how the spacing grows in relation with the font size.
Layouts and color contrasts
The connection between visual processing impairment and Dyslexia lead us to rethink our approaches towards a dyslexic-friendly typography and to move our efforts from shapes to spaces. Justification, layouts and color contrasts, which already play a main role for a good legibility, are even more important: avoiding to justify text will prevent the insertion of uncontrolled space between words, limiting the number of strokes per line to 60–70 and balancing color contrast between text and background (using WCAG’s contrast criteria) are simple, yet evergreen good design practices that can make the difference for some users.
Research and development
We believe that a better understanding of the user’s reading capabilities, especially regarding impaired ones, can improve our work as designers and developers. We will continue to promote scientific research in the field as well as sharing our achievements and technological experiments on chialab.it and chialab.io websites. So, if you like, follow us and share your thoughts!
Researches, links, notes
- Galliussi, Perondi, Chia, Gerbino, Bernardis (2020). Testing text readability of dyslexia-friendly fonts. Annals of Dyslexia.
- Hakvoort., van den Boer, Leenaars, Bos, Tijms (2017). Improvements in reading accuracy as a result of increased interletter spacing are not specific to children with dyslexia. Journal of Experimental Child Psychology.
- Perondi, Gerbino, Chia, Arista, Pignoni, Gaudenzi (2017). Tipografia parametrica e Developmental Dyslexia. MD Journal.
- Gori, Facoetti (2015). How the visual aspects can be crucial in reading acquisition: The intriguing case of crowding and developmental dyslexia. Journal of Vision.
- Joo, White, Strodtman, Yeatman (2018). Optimizing text for an individual’s visual system: The contribution of visual crowding to reading difficulties. Cortex.
Prior art
We also covered the connection between accessibility and legibility on the Web in these articles:
