13 Golden Rules of Typography on the Web

A presentation at Web Directions Summit 2017 in November 2017 in Sydney NSW, Australia by Richard Rutter

Slide 1

13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

Slide 2

13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

Slide 3

13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

Slide 4

Photo: Marc Thiele

Slide 5

“ It is only logical to say that a web designer should get good training in t ypography.” Oliver Reichenstein, Web Des i gn i s 9 5 % T y pogra ph y

h ! ps://ia.net/know-how/the-web-is-all-about-typography-period

Slide 6

image of bad sameness Photo: Indra Kupferschmid

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

Good typography induces a good mood!

Slide 11

#summit17 Learn to relinquish control № 1

Slide 12

“ The sage … accepts the ebb and flow of things, Nurtures them, but does not own them. ” John Allsop, A Dao of Web Design

h ! ps://alistapart.com/article/dao

Slide 13

#summit17 Don’t trust computers № 2

Slide 14

Slide 15

Slide 16

#summit17 Use the default font size for paragraph text № 3

Slide 17

Photo: Jon Tan

Slide 18

#summit17 Adjust type size according to reading distance № 4

Slide 19

channel4.com/programmes/father-ted/

Slide 20

channel4.com/programmes/father-ted/

Slide 21

Slide 22

sizecalc.com sizecalc.com 30

Slide 23

sizecalc.com sizecalc.com 30 3 0

Slide 24

sizecalc.com sizecalc.com 30 3 0 2.61801

Slide 25

sizecalc.com sizecalc.com

Slide 26

sizecalc.com sizecalc.com 6 0 3 0 5.236021

Slide 27

Slide 28

sizecalc.com sizecalc.com

Slide 29

sizecalc.com sizecalc.com 4 5 3 0 3.927016

Slide 30

Slide 31

p { font-size: 16px ; }

Slide 32

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

Slide 33

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

Slide 34

W hen 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

h ! p://alistapart.com/column/responsive-typography-is-a-physical-discipline “

Slide 35

#summit17 Adjust the font size if the typeface requires it № 5

Slide 36

Altis Helvetica Futura Lato

Slide 37

Slide 38

wbtyp.net/58

Slide 39

Typeface Aspect Ratio Helvetica 0 . 521 Lato 0 . 507 Futura 0 . 417 Altis 0 . 542

Slide 40

Adjusting for aspect ratio: 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 41

Slide 42

#summit17 Set tables to be read № 6

Slide 43

“ Tabular ma " er 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 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

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

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

How to make a table readable 1. Remove stretch and size columns to data

Remove fills, gridlines, border and bolding.

Le " -align text, right-align numbers and align headings with data.

Put white space to work to group and separate.

Use tabular lining numerals, consistent precision, and remove repetition.

Slide 60

#summit17 Set text at display sizes, even on small screens № 7

Slide 61

Billboard

Slide 62

Slide 63

Slide 64

Slide 65

thegreatdiscontent.com

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

thegreatdiscontent.com

Slide 72

sizecalc.com sizecalc.com

Slide 73

sizecalc.com sizecalc.com 7 0 2 5 122.763623

Slide 74

Slide 75

sizecalc.com sizecalc.com

Slide 76

sizecalc.com sizecalc.com 3 0 1 2 137.491541

Slide 77

Slide 78

Slide 79

Good design is about firstly making people

want to read, then about telling stories. ” Mark Porter, former Creative Director at the Guardian

“

Slide 80

Slide 81

#summit17 Resize display text as you would an image № 8

Slide 82

h1 {

font-size: 13vw ;

		/*	1vw	=	1%	viewport	width	*/

}

Slide 83

The Meaning of Science

Slide 84

The Meaning of Science The Meaning of Science

Slide 85

The Meaning of Science The Meaning of Science

The Meaning of Science

Slide 86

The Meaning of Science The Meaning of Science The Meaning of Science

Slide 87

The Meaning of Science The Meaning of Science

Slide 88

h1 { font-size: 13 vmin ;

/* 1vmin = 1% viewport width or height, whichever is smaller */

}

Slide 89

The Meaning of Science The Meaning of Science

Slide 90

The Meaning of Science The Meaning of Science

Slide 91

#summit17 Influence the way people feel through type № 9

Slide 92

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 Huswi ! , 2007). “

Slide 93

Slide 94

TEDxBedford

Slide 95

TEDxBedford

Slide 96

Yo u can influence the way people feel

Slide 97

helsenorge.no

Slide 98

mkshft.org

Slide 99

www.cleopatra-marina.gr

