Golden Rules of Typography on the Web

A presentation at CSS Day + UX Special in June 2018 in Amsterdam, Netherlands by Richard Rutter

Slide 1

Slide 1

Golden Rules for Typography on the Web Richard Ru ! er, Clearle " #cssday

Slide 2

Slide 2

Photo: Marc Thiele

Slide 3

Slide 3

“ It is only logical to say that a web designer should get good training in typography.” 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 4

Slide 4

image of bad sameness Photo: Indra Kupferschmid

Slide 5

Slide 5

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 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

Good typography induces a good mood!

Slide 9

Slide 9

“ 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 10

Slide 10

#cssday Don’t trust computers № 1

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

#cssday Use the default font size for paragraph text № 2

Slide 14

Slide 14

Photo: Jon Tan

Slide 15

Slide 15

#cssday Adjust type size according to reading distance № 3

Slide 16

Slide 16

channel4.com/programmes/father-ted/

Slide 17

Slide 17

Slide 18

Slide 18

sizecalc.com sizecalc.com 30 30 2.61801

Slide 19

Slide 19

sizecalc.com sizecalc.com 60 30 5.236021

Slide 20

Slide 20

Slide 21

Slide 21

sizecalc.com sizecalc.com 45 30 3.927016

Slide 22

Slide 22

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 23

Slide 23

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

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

Slide 24

Slide 24

#cssday Adjust the font size if the typeface requires it № 4

Slide 25

Slide 25

Altis Helvetica Futura Lato

Slide 26

Slide 26

Slide 27

Slide 27

wbtyp.net/58

Slide 28

Slide 28

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

Slide 29

Slide 29

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 30

Slide 30

Slide 31

Slide 31

#cssday Set tables to be read № 5

Slide 32

Slide 32

“ 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 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

<td align=&#34;char&#34; char=&#34;×&#34; > td { text-align: &#34;×&#34; center; }

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

How to make a table readable 1. Remove stretch and size columns to data 2. Remove fills, gridlines, border and bolding. 3. Le " -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 47

Slide 47

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

Slide 48

Slide 48

Billboard

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

thegreatdiscontent.com

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

thegreatdiscontent.com

Slide 55

Slide 55

sizecalc.com sizecalc.com 70 25 122.763623

Slide 56

Slide 56

Slide 57

Slide 57

sizecalc.com sizecalc.com 30 12 137.491541

Slide 58

Slide 58

Slide 59

Slide 59

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

Slide 60

Slide 60

Slide 61

Slide 61

#cssday Resize display text as you would an image № 7

Slide 62

Slide 62

