Variable Fonts and Dyslexia
Dyslexia is not a black or white, on or off condition. Some with dyslexia report different challenges than others, ranging from typefaces to page layout to other factors. A few years ago I wrote Typefaces for Dyslexia, where I gathered some research suggesting that dedicated typefaces, on the whole, do little to help readers with dyslexia. Generally readers performed better when good typography practices (alignment, spacing, etc.) were followed.
Since then there have been some developments that I think can be beneficial for users. The most important is the support for variable typefaces coupled with new variable font releases. These could allow users to control some parts of typefaces that give them the most trouble — bowl size, bowl shape, ascender or descender length, serif size, and so on.
The catch here is that support must come in browsers. When web developers are left to invent interfaces to improve accessibility on a site-by-site basis, they are often confusing, inconsistent, and sometimes unusable. Text size widgets have proven this time and again (see Don’t Re-Create Browser Features).
This is also complicated by the need for typefaces that support specific features that most benefit users with dyslexia. This requires somebody with some skill making variable typefaces and someone who understands the features that can most help those with dyslexia.
This is where I come up short. I excel at neither. I created a couple proofs of concept that I hope can benefit someone who can bring those two skill-sets together.
Serif Variable Font Demo
This font is Amstelvar Alpha Final Release. I am not using all the features of the font as some of them do not appear to contribute directly to readability. It only works in Chrome, Blink, and Edge browsers as of this writing. If the embed below does not work, visit the serif demo directly at CodePen.
See the Pen Variable Font Demo Using Amstelvar Alpha by Adrian Roselli (@aardrian) on CodePen.
Sans-serif Variable Font Demo
This font is Noboto Flex. I am not using all the features of the font as some of them do not appear to contribute directly to readability. It only works in Chrome, Blink, and Edge browsers as of this writing. If the embed below does not work, visit the sans-serif demo directly at CodePen.
See the Pen Variable Font Demo Using Noboto Flex by Adrian Roselli (@aardrian) on CodePen.
WCAG 2.1 has a new success criterion related to readability. It can also help users with dyslexia and, when paired with an interface to specify and control variable fonts, could create a much better experience for all users. The new success criterion is 1.4.12 Text Spacing (AA):
Success Criterion 1.4.12 Text Spacing (Level AA): In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.
Steve Faulkner has put together a bookmarklet for testing 1.4.12 (for an accessibility audit).
Update: 5 September 2018
The The Complete CSS Demo for OpenType Features collects possible value of the arcane four-character CSS
font-feature-settings in one place with visual examples of their effect.
If you are testing a variable font, this collection of options and examples can be pretty handy.
Update: 19 March 2019
This tweet is promoting the latest features of the WebKit port for GTK+.
One of the highlights is the support for variable fonts, allowing designers more flexibility for using typefaces while at the same reducing the size of pages: the same font file can be used for many stylistic variations.
You can see a demo by @aardrian at codepen.io/aardrian/de…
Update: 8 May 2019
I only just discovered this Variable fonts guide at MDN. It has an overall primer and shows examples which you can adjust.
I’m generally with you on the text size widgets. Have found those annoying for years. However, I’m really impressed by the Preferences Editor from the Fluid UI Project to provide easy personalization:
It’s got combination of modifications that are similar to the flexibility that you’ve added to your demos.
In response to.
This looks pretty swell. While I would always rather see these types of preferences managed in the browser or native OS, I understand your point that it can be useful until that happens.
This is an amazing font that gives more control than any other variable font that i have seen. The only issue i have with it is the letter z. I am not sure what the reasoning was behind it, but the font files do not work for the letter z and i believe some punctuation as well. I was wondering if there has been an updated version of this font realized since this article was posted in 2018.
In response to.
Arielle, I assume you mean the Noboto example, since yeah, that z does appear broken. It seems nobody ever filed an issue at GitHub, and the core font itself has not seen an update in about 4 years.
Noboto is based on Roboto, which has only a slab and mono version as variable fonts, so if neither of those work you might need to see if one of the other sans serif variable fonts at Google Fonts does the trick, or hunt at one of the font makers.
Leave a Comment or Response