Slide 100

Slide 101

Slide 102

I hate obtuse theoretical mathematics

Slide 103

I love little fluffy kittens

Slide 104

This is a story about someone who lived in Happyland. His name was Mr Happy and he was f a t and round, and happy. One day Mr Happy went for a walk in the woods.

Slide 105

#summit17 Don’t be reverential, dogmatic or ordinary № 10

Slide 106

Beatrice Ward

Slide 107

People who love ideas must have a love of words. They will take a vivid interest in the clothes that words wear.” Beatrice Warde, The Crystal Goblet

“

Slide 108

Slide 109

Slide 110

Why we should give free money to everyone

Slide 111

Slide 112

#summit17 Reduce your payload № 11

Slide 113

WOFF2 provides improved compression and thus lower use of network bandwidth, while still allowing fast decompression even on mobile devices. ” WOFF File Format 2.0, W3C Candidate Recommendation

“

Slide 114

@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url("OpenSans.woff2") format("woff2") ,

url("OpenSans.woff") format("woff"); }

Slide 115

Strongman Haf þ ór Júlíus

Björnsson is launching his

own brand of vodka.

Slide 116

Strongman Haf þ ó r J ú l í us

Bj ö rnsson is launching his

own brand of vodka.

Slide 117

Strongman Haf þ ó r J ú l í us

Bj ö rnsson is launching his

own brand of vodka. Bj ö rnsson

Slide 118

#summit17 Optimise page render timing № 12

Slide 119

Slide 120

Aventurier

Slide 121

Aventurier

Slide 122

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

Slide 123

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. A " er three seconds the fallback font will be shown. If the webfont loads a " erwards, show the webfont.

auto browser default (usually block )

font-display values

Slide 124

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. A " er three seconds the fallback font will be shown. If the webfont loads a " erwards, show the webfont.

auto browser default (usually block )

font-display values

Slide 125

@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 126

<head> <link rel="preload" href="nicefont.woff2" as="font"

					type=&#34;font/woff2&#34;	crossorigin>

…

</head> Preload the critical font

Slide 127

One way we can regain control over the loading behavior is to use font load events.” Filament Group, Font Loading Revisted with Font Events

www.filamentgroup.com/lab/font-events.html

“

Slide 128

#summit17 Learn to use variable fonts № 13

Slide 129

Slide 130

Slide 131

Slide 132

Slide 133

Slide 134

Slide 135

Slide 136

Slide 137

Slide 138

Slide 139

Pre-defined axes of variation

Slide 140

Pre-defined axes of variation weight width italic slant optical size

Slide 141

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz

Slide 142

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz font-weight font-stretch font-style font-style font-optical-sizing

Slide 143

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz font-weight font-stretch font-style font-style font-optical-sizing any integer from 1–999 100% is predefined as normal

50% as ultra-condensed

200% as ultra-expanded italic angle value oblique -90deg

oblique 90deg auto

Slide 144

Slide 145

Slide 146

Slide 147

Slide 148

font-variation-settings: 'ytse' 24 font-variation-se " ings

Slide 149

font-variation-settings: 'ytse' 24 font-variation-settings: 'wght' 100 , 'wdth' 400 , 'opsz' 20 font-variation-se " ings

Slide 150

Slide 151

@font-face { font-family: 'Nicefont';

src: url('nicefont_var.woff2') format('woff-variations') ,

url('nicefont_regular.woff2') format('woff2'); font-weight: normal; font-style: normal; }

Slide 152

@font-face { font-family: 'Nicefont';

src: url('nicefont_var.woff2') format('woff-variations') ,

url('nicefont_regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Nicefont'; src: url('nicefont_var.woff2') format('woff-variations'),

url('nicefont_black.woff2') format('woff2') ;

font-weight: 800 ; font-style: normal; }

Slide 153

axis-praxis.org

Slide 154

13 Golden Rules for Typography on the Web 1. Learn to relinquish control

Don’t trust computers 3. Use the default font size for paragraph text 4. Adjust type size according to   reading distance 5. Adjust the font size if the typeface   requires it 6. Set tables to be read

Set text at display sizes, even on   small screens 8. Resize display text as you would an image 9. Influence the way people feel through type 10. Don’t be reverential, dogmatic   or ordinary 11. Reduce your payload 12. Optimise page render timing 13. Learn to Use Variable Fonts #summit17

Slide 155

Slide 156

Slide 157

Go to wbtyp.net

use summit17 for 25% off

Slide 158

Richard Ru ! er, Clearle "

@clagnut

@webtypography #summit17