h1 {

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

Slide 63

Slide 63

The Meaning of Science The Meaning of Science

Slide 64

Slide 64

The Meaning of Science The Meaning of Science

The Meaning of Science

Slide 65

Slide 65

The Meaning of Science The Meaning of Science

Slide 66

Slide 66

The Meaning of Science The Meaning of Science

Slide 67

Slide 67

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

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

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 71

Slide 71

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 72

Slide 72

Slide 73

Slide 73

TEDxBedford

Slide 74

Slide 74

Yo u can influence the way people feel

Slide 75

Slide 75

helsenorge.no

Slide 76

Slide 76

mkshft.org

Slide 77

Slide 77

www.cleopatra-marina.gr

Slide 78

Slide 78

Slide 79

Slide 79

Slide 80

Slide 80

I hate obtuse theoretical mathematics

Slide 81

Slide 81

I love little fluffy kittens

Slide 82

Slide 82

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 83

Slide 83

Beatrice Ward

Slide 84

Slide 84

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 85

Slide 85

Slide 86

Slide 86

Slide 87

Slide 87

Why we should give free money to everyone

Slide 88

Slide 88

Slide 89

Slide 89

#cssday Reduce your payload № 8

Slide 90

Slide 90

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 91

Slide 91

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

Slide 92

Slide 92

npmjs.com/package/glyphhanger

Slide 93

Slide 93

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

Slide 94

Slide 94

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

Slide 95

Slide 95

#cssday Optimise page render timing № 9

Slide 96

Slide 96

Slide 97

Slide 97

Aventurier

Slide 98

Slide 98

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

Slide 99

Slide 99

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 100

Slide 100

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

Slide 101

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

Slide 102

Slide 102

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

Slide 103

Slide 103

#cssday Learn to use variable fonts № 10

Slide 104

Slide 104

Venn by Dalton Maag daltonmaag.com/library/venn

Slide 105

Slide 105

Noordzij Cube by David Jonathan Ross vimeo.com/73025354

Slide 106

Slide 106

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

Pre-defined axes of variation weight wght font-weight any integer from 1–999 width wdth font-stretch 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 110

Slide 110

Slide 111

Slide 111

Slide 112

Slide 112

Slide 113

Slide 113

Slide 114

Slide 114

Slide 115

Slide 115

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

Slide 116

Slide 116

p { font-family: Amstelvar, serif; font-stretch: 85% ; } @media screen and (min-width: 60em ) { p { font-stretch: 95% ; } } @media screen and (min-width: 120em ) { p { font-stretch: 110% ; } } Variable fonts in responsive design

Slide 117

Slide 117

2018.ampersandconf.com 27 kb

Slide 118

Slide 118

Go to

ampersandconf.com

use cssday for 25% off Duke of York’s Picturehouse, Brighton29 JUNE 2018

Slide 119

Slide 119

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

Slide 120

Slide 120

medium.com/@clagnut/4494b3b7ecdc

Slide 121

Slide 121

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

Slide 122

Slide 122

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

Slide 123

Slide 123

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

Slide 124

@supports (font-variation-settings: normal) { @font-face { font-family: 'Nicefont'; src: url('nicefont_var.woff2') format('woff2');

font-weight: 1 999;

		}	

}

Slide 125

Slide 125

@supports (font-variation-settings: normal) { @font-face { font-family: 'Nicefont'; src: url('nicefont_var.woff2') format('woff2');

font-weight: 1 999;

		}	

} @supports not (font-variation-settings: normal) { @font-face { font-family: 'Nicefont'; src: url('nicefont_bold.woff2') format('woff2');

font-weight: 700;

		}	

}

Slide 126

Slide 126

@supports (font-variation-settings: normal) { @font-face { font-family: 'Nicefont'; src: url('nicefont_var.woff2') format('woff2');

font-weight: 1 999;

		}	

} @supports not (font-variation-settings: normal) { @font-face { font-family: 'Nicefont'; src: url('nicefont_light.woff2') format('woff2');

font-weight: 200;

		}	
		@font-face	{	
						font-family:	&#39;Nicefont&#39;;	
						src:	url(&#39;nicefont_regular.woff2&#39;)	format(&#39;woff2&#39;);	
						

font-weight: 400;

		}	
		@font-face	{	
						font-family:	&#39;Nicefont&#39;;	
						src:	url(&#39;nicefont_bold.woff2&#39;)	format(&#39;woff2&#39;);	
						

font-weight: 700;

		}	
		@font-face	{	
						font-family:	&#39;Nicefont&#39;;	
						src:	url(&#39;nicefont_xbold.woff2&#39;)	format(&#39;woff2&#39;);	
						

font-weight: 900;

		}	

}

Slide 127

Slide 127

Slide 128

Slide 128

axis-praxis.org

Slide 129

Slide 129

v-fonts.com

Slide 130

Slide 130

Slide 131

Slide 131

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 5. Set tables to be read 6. Set text at display sizes, even on 
 small screens 7. Resize display text as you would an image 8. Reduce your payload 9. Optimise page render timing 10. Learn to Use Variable Fonts #cssday

Slide 132

Slide 132

Go to wbtyp.net

use cssday for 25% off

Slide 133

Slide 133

Richard Ru ! er, Clearle "

@clagnut @webtypography h ! ps://noti.st/rar #cssday