You can save Web Typography

The web is written language – and it’s also a mess, because most sites don’t present text properly. Typography to the rescue!

In this talk you will learn how to boost your next web project with good typography. Several examples and live demos will give you a basic understanding of type and how to apply it with CSS in responsive web design. It’s a talk for developers, designers and everyone in between. Together we can save the web’s typography – one paragraph at a time.

Transcript

2. 86/60 Oliver Schöndorfer glyphe
3. The web is text based glyphe
4. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem
5. glyphe http://best-typographic-website-there-is.com/ Das ist ein nicht lesenswerter „Blindtext“ in deutscher Sprache. Er soll nur einen Grauwert zeigen – mehr nicht – muss also nicht gelesen werden. Aber wer möchte, kann’s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt’s ein kleines Bächlein namens Duden. Es fließt für „Typo-Meister“ durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen
6. glyphe We never had so li le typographic control We never had so much typographic control
7. glyphe 5
8. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem
10. glyphe There are badly used typefaces. THERE ARE NO BAD TYPEFACES.
12. Display Typeface Text Typeface
13. glyphe Display typeface
14. glyphe Text typeface
15. Sans Serif
16. Bad? Good?
17. glyphe modern
18. glyphe elegant
19. glyphe are the letters distinctive enough?
20. glyphe a g q
21. glyphe a g q
22. glyphe agqIl agqIl agqIl
23. glyphe Regular Italic Bold Bold Italic
24. glyphe Thîš dòesñ’t łook góod
25. glyphe Thîš dòesñ’t łook góod
26. glyphe – No display typefaces – Boring is be er – Sans and serif are both fine – Distinctive le er shapes – Keep the application in mind How to choose a text typeface
27. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem
28. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen ha e, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“ und das Blindtextchen solle font-family changed
30. font size line height line length font-size max-width line-height
31. Abc Abc Abc Abc
32. glyphe Abc Abc Abc Abc Font size should be adjusted to the reader’s distance to the device
33. glyphe Abc Abc Abc Abc font-size: 1.25em; font-size: 1em; font-size: 0.9em;
34. glyphe Source: steigenberger.com
35. glyphe Source: steigenberger.com font-size: 11.2px;
36. 190 characters
37. glyphe – At least 16 px font-size for body text – Adapt font-size to distance from device – The ideal line is around 60–80 characters long – Longer lines need more line-height (~ 1.5) How to achieve harmonic measurements
38. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen ha e, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“ und das Blindtextchen solle
39. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo–Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen ha e, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner font-size increased
40. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu line-height & max-width adapted
42. glyphe http://forbes.at/5starts-wo-ideen-keimen
43. glyphe http://forbes.at/5starts-wo-ideen-keimen
44. glyphe Justified text without hyphenation can create big gaps between the words
45. <html lang="de"> p { text-align: justify; hyphens: auto; }
46. glyphe Justified text with hyphenation: spaces between words are more even but still problematic
47. glyphe caniuse.com/#feat=css-hyphens (Sept. 2017)
48. glyphe ca caniuse.com/#feat=css-hyphens (Sept. 2017) Only supported on Android & Mac platforms
49. glyphe – Don’t use justified text – Never – Nope, not even then How to use justified text on the web
50. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu
51. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu text-align: left
53. glyphe Spot the Fake Font
54. glyphe
55. glyphe
56. glyphe Text highlights work clearly better when the real fonts are used
57. glyphe Beware of unintentional bolding added by the browser
58. h1 { font-family: 'Monoton'; font-weight: normal; /* or browser will bolden it */ }
59. glyphe – Load all fonts needed – If a style is not available adapt the default styling – Beware of user agent styling How to fight fake fonts
60. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu
61. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu Real bold font added
63. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu
64. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien.
 
 Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu
65. Typewriter by Amy Ross / CC BY-NC-ND 2.0
66. glyphe <<I can only agree to that.>> "Right quotation marks are hard to find." ´´They definitely are.``
67. glyphe Accents << >> <html> id="nav" é ó à ì Double prime mark Angle Brackets " " ´´ ``
68. glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schon viel besser.“ “Cup of tea, James.”
69. glyphe „Sehr gut“ alt + 0132  ⌥ + ^ alt + 0147  ⌥ + 2
70. glyphe “So good” alt + 0147  ⌥ + 2 alt + 0148  ⇧ + ⌥ + ^
71. glyphe diepresse.com (May 2017)
72. glyphe " “ " „
73. glyphe „ "
75. glyphe Karin‘s Versagen Peter's Fehler Birgit´s Scheitern
76. glyphe Karins Versagen Peters Fehler Birgits Scheitern
77. glyphe Kathy‘s failure Lukas' Fehler What´s up?
78. glyphe Kathy‘s failure Lukas' Fehler What´s up? Accents Single prime mark Left single quote ‘Hello’ url('bg.png') á é í ó ú
79. glyphe
80. glyphe Kathy’s success Lukas’ Fehler What’s up?
81. glyphe That’s good alt + 0146  ⌥ + ⇧ + #
82. glyphe Am I—maybe—a bit too much? I think-or I hope-this is right. I am – certainly – right.
83. glyphe en dash — hy-phen-ated
 Front-end gut – oder?
 East–West Hyphen em dash - – good—right?
 € 100,—
84. glyphe gut – oder? alt + 0150  ⌥ + -
87. ' " " - -
88. ’ “ ” Apostroph Opening
 curly quote Closing
 curly quote – en dash –en dash
91. glyphe http://almost-every-website-there-is.com/ Das ist ein nicht lesenswerter "Blindtext" in deutscher Sprache. Er soll nur einen Grauwert zeigen - mehr nicht-muss also nicht gelesen werden. Aber wer möchte, kann`s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt´s ein kleines Bächlein namens Duden. Es fließt für >Typo– Meister< durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht-ein geradezu unorthographisches Leben. Es packte seine sieben Versalien, schob
92. glyphe http://best-typographic-website-there-is.com/ Das ist ein nicht lesenswerter „Blindtext“ in deutscher Sprache. Er soll nur einen Grauwert zeigen – mehr nicht – muss also nicht gelesen werden. Aber wer möchte, kann’s natürlich machen: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der weiten Küste des Semantik, eines großen Sprachozeans. Dort gibt’s ein kleines Bächlein namens Duden. Es fließt für „Typo-Meister“ durch den Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu Punctuation marks corrected
93. glyphe 1. Choose a boring text typeface 2. Avoid tiny font sizes 3. Never ever use justified text 4. Load the fonts you need 5. Care about punctuation marks How you can save Web Typography
94. glyphe