Slide 1

Slide 1 text

A brief history of screen typography. BETTER LETTERS

Slide 2

Slide 2 text

Or: how designers broke the web in  the name of ‘good’ typography. BETTER LETTERS

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Better Letters A brief history of screen typography. FIRST, THERE  WAS THE WEB

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

My Title

My text.

Slide 9

Slide 9 text

Better Letters A brief history of screen typography. THEN,  DESIGNERS  RUINED IT

Slide 10

Slide 10 text

Cascading Style Sheets December 1996

Slide 11

Slide 11 text

My Title

h1 { text-indent: –100em; overflow: hidden; background: url('mytext.gif'); }

Slide 12

Slide 12 text

My Title

Slide 13

Slide 13 text

My Title text-indent: –100em; overflow: hidden;

Slide 14

Slide 14 text

text-indent: –100em; overflow: hidden;

Slide 15

Slide 15 text

My Title background: url('mytext.gif');

Slide 16

Slide 16 text

Better Letters A brief history of screen typography. WHAT ABOUT?

Slide 17

Slide 17 text

Scalable Inman Flash Replacement sIFR

Slide 18

Slide 18 text

‘While sIFR gives us better typography today, it is clearly not the solution for the next 20 years.’ Mike Davidson

Slide 19

Slide 19 text

Fonts for the People Cufón

Slide 20

Slide 20 text

‘Most font replacement techniques,  including my own, were meant as  stepping stones to @font-face.’ Simo Kinnunen

Slide 21

Slide 21 text

Better Letters A brief history of screen typography. WAIT A MINUTE

Slide 22

Slide 22 text

Supporting EOT since 1997 Internet Explorer 4

Slide 23

Slide 23 text

Better Letters A brief history of screen typography. SORRY,  FOILED AGAIN!

Slide 24

Slide 24 text

Late 2007 @font-face

Slide 25

Slide 25 text

Better Letters A brief history of screen typography. HOPE YOU LIKE ACRONYMS

Slide 26

Slide 26 text

EOT TTF OTF SVG WOFF WOFF2 Formats

Slide 27

Slide 27 text

Real fonts! Standards compliant Legit (if licensed) More choice For

Slide 28

Slide 28 text

Better Letters A brief history of screen typography. ALL IS FORGIVEN

Slide 29

Slide 29 text

Rendering File size Licensing Against

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Better Letters A brief history of screen typography. SHOW ME SOME CODE

Slide 37

Slide 37 text

@font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

@font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Slide 43

Slide 43 text

@font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Slide 44

Slide 44 text

@font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Slide 45

Slide 45 text

Embedding CSS JavaScript Webfont Loader

Slide 46

Slide 46 text

Better Letters A brief history of screen typography. LET’S GO SHOPPING

Slide 47

Slide 47 text

Self-hosted

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Hoefler & Co. Self-hosted

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Hoefler & Co. Commercial Type Self-hosted

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Hoefler & Co. Commercial Type Klim Type Foundry Self-hosted

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Hoefler & Co. Commercial Type Klim Type Foundry LineTo Self-hosted

Slide 56

Slide 56 text

Self-hosted FontShop MyFonts Fontspring Fontstand* Hoefler & Co. Commercial Type Klim Type Foundry LineTo

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Middlemen Typekit Fontdeck Webtype Google Fonts Fonts.com

Slide 59

Slide 59 text

Better Letters A brief history of screen typography. BE  RESPONSIBLE

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

= 2.25 MB

Slide 62

Slide 62 text

Licensing Usually by weight Priced by visitors or page views Options for web and apps Plan ahead!

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Better Letters A brief history of screen typography. TYPE TIPS

Slide 65

Slide 65 text

‘Web design is 95% typography.’ Oliver Reichenstein October 2006

Slide 66

Slide 66 text

Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuﬀ. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. "Shuffle" confirms officer's son - 6x4 BY NATHANIEL HORNBLOWER Example text

Slide 67

Slide 67 text

1. Leading & Tracking Or: line-height & letter-spacing

Slide 68

Slide 68 text

line-height: 1; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuﬀ. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.

Slide 69

Slide 69 text

line-height: 1.4; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuﬀ. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.

Slide 70

Slide 70 text

letter-spacing: 0; BY NATHANIEL HORNBLOWER

Slide 71

Slide 71 text

letter-spacing: 0.2em; BY NATHAN IEL H ORNBLOWER

Slide 72

Slide 72 text

2. Measure

Slide 73

Slide 73 text

No max-width set Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuﬀ. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.

Slide 74

Slide 74 text

max-width: 27.5em; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuﬀ. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.

Slide 75

Slide 75 text

3. Quotes & Hyphens

Slide 76

Slide 76 text

"Shuffle" confirms officer's son - 6x4

Slide 77

Slide 77 text

Straight quotes "Shuffle" confirms officer's son - 6x4

Slide 78

Slide 78 text

Curly/smart quotes “Shuffle” confirms officer’s son - 6x4

Slide 79

Slide 79 text

Curly/smart quotes “Shuffle” confirms officer’s son - 6x4 “ ” ’

Slide 80

Slide 80 text

SmartQuotesForSmartPeople.com

Slide 81

Slide 81 text

Hyphen “Shuffle” confirms officer’s son - 6x4

Slide 82

Slide 82 text

En dash “Shuffle” confirms officer’s son – 6x4 –

Slide 83

Slide 83 text

Em dash “Shuffle” confirms officer’s son — 6x4 —

Slide 84

Slide 84 text

Letter ‘x’ “Shuffle” confirms officer’s son — 6x4

Slide 85

Slide 85 text

Multiplication sign “Shuffle” confirms officer’s son — 6×4 ×

Slide 86

Slide 86 text

“Shuffle” confirms officer’s son — 6×4

Slide 87

Slide 87 text

4. Ligatures

Slide 88

Slide 88 text

“Shuffle” confirms officer’s son — 6×4

Slide 89

Slide 89 text

Shuffle confirms officer

Slide 90

Slide 90 text

Shuffle confirms officer No ligatures

Slide 91

Slide 91 text

Shuffle confirms officer Common ligatures

Slide 92

Slide 92 text

5. Display vs. Text

Slide 93

Slide 93 text

Shuﬄe Text face

Slide 94

Slide 94 text

Shuﬄe Display face Shuﬄe

Slide 95

Slide 95 text

Sh Display face Sh Text face

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. BY NATHANIEL HORNBLOWER “Shuffle” confirms officer’s son — 6×4

Slide 98

Slide 98 text

Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. “Shuffle” confirms officer’s son — 6×4 BY NATHAN IEL H ORNBLOWER

Slide 99

Slide 99 text

“Shuffle” confirms officer’s son — 6×4 BY NATHAN IEL H ORNBLOWER Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle.

Slide 100

Slide 100 text

Better Letters A brief history of screen typography. THE END.