Variable fonts & readability: the rising of custom reading experiences

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

Slide 1

Slide 1

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

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Hi! 👋 I’m Damien.

Slide 11

Slide 11

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

Slide 12

Slide 12

Slide 13

Slide 13

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 🦝 ⏳

Slide 14

Slide 14

Buckle up! Let’s talk about readability.

Slide 15

Slide 15

But first, why?

Slide 16

Slide 16

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

To understand readability, you need to know dyslexia.

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

How do we read?

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

Readability READABILITY CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

So, what’s the point?

Slide 45

Slide 45

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

Slide 46

Slide 46

credits: Mijksenaar

Slide 47

Slide 47

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

Slide 48

Slide 48

A tracking depending of the context credits: Mijksenaar

Slide 49

Slide 49

A system as consistent as possible credits: Mijksenaar

Slide 50

Slide 50

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

Slide 51

Slide 51

Slide 52

Slide 52

Variable fonts will help you do the extra mile.

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

“ 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

Slide 64

Slide 64

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

Slide 65

Slide 65

But first, let’s have a small break!

Slide 66

Slide 66

What is the variable part of a variable font?

Slide 67

Slide 67

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

Slide 68

Slide 68

  1. The weight.

Slide 69

Slide 69

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 70

Slide 70

  1. The width.

Slide 71

Slide 71

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 72

Slide 72

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

Slide 73

Slide 73

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 74

Slide 74

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

Slide 75

Slide 75

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 76

Slide 76

🎁 Of course, there is a bonus one!

Slide 77

Slide 77

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

Slide 78

Slide 78

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

Slide 79

Slide 79

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 80

Slide 80

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

Slide 81

Slide 81

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 82

Slide 82

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 83

Slide 83

🎊 And maybe more than just one bonus.

Slide 84

Slide 84

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

Slide 85

Slide 85

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

Slide 86

Slide 86

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

Slide 87

Slide 87

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

Slide 88

Slide 88

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 89

Slide 89

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

Slide 90

Slide 90

Wanna experiment with your projects?

Slide 91

Slide 91

CSS Conf Budapest • September 2019 • @iamhiwelo

Slide 92

Slide 92

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

Slide 93

Slide 93

You can experiment with colours font and font variations

Slide 94

Slide 94

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

Slide 95

Slide 95

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

Slide 96

Slide 96

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

Slide 97

Slide 97

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

Slide 98

Slide 98

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

Slide 99

Slide 99

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