Variable fonts & readability: the rising of custom reading experiences

VARIABLE FONTS & READABILITY: THE RISE OF CUSTOM READING EXPERIENCES CSS Conf • Budapest, Hungary • September 24, 2019

Hi! 👋 I’m Damien.

Hi! 👋 I’m Damien. I am a queer designer who codes, specialised in design systems and accessibility. I work for Castor in Amsterdam as a Design Systems & Accessibility Lead. I use they/them pronouns. My Twitter handle is @iamhiwelo

Content warnings ⚠ I am known to use a colourful language, so please pardon my French! 🤭 There is few videos, including sound. 🔊 Usually, my sense of time is pretty bad. And also, raccoons & Jake Peralta 🦝 ⏳

Buckle up! Let’s talk about readability.

But first, why?

Reading is a complex cognitive process. CSS Conf Budapest • September 2019 • @iamhiwelo

Literacy is an acquired skill requiring an important learning curve. CSS Conf Budapest • September 2019 • @iamhiwelo

Literacy is not always a life-long skill. You can acquire reading difficulties. CSS Conf Budapest • September 2019 • @iamhiwelo

The thing is… the Web is mainly text-based. And a text is not accessible per se. CSS Conf Budapest • September 2019 • @iamhiwelo

Readability is now an accessibility success criterion. CSS Conf Budapest • September 2019 • @iamhiwelo

WCAG 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. CSS Conf Budapest • September 2019 • @iamhiwelo

To understand readability, you need to know dyslexia.

Studies show that improving readability for dyslexic users improve the experience for all. Ten guidelines for improving accessibility for people with dyslexia. V. Zarach - CETIS University of Wales Bangor, 2012 CSS Conf Budapest • September 2019 • @iamhiwelo

± 10% of the global population is having a degree of dyslexia. World Health Organization, 2011 CSS Conf Budapest • September 2019 • @iamhiwelo

Not always since childhood: it can appear after brain injuries, strokes or just with new languages you are learning. CSS Conf Budapest • September 2019 • @iamhiwelo

Also, dyslexia is not only about reading. CSS Conf Budapest • September 2019 • @iamhiwelo

How do we read?

Reading is about sounds. 🎵 Reading is about rhythm. 🎶 Reading is about music. 🎼 CSS Conf Budapest • September 2019 • @iamhiwelo

Reading is mainly a phonological process, heavily influenced by the environment. CSS Conf Budapest • September 2019 • @iamhiwelo

Reading is not linear, we are reading by saccades. CSS Conf Budapest • September 2019 • @iamhiwelo

And between each saccades, we have something called fixation. CSS Conf Budapest • September 2019 • @iamhiwelo

During a fixation, everything except the focus is blurry. § CSS Conf Budapest • September 2019 • @iamhiwelo

Reading is less about words than it is about staring at screens. CSS Conf Budapest • September 2019 • @iamhiwelo

Reading is not so much about words… it is more about identifying shapes. CSS Conf Budapest • September 2019 • @iamhiwelo

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. CSS Conf Budapest • September 2019 • @iamhiwelo

Taht’s wyh yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. CSS Conf Budapest • September 2019 • @iamhiwelo

That’s why you can probably read this easily despite the misspellings. CSS Conf Budapest • September 2019 • @iamhiwelo

And shapes are also mostly created by letters’ identifying features CSS Conf Budapest • September 2019 • @iamhiwelo

Readability READABILITY CSS Conf Budapest • September 2019 • @iamhiwelo

problem porbelm pbleorm CSS Conf Budapest • September 2019 • @iamhiwelo

I know, brain hurts. 🧠 But bear with me, we’re done with the lecture.

So, what’s the point?

Let’s take a look to something designed for readability. CSS Conf Budapest • September 2019 • @iamhiwelo

credits: Mijksenaar

A series of weight variations for a good visual hierarchy credits: Mijksenaar

A tracking depending of the context credits: Mijksenaar

A system as consistent as possible credits: Mijksenaar

