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.

Related

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.