Golden Rules for Typography on the Web

A presentation at Typographische Gesellschaft Austria in February 2019 in Vienna, Austria by Richard Rutter

Slide 1

Golden Rules for Typography on the Web Richard Rutter, Clearleft tga

Slide 2

Slide 3

Slide 4

Photo: Marc Norman Francis

Slide 5

Golden Rules for Typography on the Web Richard Rutter, Clearleft tga

Slide 6

Photo: Marc Thiele

Slide 7

“It is only logical to say that a web designer should get good training in typography.” Oliver Reichenstein, Web Design is 95% Typography https://ia.net/know-how/the-web-is-all-about-typography-period

Slide 8

image of bad sameness Photo: Indra Kupferschmid

Slide 9

“ There are important differences between good or poor typography that appear to have little effect on reading speed and comprehension.” Dr. Kevin Larson (Microsoft) and Dr. Rosalind W. Picard (MIT)

Slide 10

“Good quality typography is responsible for greater engagement during reading.” Dr. Kevin Larson (Microsoft) and Dr. Rosalind W. Picard (MIT)

Slide 11

“Good typography induces a good mood.” Dr. Kevin Larson (Microsoft) and Dr. Rosalind W. Picard (MIT)

Slide 12

Good typography induces a good mood!

Slide 13

№1 Don’t trust computers tga

Slide 14

Slide 15

Slide 16

№2 Use the default font size for paragraph text tga

Slide 17

Photo: Jon Tan

Slide 18

№3 Adjust type size according to reading distance tga

Slide 19

channel4.com/programmes/father-ted/

Slide 20

Slide 21

30 2.61801 sizecalc.com 30

Slide 22

60 5.236021 sizecalc.com 30

Slide 23

Slide 24

45 3.927016 sizecalc.com 30

Slide 25

Slide 26

p { font-size: 16px; } @media screen and (min-width: 60em) { p { font-size: 18px; } } @media screen and (min-width: 120em) { p { font-size: 22px; } }

Slide 27

“ When it comes to typography, on screens or otherwise, size matters. Physical size affects optical issues that change how the eye and brain process typographic images.” Nick Sherman, Responsive Typography is a Physical Discipline http://alistapart.com/column/responsive-typography-is-a-physical-discipline

Slide 28

№4 Adjust the font size if the typeface requires it tga

Slide 29

Altis Helvetica Futura Lato

Slide 30

Slide 31

wbtyp.net/58

Slide 32

Typeface Aspect Value Helvetica 0.521 Lato 0.507 Futura 0.417 Altis 0.542

Slide 33

Adjusting for ratio of aspect values: font size × Helvetica ÷ Typeface = adjusted size So equivalent size for Lato is: 16 × 0.521 ÷ 0.507 = 16.5px Futura: 16 × 0.521 ÷ 0.417 = 20.1px Altis: 16 × 0.521 ÷ 0.542 = 15.2px

Slide 34

Slide 35

№5 Set tables to be read tga

Slide 36

“Tabular matter need no longer be a rather unpleasant job to design: on the contrary, it can become a really charming and artistic exercise.” Jan Tschichold, Asymmetric Typography

Slide 37

Slide 38

Slide 39

Slide 40

<td align=”char” char=”×”> td { text-align: “×” center; }

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

How to make a table readable 1. Remove stretch and size columns to data 2. Remove fills, gridlines, border and bolding. 3. Left-align text, right-align numbers and align headings with data. 4. Put white space to work to group and separate. 5. Use tabular lining numerals, consistent precision, and remove repetition.

Slide 51

№6 Set text at display sizes, even on small screens tga

Slide 52

Billboard

Slide 53

Slide 54

Slide 55

thegreatdiscontent.com

Slide 56

Slide 57

Slide 58

thegreatdiscontent.com

Slide 59

70 25 sizecalc.com sizecalc.com 122.763623

Slide 60

Slide 61

30 12 sizecalc.com sizecalc.com 137.491541

Slide 62

Slide 63

“ Good design is about firstly making people want to read, then about telling stories.” Mark Porter, former Creative Director at the Guardian

Slide 64

Slide 65

№7 Resize display text as you would an image tga

Slide 66

h1 { font-size: 13vw; /* 1vw = 1% viewport width */ }

Slide 67