This is readable, and efficient. Great. But can we do better? credits: Mijksenaar

Variable fonts will help you do the extra mile.

Accessibility is hard. CSS Conf Budapest • September 2019 • @iamhiwelo

It is hard because there is no one-fits-all solution. CSS Conf Budapest • September 2019 • @iamhiwelo

Creating accessible and inclusive experiences is about collaboration and customisation. CSS Conf Budapest • September 2019 • @iamhiwelo

Variable fonts can help create collaboration between designers and engineers. CSS Conf Budapest • September 2019 • @iamhiwelo

Variable fonts can also help users to customise their experience. CSS Conf Budapest • September 2019 • @iamhiwelo

We have different capabilities, we are used to different media and platforms, we are not reading the same way. CSS Conf Budapest • September 2019 • @iamhiwelo

Sorry Medium… there is no standardise “readable” experience. CSS Conf Budapest • September 2019 • @iamhiwelo

CSS Conf Budapest • September 2019 • @iamhiwelo

Variable fonts will bring you here CSS Conf Budapest • September 2019 • @iamhiwelo

It can be a bit like the font-size toggle, but it can’t rely on the browser. CSS Conf Budapest • September 2019 • @iamhiwelo

“ But Damien… how do we implement such a thing? Should we give a complete freedom to our users? Question from a mysterious silent member from the audience

Hell no! CSS Conf Budapest • September 2019 • @iamhiwelo

But first, let’s have a small break!

What is the variable part of a variable font?

There is 4 registered axes. CSS Conf Budapest • September 2019 • @iamhiwelo

The weight.

CSS Conf Budapest • September 2019 • @iamhiwelo

The width.

CSS Conf Budapest • September 2019 • @iamhiwelo

Roman vs italic. (but please don’t +) 3.

CSS Conf Budapest • September 2019 • @iamhiwelo

The slant. (please stay also away from this one) 4.

CSS Conf Budapest • September 2019 • @iamhiwelo

🎁 Of course, there is a bonus one!

Optical size is an old design concept finally available for our Web experiences. CSS Conf Budapest • September 2019 • @iamhiwelo

This option can definitely be a game changer. It can be use as a variety of presets. CSS Conf Budapest • September 2019 • @iamhiwelo

CSS Conf Budapest • September 2019 • @iamhiwelo

Usually, each preset is one of the text variations defined in design systems, like: body, small text, caption, subhead, display variations CSS Conf Budapest • September 2019 • @iamhiwelo

CSS Conf Budapest • September 2019 • @iamhiwelo

🎊 And maybe more than just one bonus.

Each font designer can define their own custom axes. CSS Conf Budapest • September 2019 • @iamhiwelo

Custom axes are defined with a 4-letters tag. CSS Conf Budapest • September 2019 • @iamhiwelo

For dyslexic users, there is 3 main axes to watch: ascender or descender length, bowl size and bowl shape. CSS Conf Budapest • September 2019 • @iamhiwelo

CSS Conf Budapest • September 2019 • @iamhiwelo

I swear, I’m done with most of the talking!

Wanna experiment with your projects?

CSS Conf Budapest • September 2019 • @iamhiwelo

Adapting the font design to the message, like this experimentation by the BBC

You can experiment with colours font and font variations

You can be creative, while offering an easy way for people to remove the custom font if needed

Finally, I would advise you to follow David Jonathan Ross. CSS Conf Budapest • September 2019 • @iamhiwelo

But also to read BBC’s experimentations, and to visit v-fonts.com and axis-praxis.org. CSS Conf Budapest • September 2019 • @iamhiwelo

One font file to rule them all. Ready to implement?

Bedankt! . Merci beaucoup ! 1 Tack så mycket! / Thank you! 2 Tusen takk! 0 Vielen Dank! 3 @iamhiwelo

Damien Senger Queer designer who codes, specialised in accessibility and design systems. raccoon.studio • noti.st/hiwelo @iamhiwelo