The Scoville Scale of Web Font Loading Opinions

A presentation at Beyond Tellerand in May 2019 in Düsseldorf, Germany by Zach Leatherman

Slide 1

Slide 1

THE SCOVILLE SCALE OF WEB FONT LOADING OPINIONS

Slide 2

Slide 2

THE SCOVILLE SCALE OF WEB FONT LOADING OPINIONS

Slide 3

Slide 3

@zachleat @zachleat.com @Web Craftsperson

Slide 4

Slide 4

https://www.deviantart.com/packrobottom/art/Starbucks-388727959 Wilbur Scoville

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

SCOVILLE HEAT UNITS

Slide 9

Slide 9

S H U

Slide 10

Slide 10

0SHU

Slide 11

Slide 11

10 SHU

Slide 12

Slide 12

100 SHU

Slide 13

Slide 13

1.000 SHU

Slide 14

Slide 14

10.000 SHU

Slide 15

Slide 15

100.000 SHU

Slide 16

Slide 16

100.000+ SHU

Slide 17

Slide 17

Slide 18

Slide 18

0 SHU THE BELL PEPPER

Slide 19

Slide 19

it’s GIF not GIF

Slide 20

Slide 20

1 № it’s WEB FONT not WEBFONT

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

THE BANANA PEPPER

Slide 25

Slide 25

! 500 Scoville Heat Units

Slide 26

Slide 26

2 № WEBFONTS ARE GOOD YOU SHOULD USE WEBFONTS

Slide 27

Slide 27

2 № WEB FONTS ARE GOOD YOU SHOULD USE WEB FONTS

Slide 28

Slide 28

Slide 29

Slide 29

Using system fonts means no added “ download time, no extra data used, and a look designed to blend it with the device you’re using.” April 2018

Slide 30

Slide 30

Slide 31

Slide 31

“

Slide 32

Slide 32

TYPE IS HOW WE DRESS OUR CONTENT

Slide 33

Slide 33

font-family: Helvetica

Slide 34

Slide 34

font-family: Arial

Slide 35

Slide 35

font-family: Papyrus

Slide 36

Slide 36

I LOVE TYPE

Slide 37

Slide 37

I LOVE TYPE

Slide 38

Slide 38

LOVE TYP

Slide 39

Slide 39

g

Slide 40

Slide 40

g

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

ag DOUBLE-STORY SINGLE-STORY

Slide 44

Slide 44

a DOUBLE-STORY g SINGLE-STORY

Slide 45

Slide 45

PERFORMANCE BUDGETS

Slide 46

Slide 46

LESS IS MORE

Slide 47

Slide 47

TRADE BYTES FOR FEATURES

Slide 48

Slide 48

Chrome Developer Tools WEB FONT SEARCH

Slide 49

Slide 49

@font-face Found 19 matching lines in 5 files.

Slide 50

Slide 50

Slide 51

Slide 51

TABASCO SAUCE

Slide 52

Slide 52

! 2000 Scoville Heat Units 2 Kiloscovilles 1,95 Kibiscovilles

Slide 53

Slide 53

3 № YOUR WEB-FONT FALLBACK STACK IS TOO COMPLEX

Slide 54

Slide 54

font-family: Helvetica, Arial, sans-serif;

  • Helvetica Arial system default

Slide 55

Slide 55

font-family: sans-serif;

  • system default = Helvetica Arial

Slide 56

Slide 56

erif; fault = Helvetica Arial Roboto Liberation Sans

Slide 57

Slide 57

http://fontfamily.io/

Slide 58

Slide 58

font-family: Times, Times New Roman, serif

  • Times Times New Roman system default

Slide 59

Slide 59

font-family: serif

  • system default = Times Times New Roman

Slide 60

Slide 60

ult = Times Times New Roman Noto Serif Liberation Serif

Slide 61

Slide 61

MINIFIERS THAT DON’T DO THIS CSSO … …

Slide 62

Slide 62

THE JALAPEÑO

Slide 63

Slide 63

! 5750 Scoville Heat Units 5,75 Kiloscovilles 5,61 Kibiscovilles

Slide 64

Slide 64

4 № BULLETPROOF FONT FACE IS DEAD $

Slide 65

Slide 65

ont FACE

Slide 66

Slide 66

