You Can Save Web Typography

A presentation at pitercss_conf in June 2018 in St Petersburg, Russia by Oliver Schöndorfer

Slide 1

Slide 1

You Can Save Web Typography

Slide 2

Slide 2

86/60 Oliver Schöndorfer glyphe

Slide 3

Slide 3

The web is text based

Slide 4

Slide 4

Slide 5

Slide 5

Why?

Slide 6

Slide 6

We never had so little typographic control We never had so much typographic control

Slide 7

Slide 7

5 steps towards good reading typography on the web

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Choose a typeface

Slide 11

Slide 11

THERE ARE NO BAD TYPEFACES. There are badly used typefaces.

Slide 12

Slide 12

Slide 13

Slide 13

Display Typeface Text Typeface

Slide 14

Slide 14

Display typeface I am a display typeface. I grab your a+tention, set a mood and o8en represent a ce9ain s+yle or a+mosphere. I have very expre=ive le+ter shapes and should be set in large sizes. I work well for headlines and very sho9 text. In body text I am dis+racting and hard to read as you can see in this sho9 paragraph.

Slide 15

Slide 15

!

glyphe Text typeface I am a text typeface. My specialty is that that there is nothing special about me (except for some typography nerds, maybe). I’m understated, get out of the way and let the words speak. I’m simply working because I have very distinctive letter shapes that form distinctive word shapes. This makes me easy to read and under these circumstances, it doesn’t matter if I’m a serif or a sans-serif.

Slide 16

Slide 16

Sans Serif

Slide 17

Slide 17

Bad? Good?

Slide 18

Slide 18

!

glyphe modern

Slide 19

Slide 19

!

glyphe elegant

Slide 20

Slide 20

!

glyphe a re the letters distinctive enou g h?

Slide 21

Slide 21

!

glyphe agqIl agqIl agqIl

Slide 22

Slide 22

!

glyphe agqIl agqIl agqIl

Slide 23

Slide 23

!

glyphe Regular Italic Bold Bold Italic

Slide 24

Slide 24

!

glyphe Th î š d ò es ñ ’t ł ook g ó od

Slide 25

Slide 25

!

glyphe Th î š d ò es ñ ’t ł ook g ó od

Slide 26

Slide 26

!

glyphe Neither in English nor по

русски

Slide 27

Slide 27

!

glyphe Neither in English nor по

русски

Slide 28

Slide 28

!

glyphe – No display typefaces – Boring is better – Sans and serif are both ! ne – Distinctive letter shapes – Keep the application in mind How to choose a text typeface

Slide 29

Slide 29

!

glyphe http:// almost-every-website-there-is.com / This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can´t help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain goes: "Is this Helvetica or Arial?”, I just cant help myself. And also do this with the microtypography of text. Are measure, leading and tracking right? Is everything fine–tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and thats what you have to live with, when you're a designer. Then you are in a high—risk group of people who are hurt by bad typography. It is mostly emotional pain that becomes so hard that it gets physical. Okay, Maybe I´m exaggerating a bit now - but who cares. I am very impressed that you still read this text. So now I will just repeat it and form here on: This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue - why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can´t help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain "Is this

Slide 30

Slide 30

!

glyphe http:// almost-every-website-there-is.com / This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can´t help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain goes: "Is this Helvetica or Arial?”, I just cant help myself. And also do this with the microtypography of text. Are measure, leading and tracking right? Is everything ! ne–tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and thats what you have to live with, when you're a designer. Then you are in a high—risk group of people who are hurt by bad typography. It is mostly emotional pain that becomes so hard that it gets physical. Okay, Maybe I´m exaggerating a bit now - but who cares. I am very impressed that you still read this text. So now I will just repeat it and form here on: This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue - why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can not help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain "Is this Helvetica or Arial?”, I just can`t help myself. And I font-family changed

Slide 31

Slide 31

Slide 32

Slide 32

font size line height line length font-size max-width line-height

Slide 33

Slide 33

font size

Slide 34

Slide 34

Abc Abc Abc Abc !

glyphe

Slide 35

Slide 35

!

glyphe Abc Abc Abc Abc The font size should be adjusted to the reader’s distance from the device

Slide 36

Slide 36

!

