Being able to easily read and comprehend textual information on web pages and in applications can sometimes be a challenge. Sometimes design is too unconventional, disrespecting common patterns and difficult to follow, sometimes the fonts used are almost unreadable or some parts of sentences difficult to scan.
If we suffer with some sort of reading disorder, like for example dyslexia (opens in new window), then our difficulties reading and understanding text become even worse and we need to have some special tools or settings to help us.
But if website or application is considering this from the start, then we have some effective guidelines that can solve the visual problems from ground up. WCAG is again a very good source on this matter and have even multiple success criteria that evolves around understandable and readable concepts (opens in new window).
But if we go back to the visual representation of textual content and it’s fonts, typography and other text declarations like type face and other so called “glyphs” – then we must consider at least the following:
- select basic, simple and especially easily readable fonts. As studies show most accessible fonts are so called sans-serif fonts. And there are few quite famous that can be considered accessible: Arial as most widely available, but not to let out Calibri, Century Gothic, Helvetica, Tahoma and Verdana.
- do not use too many different fonts as this can make reading more difficult. Rule of thumb is to use maximum two different fonts, one for content and one for titles, for example.
- we must remember that relative font sizes must be used instead of fixed pixel sizes. The main reason for this is in user settable font-size. Browser settings can override the font size on any page that is using relative font size (for example EM or REM).
- font variations should also be used sparely, especially italics and ALL CAPITAL LETTERS can make reading more difficult.
Using pixels for font size prevents custom user setting in the browser. Therefore relative units like em and rem should be used for all texts on the page.
reminder to myself, I have been a fan of pixel sizes before I got to this part of accessibility research!
Web AIM group has a good article on font techniques (opens in new window) that you can read to expand your knowledge and get some first-hand information.
I have encountered some studies and articles that were advocating on using special fonts for dyslexia (opens in new window) but as of may 2020 we are encouraged to use so-called variable fonts to optimize text accessibility.
How can a font be variable and why is it a good thing
I am still in the process of using this new concept for my real-life projects, but I can see the benefits of possibilities that variable fonts bring to developers and designers.
Variable font can be modified with CSS rules. That is the essence of the definition. So we are not locked into using a specific font that is “hard-coded” but we can use a single master font and modify it with CSS. You can compare this to SVG in a way. You can make some parts of SVG grow with only CSS. And it is much more advanced with variable fonts – you can define how thin or thick the font will be, proportions of all the upper and lower parts of letters (like letters “b” and letters “g”), even angles etc.
The meaning of this post is not about variable font itself, so I will not go into details just yet, but let me assure you that variable font with it’s dynamics is also to be treated as an accessibility feature. Browsers today enable their users to define custom font (and other CSS) overrides, so that user have better control over them and so that user can make their own settings centrally, all in light of better readability so there will certainly be also possible to make some special variable font settings in the near future that will help with increasing readability and personalizing also typography itself, not just the size of it.
