You can save Web Typography

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.

6f9d2ee92d3cf8fd7f505c82ee184e43?s=128

Oliver Schöndorfer

October 26, 2017
Tweet

Transcript

  1. None
  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
  9. None
  10. glyphe There are badly used typefaces. THERE ARE NO BAD

    TYPEFACES.
  11. None
  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
  29. None
  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
  41. None
  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
  52. None
  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
  62. None
  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 „ "

  74. None
  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  ⌥ +

    -
  85. None
  86. None
  87. ' " " - -

  88. ’ “ ” Apostroph Opening
 curly quote Closing
 curly quote

    – en dash –en dash
  89. None
  90. None
  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