glyphe Bigger text on bigger screens, maybe slightly smaller text on small screens Abc Abc Abc Abc 150% 120% 100% 90%

Slide 37

Slide 37

!

glyphe 16px

Slide 38

Slide 38

!

glyphe Source: steigenberger.com font-size: 11.2px ;

Slide 39

Slide 39

{ Code Demo }

Slide 40

Slide 40

Slide 41

Slide 41

190 characters

Slide 42

Slide 42

!

glyphe – At least 16 px font-size for body text – Big screen means bigger text – The ideal line is around 60–80 characters long – Longer lines need more line-height (~ 1.5) How to achieve harmonic measurements

Slide 43

Slide 43

!

glyphe http:// almost-every-website-there-is.com / This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can´t help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain goes: "Is this Helvetica or Arial?”, I just cant help myself. And also do this with the microtypography of text. Are measure, leading and tracking right? Is everything ! ne–tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and thats what you have to live with, when you're a designer. Then you are in a high—risk group of people who are hurt by bad typography. It is mostly emotional pain that becomes so hard that it gets physical. Okay, Maybe I´m exaggerating a bit now - but who cares. I am very impressed that you still read this text. So now I will just repeat it and form here on: This is just some copy text in English and it’s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue - why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type … Or maybe you just love reading and can ´t help yourself, because you have to read everything you see. I have to look at every typeface there is. Then my brain "Is this Helvetica or Arial?”, I just can`t help myself. And I have to do

Slide 44

Slide 44

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. It`s here to represent a certain “color“ -- and by color I mean typographic color

not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just cant help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and that`s what you have to live with, when you're a designer. Then you are in a high—risk group of people who are hurt by bad typography. It is mostly emotional pain that becomes so hard that it gets physical. Okay, Maybe I´m exaggerating a bit now - but who cares. I am very impressed that you still read this text. So now I will just repeat it and form here on: This is just some copy text in English and it’s not font-size increased

Slide 45

Slide 45

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and line-height & max-width adapted

Slide 46

Slide 46

Slide 47

Slide 47

!

glyphe forbes.at/5starts-wo-ideen-keimen

Slide 48

Slide 48

!

glyphe forbes.at/5starts-wo-ideen-keimen

Slide 49

Slide 49

!

glyphe

Slide 50

Slide 50

!

glyphe Justified text can create big gaps between words

Slide 51

Slide 51

!

glyphe srt.ru

Slide 52

Slide 52

!

glyphe – Don’t use justi ! ed text – Never – Nope, not even then How to use justified text on the web

Slide 53

Slide 53

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and

Slide 54

Slide 54

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and text-align: left

Slide 55

Slide 55

Slide 56

Slide 56

!

glyphe Spot the Fake Font

Slide 57

Slide 57

!

glyphe

Slide 58

Slide 58

!

glyphe "

Slide 59

Slide 59

!

glyphe "

"

Slide 60

Slide 60

!

glyphe Text highlights work clearly better when the real fonts are used "

Slide 61

Slide 61

{ C o d e D e m o }

Slide 62

Slide 62

!

glyphe Beware of unintentional bolding added by the browser

Slide 63

Slide 63

!

glyphe russian.rt.com/inotv/2018-06-04/ZHurnalist-ORF-ob-intervyu-s

Slide 64

Slide 64

!

glyphe russian.rt.com/inotv/2018-06-04/ZHurnalist-ORF-ob-intervyu-s Fake Italics

Slide 65

Slide 65

!

glyphe "

"

Slide 66

Slide 66

!

glyphe True italics

Slide 67

Slide 67

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and

Slide 68

Slide 68

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and Real bold font added

Slide 69

Slide 69

Slide 70

Slide 70

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and

Slide 71

Slide 71

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it ´ s not really worth reading . It ` s here to represent a certain “ color “

-- and by color I mean typographic color

-- not an actual color . So if you want to read it , just continue , why not ? Maybe this talk is so boring that it ` s actually a good idea . So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see . I have to look at every typeface I see and then my brain just goes :

" Is this Helvetica or Arial ?”, I just can ` t help myself . I do this with the microtypography of text too . Are measure , leading and tracking right ? Is everything ! ne — tuned and balanced ? When I went to design school from 2005