D E AG UR CO DIS @font-face { font-family: Open Sans; src: url(‘opensans.eot’); src: url(‘opensans.eot?#iefix’) format(‘embedded-opentype’), url(‘opensans.woff’) format(‘woff’), url(‘opensans.ttf’) format(‘truetype’), url(‘opensans.svg#svgFontName’) format(‘svg’); }

Slide 67

Slide 67

OD GO @font-face { font-family: Open Sans; src: url(‘opensans.woff2’) format(‘woff2’), url(‘opensans.woff’) format(‘woff’); }

Slide 68

Slide 68

G NIN R WA @font-face { font-family: Open Sans; src: local(‘Open Sans Regular’), local(‘OpenSans-Regular’), url(‘opensans.woff2’) format(‘woff2’), url(‘opensans.woff’) format(‘woff’); }

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

“ Never mix locally installed fonts and web fonts in @font-face rules. Assuming two fonts are identical because they share a name is a recipe for disaster.” https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html

Slide 72

Slide 72

oogle

Slide 73

Slide 73

Foogle Gonts

Slide 74

Slide 74

Firefox Developer Tools FONTS TAB

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

4½ № FONTS ARE SOFTWARE THEY NEED MAINTENANCE & UPDATES TOO

Slide 79

Slide 79

THE CHIPOTLE

Slide 80

Slide 80

! 6500 Scoville Heat Units 6,5 Kiloscovilles 6,34 Kibiscovilles

Slide 81

Slide 81

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 82

Slide 82

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 83

Slide 83

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 84

Slide 84

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 85

Slide 85

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 86

Slide 86

5 № VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 87

Slide 87

VISIBLE TEXT IS MORE READABLE THAN INVISIBLE TEXT

Slide 88

Slide 88

@zachleat https://twitter.com/jmuspratt/status/561239961924403200

Slide 89

Slide 89

@font-face { font-display: swap; }

Slide 90

Slide 90

Slide 91

Slide 91

T T

Slide 92

Slide 92

font-family: ambroise-francois-std, “Bodoni 72”, Didot, “Hoefler Text”, serif;

Slide 93

Slide 93

THE CAYENNE PEPPER

Slide 94

Slide 94

! 40.000 Scoville Heat Units 40 Kiloscovilles 39,06 Kibiscovilles

Slide 95

Slide 95

THE REAL CRITERIA TO EVALUATE WEB FONT LOADING:

Slide 96

Slide 96

PRELOAD PRECONNECT VARIABLE GROUPED REPAINTS FONTS SUBSETTING VISIBLEINTERMEDIATE TEXT FONT-SYNTHESIS FILE COMPRESSION TWO STAGE LOAD INCREMENTAL TRANSFER

Slide 97

Slide 97

6 № REAL ITALICS

Slide 98

Slide 98

6 № REAL ITALICS

Slide 99

Slide 99

@font-face { font-family: Lato; src: url(‘Lato-Regular.woff2’) format(‘woff2’), url(‘Lato-Regular.woff’) format(‘woff’); }

Slide 100

Slide 100

@font-face { font-family: Lato; src: url(‘Lato-Regular.woff2’) format(‘woff2’), url(‘Lato-Regular.woff’) format(‘woff’); } @font-face { font-family: Lato; src: url(‘Lato-Italic.woff2’) format(‘woff2’), url(‘Lato-Italic.woff’) format(‘woff’); font-style: italic; }

Slide 101

Slide 101

%

Slide 102

Slide 102

https://pdx.ashur.cab/

Slide 103

Slide 103

https://pdx.ashur.cab/

Slide 104

Slide 104

THE HABANERO

Slide 105

Slide 105

! 225.000 Scoville Heat Units 225 Kiloscovilles 219,72 Kibiscovilles

Slide 106

Slide 106

IANAL

Slide 107

Slide 107

Slide 108

Slide 108

LICENSING

Slide 109

Slide 109

  1. SELF HOSTED 2. CLOUD HOSTED

Slide 110

Slide 110

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

Slide 111

Slide 111

  1. SUBSCRIPTION $X per month = Up to Y Pageviews per Month $X per month = Up to Y Unique visitors per Month $X per month = Unlimited

Slide 112

Slide 112

  1. PERPETUAL $X Once = Up to Y Pageviews per Month

Slide 113

Slide 113

  1. PREPAID $X, Once = Exactly Y Pageviews

Slide 114

Slide 114

  1. FREE $0 = Unlimited

Slide 115

Slide 115

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

Slide 116

Slide 116

LICENSING IS COMPLICATED

Slide 117

Slide 117

7 № LICENSING COMPLICATES PERFORMANCE

Slide 118

Slide 118

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

Slide 119

Slide 119

TRACKERS, TRACK

Slide 120

Slide 120

TRACKERS, TRACK PAGEVIEWS UNIQUE VISITORS

Slide 121

Slide 121

YourFontsWebFontsKit.css @import url(“//hello.yourfonts.net/count/UNIQUE-ID”); @font-face { /* … / } @font-face { / … */ }

Slide 122

Slide 122

572ms on Fast 3G & TRACKERS

Slide 123

Slide 123

568ms on Fast 3G & TRACKERS

Slide 124

Slide 124

We can do better.

Slide 125

Slide 125

https://djr.com/

Slide 126

Slide 126

THE TRINIDAD SCORPION

Slide 127

Slide 127

1.463.700 Scoville Heat Units 1,46 Megascovilles 1,395 Mebiscovilles

Slide 128

Slide 128

8 № ICON FONTS: PLEASE STOP

Slide 129

Slide 129

⃞

Slide 130

Slide 130

PRIVATE USE AREA ICON FONT 0xe001 0xe002 0xe003

Slide 131

Slide 131

Slide 132

Slide 132

Slide 133

Slide 133

Slide 134

Slide 134

https://twitter.com/ckollars/status/1026824074696249346

Slide 135

Slide 135

https://twitter.com/ckollars/status/1026824074696249346

Slide 136

Slide 136

https://github.blog/2016-02-22-delivering-octicons-with-svg/

Slide 137

Slide 137

RENDERING ACCESSIBILITY FALLBACKS AUTHORING

Slide 138

Slide 138

https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

Slide 139

Slide 139

https://speakerdeck.com/ninjanails/death-to-icon-fonts

Slide 140

Slide 140

https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

Slide 141

Slide 141

https://css-tricks.com/icon-fonts-vs-svg/

Slide 142

Slide 142

  1. WEB STANDARDS

Slide 143

Slide 143

RN TTE PA TI- AN @font-face { /* Bad for icon fonts, don’t use this */ } font-display: swap;

Slide 144

Slide 144

RN TTE PA TI- AN @font-face { /* Bad for icon fonts, don’t use this */ } font-display: optional;

Slide 145

Slide 145

RN TTE PA TI- AN @font-face { /* Bad for icon fonts, don’t use this */ } font-display: fallback;

Slide 146

Slide 146

TG NO AT RE @font-face { /* The least worst option for icon fonts */ } font-display: block;

Slide 147

Slide 147

https://font-display.glitch.me/

Slide 148

Slide 148

THE CAROLINA REAPER

Slide 149

Slide 149

1.569.300 Scoville Heat Units 1,56 Megascovilles 1,49 Mebiscovilles

Slide 150

Slide 150

THE BEST WEB FONT HOST IS…

Slide 151

Slide 151

…A QUESTION THAT NEEDS MORE CONTEXT.

Slide 152

Slide 152

CONTENT HOSTING PROJECT TRAFFIC LONGEVITY BUDGET PAIN TOLERANCE EXPERTISE USERS PERFORMANCE REQUIREMENTS

Slide 153

Slide 153

THE BEST WEB FONT HOST FOR ME IS…

Slide 154

Slide 154

9 № SELF HOSTING

Slide 155

Slide 155

Find one that let’s you self host without a slow tracker.

Slide 156

Slide 156

Find one that let’s you self host without a sloww tracker.

Slide 157

Slide 157

Find one that let’s you self host without a slowww tracker.

Slide 158

Slide 158

Find one that let’s you self host without a slowwww tracker.

Slide 159

Slide 159

Find one that let’s you self host without a slowwwww tracker.

Slide 160

Slide 160

Find one that let’s you self host without a slowwwwww tracker.

Slide 161

Slide 161

THE DRAGON’S BREATH

Slide 162

Slide 162

2.480.000 Scoville Heat Units 2,48 Megascovilles 2,365 Mebiscovilles

Slide 163

Slide 163

https://html5test.com/

Slide 164

Slide 164

#HOTDRAMA

Slide 165

Slide 165

#HOTDRAMA

Slide 166

Slide 166

#HOTDRAMA

Slide 167

Slide 167

THE BEST WEB BROWSER FOR WEB FONTS IS…

Slide 168

Slide 168

Slide 169

Slide 169

3 4 5 7 8 font-display

Slide 170

Slide 170

2 3 4 5 7 8 preload

Slide 171

Slide 171

2 3 4 5 7 8 WOFF2

Slide 172

Slide 172

2 3 4 5 6 7 8 unicode-range

Slide 173

Slide 173

2 3 4 5 6 7 8 Variable Fonts

Slide 174

Slide 174

1 2 3 4 5 6 7 8 Default Visible Text

Slide 175

Slide 175

1 2 3 4 5 6 7 8 Color Fonts Open Type in SVG

Slide 176

Slide 176

1 2 3 4 5 6 7 8 CSS Font Loading API

Slide 177

Slide 177

1 2 3 4 5 6 7 8 DEVELOPER TOOLS Bonus

Slide 178

Slide 178

1 2 3 4 5 6 7 8

Slide 179

Slide 179

RIGHT NOW https://zachleat.com/web/scoville-scale/#bwb 10 FOR WEB FONTS № THE BEST WEB BROWSERS

Slide 180

Slide 180

‘

Slide 181

Slide 181

1 2 3 4 5 6 7 8 ‘-NORMALIZED FEATURE SUPPORT

Slide 182

Slide 182

1 2 3 4 5 ‘-NORMALIZED 6 FEATURE SUPPORT 7 8

Slide 183

Slide 183

3 8 4 5 2 7 1 6 https://zachleat.com/web/scoville-scale/#bwb

Slide 184

Slide 184

OVER TIME https://zachleat.com/web/scoville-scale/#bwb 10 FOR WEB FONTS № THE BEST WEB BROWSER

Slide 185

Slide 185

Slide 186

Slide 186

Typographers Foundries License Authors Hosting Providers Web Browsers Web Developers Web Designers

Slide 187

Slide 187

THE SCOVILLE SCALE OF WEB FONT LOADING OPINIONS THANK YOU @zachleat @zachleat.com

Slide 188

Slide 188

INSPIRED BY