The Meaning of Science The Meaning of Science

Slide 68

The Meaning of Science The Meaning of Science

Slide 69

The Meaning of Science The Meaning of Science

Slide 70

The Meaning of Science The Meaning of Science

Slide 71

h1 { font-size: 13vmin; /* 1vmin = 1% viewport width or height, whichever is smaller */ }

Slide 72

Slide 73

Slide 74

h2 { font-size: calc(0.5rem + 2.5vmin); } Sets 16px text for 320px screen Sets 27px text for 768px screen (as opposed to 38px)

Slide 75

№8 Influence the way people feel through type #summit17

Slide 76

“Even if people are not consciously aware of the type they’re reading, they’ll certainly be affected by it.” Tobias Frere-Jones, Helvetica (dir. Gary Huswitt, 2007).

Slide 77

Slide 78

TEDxBedford

Slide 79

You can influence the way people feel

Slide 80

helsenorge.no

Slide 81

mkshft.org

Slide 82

www.cleopatra-marina.gr

Slide 83

Slide 84

Slide 85

№9 Optimise page render timing tga

Slide 86

Slide 87

Aventurier

Slide 88

css-tricks.com/font-display-masses/

Slide 89

font-display values swap fallback text is shown immediately until the webfont loads fallback text invisible for <100ms then shown with fallback font until webfont loads (provided that happens within 3 seconds) optional like fallback but browser decides whether a webfont should be used at all (depends on connection speed) block Block rendering while downloading the webfont for up to three seconds. After three seconds the fallback font will be shown. If the webfont loads afterwards, show the webfont. auto browser default (usually block)

Slide 90

@font-face { font-family: “Open Sans”; font-weight: 400; font-style: normal; src: url(“OpenSans.woff2”) format(“woff2”), url(“OpenSans.woff”) format(“woff”); font-display: fallback; }

Slide 91

Preload the critical font <head> <link rel=”preload” href=”nicefont.woff2” as=”font” type=”font/woff2” crossorigin> … </head>

Slide 92

“Multi-stage font loading approaches to squeeze every last drop of performance out of our web font rendering.” zachleat.com/web/the-compromise/

Slide 93

npmjs.com/package/glyphhanger

Slide 94

Strongman Hafþór Júlíus Björnsson is launching his own brand of vodka.

Slide 95

Strongman Hafþór Júlíus Björnsson is launching his own brand of vodka. Björnsson

Slide 96

№10 Learn to use variable fonts tga

Slide 97

Venn by Dalton Maag daltonmaag.com/library/venn

Slide 98

Noordzij Cube by David Jonathan Ross vimeo.com/73025354

Slide 99

“One of the reasons we chose to use three-digit numbers was to support intermediate values in the future.” Håkum Wiem Lie, www-style@w3.org mailing list https://lists.w3.org/Archives/Public/www-style/2015Jan/0078.html

Slide 100

Slide 101

Slide 102

Slide 103

Registered axes of variation weight wght font-weight width wdth font-stretch any integer from 1–999 100% is predefined as normal 50% as ultra-condensed 200% as ultra-expanded italic ital font-style italic slant slnt font-style angle value oblique -90deg to oblique 90deg optical size opsz font-optical-sizing auto

Slide 104

Slide 105

Slide 106

Slide 107

Slide 108

Slide 109

Slide 110

27 kb 2018.ampersandconf.com

Slide 111

2018.ampersandconf.com

Slide 112

clearleft.com/posts/how-to-use-variable-fonts-in-the-real-world

Slide 113

@font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff2’); }

Slide 114

@font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff2’); font-style: normal; font-stretch: normal; font-weight: normal; }

Slide 115

@font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff2’); font-style: oblique –90 90; font-stretch: 50% 200%; font-weight: 1 999; }

Slide 116

Slide 117

Golden Rules for Typography on the Web 1. Don’t trust computers 2. Use the default font size for paragraph text 3. Adjust type size according to reading distance 4. Adjust the font size if the typeface requires it 6. Set text at display sizes, even on small screens 7. Resize display text as you would an image 8. Influence the way people feel through type 9. Optimise page render timing 10. Learn to Use Variable Fonts 5. Set tables to be read tga

Slide 118

Richard Rutter, Clearleft @clagnut @webtypography https://noti.st/rar tga