2008 I started seeing these things and now I can ' t get rid of these habits . Sometime I say to myself :

Stop doing that and just relax for once !<. But it is hard and

Slide 72

Slide 72

Typewriter by Amy Ross / CC BY-NC-ND 2.0

Slide 73

Slide 73

!

glyphe <<I can only agree to that.>> "Right quotes are hard to ! nd." ´´They de ! nitely are.``

Slide 74

Slide 74

!

glyphe Accents <<

<html> id="nav" é ó à ì Double prime mark Angle Brackets "

" ´´

``

Slide 75

Slide 75

!

glyphe Curly quotes in German and Russian « П риве ́ т » Curly quotes in English Guillemets in Russian “Hello, Sir” „Guten Tag“

Slide 76

Slide 76

!

glyphe “Hello” $

alt + 0147 

  • / &

“ $ alt + 0148 

⌥ + ⇧ +
х &

Slide 77

Slide 77

!

glyphe „Guten Tag“ $ alt + 0132 

⌥ + ⇧

  • / &

„ $

alt + 0147 

  • / &

Slide 78

Slide 78

!

glyphe « П риве ́ т » $ alt + 0171 

⌥ + ⇧

  • = &

« $

alt + 0187 

  • = &

»

Slide 79

Slide 79

!

glyphe

Slide 80

Slide 80

!

glyphe Rock

‘n‘

Roll Peter's phone What´s up?

Slide 81

Slide 81

!

glyphe Accents Single prime mark Left single quote ‘Hello’ url('bg.png') á é í ó ú Peter ' s phone What ´ s up? Rock

‘ n ‘

Roll

Slide 82

Slide 82

!

glyphe Rock

’n’

Roll Peter’s phone What’s up? Apostrophe

Slide 83

Slide 83

!

glyphe That’s good $

alt + 0146 

⌥ + ⇧ + з

&

Slide 84

Slide 84

!

glyphe Am I — maybe — a bit too much? I think-or I hope-this is right. I am – certainly – right.

Slide 85

Slide 85

!

glyphe en dash — hy-phen-ated
! ne-tuned
по

русски I’m British – right? East–West 2009–2019 Hyphen em dash

– — Россия — великая

страна !

Slide 86

Slide 86

!

glyphe Right – isn’t it? $ alt + 0150 

&

Slide 87

Slide 87

!

glyphe Россия — великая

страна ! $ alt + 0151 

⌥ + ⇧

&

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

' " "

Slide 91

Slide 91

’ “ ” Apostroph Opening 
 curly quote Closing 
 curly quote – en dash – en dash

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

!

glyphe http:// almost-every-website-there-is.com / This is just some dummy text in English and it´s not really worth reading. Its here to represent a certain “color“ -- and by color I mean typographic color -- not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that its actually a good idea. So much talking about letters and type . . . Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: "Is this Helvetica or Arial?”, I just can`t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne—tuned and balanced? When I went to design school from 2005-2008 I started seeing these things and now I can't get rid of these habits. Sometime I say to myself: >Stop doing that and just relax for once!<. But it is hard and

Slide 95

Slide 95

!

glyphe http:// best-typographic-website-there-is.com / This is just some dummy text in English and it’s not really worth reading. It’s here to represent a certain “color” – and by color I mean typographic color – not an actual color. So if you want to read it, just continue, why not? Maybe this talk is so boring that it’s actually a good idea. So much talking about letters and type … Or maybe you just love reading and you have to read everything you see. I have to look at every typeface I see and then my brain just goes: “Is this Helvetica or Arial?”, I just can’t help myself. I do this with the microtypography of text too. Are measure, leading and tracking right? Is everything ! ne-tuned and balanced? When I went to design school from 2005–2008 I started seeing these things and now I can’t get rid of these habits. Sometime I say to myself: “Stop doing that and just relax for once!”. But it is hard and Punctuation marks corrected

Slide 96

Slide 96

!

glyphe 1. Choose a boring text typeface 2. Set your text in 16 px upwards 3. Never ever use justi ! ed text 4. Load the fonts and styles you need 5. Care about punctuation marks How you can save Web Typography

Slide 97

Slide 97

!

glyphe Slides zeichenschatz.net/speaker "

codepen.io/glyphe