Variable fonts & readability: the rising of custom reading experiences

A presentation at CSSConf Budapest in September 2019 in Budapest, Hungary by Damien Senger

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

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.

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

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.

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

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

What is the variable part of a variable font?

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

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

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

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

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

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

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

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

Damien Senger
@hiwelo

1 / 99

A good reading experience is something highly personal: We all need different environments, we all love different font faces and we all have a specific medium at the bottom of our heart. With only one design, how can we accommodate everyone? Variable fonts and CSS are here to help us offering inclusive reading experiences.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Kicking of @cssconfbudapest with @giuliacardieri on CSS games & drawings, @iamhiwelo on fonts & readability, and @malchata on Houdini paint worklets. #sketchnotes #CSSconfBP pic.twitter.com/fMyEgHzVdZ
— Malwine (@malweene) September 25, 2019
Reading might sound mundane but there's more to it than you might think as @iamhiwelo is illustrating at #cssconfbp. pic.twitter.com/RMUarq4n0L
— CSSConf Budapest (@cssconfbudapest) September 25, 2019
thank you @iamhiwelo for that really eye-opening talk abt all the potential benefits variable fonts can bring to #ally on the web#cssconfbp pic.twitter.com/u3q24AQ9sB
— HJ Chen @ #jsconfbp 🇭🇺 (@hj_chen) September 25, 2019
Thank you so much for having me, that was great to have the opportunity of being part of your lineup 😍
— Damien Senger • hiwelo. @ CSS/JSConf Budapest 🇭🇺 (@iamhiwelo) September 25, 2019
To make an accessible web, designers and developers need to communicate and work hand in hand - @iamhiwelo #devux ❤️ pic.twitter.com/aUwUi8edy1
— Yu Ling Cheng @CSSConfBudappest (@YuLingEC) September 25, 2019
@iamhiwelo Such am AMAZING talk! Variable fonts and the readability around it. Thank you so much for sharing your research. :-) @cssconfbudapest - isn’t he awesome!! #CSSConfBP
— Damini Satya @JSConf Budapest (@Daminisatya) September 25, 2019
Such a great day! I spoke @cssconfbudapest & I really enjoyed being surrounded by such a cheerful team 😍 (thx @hj_chen for your great MCing!), also I’m hearing a lot of things abt design systems which is making me so happy, & TIL there is a new @abookapart coming on this topic! pic.twitter.com/bzizh5H3JU
— Damien Senger • hiwelo. @ CSS/JSConf Budapest 🇭🇺 (@iamhiwelo) September 25, 2019
Seconded. What a great presentation of so much information! 💖
— Jeremy in Budapest 🇭🇺 (@malchata) September 25, 2019
Learning about something we use everyday : fonts 🔡. Did you know you could use variable fonts to change the font weight? So you only have one font file to import. #performance #accessibility Thanks @iamhiwelo 😀@cssconfbudapest pic.twitter.com/RBIlpfdD1i
— Yu Ling Cheng @CSSConfBudappest (@YuLingEC) September 25, 2019
> Nobody *wants* to create an inaccessible interface@iamhiwelo #cssconfbp
— Siôn Le Roux (@sinisterstuf) September 25, 2019
Lovely talk from @iamhiwelo about reading and variable fonts. #cssconfbp pic.twitter.com/2JoGxzz7a4
— Paul Verbeek-Mast (@paul_v_m) September 25, 2019

Variable fonts & readability: the rising of custom reading experiences

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Buzz and feedback