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

1. View Slide

2. 86/60
   Oliver Schöndorfer glyphe
   

   View Slide

3. The web is text based
   glyphe
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. glyphe
   We never had so li le
   typographic control
   We never had so much
   typographic control
   

   View Slide

7. glyphe
   5
   

   View Slide

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
   

   View Slide

9. View Slide

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

    View Slide

11. View Slide

12. Display Typeface Text Typeface
    

    View Slide

13. glyphe
    Display typeface
    

    View Slide

14. glyphe
    Text typeface
    

    View Slide

15. Sans Serif
    

    View Slide

16. Bad?
    Good?
    

    View Slide

17. glyphe
    modern
    

    View Slide

18. glyphe
    elegant
    

    View Slide

19. glyphe
    are the letters distinctive enough?
    

    View Slide

20. glyphe
    a g q
    

    View Slide

21. glyphe
    a g q
    

    View Slide

22. glyphe
    agqIl
    agqIl agqIl
    

    View Slide

23. glyphe
    Regular Italic Bold Bold Italic
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. View Slide

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

    View Slide

31. Abc
    Abc
    Abc
    Abc
    

    View Slide

32. glyphe
    Abc Abc Abc Abc
    Font size should be adjusted to the reader’s distance to the device
    

    View Slide

33. glyphe
    Abc Abc Abc Abc
    font-size: 1.25em; font-size: 1em; font-size: 0.9em;
    

    View Slide

34. glyphe
    Source: steigenberger.com
    

    View Slide

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

    View Slide

36. 190 characters
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

41. View Slide

42. glyphe
    http://forbes.at/5starts-wo-ideen-keimen
    

    View Slide

43. glyphe
    http://forbes.at/5starts-wo-ideen-keimen
    

    View Slide

44. glyphe
    Justified text without hyphenation can create big gaps between the words
    

    View Slide

45. 
    p {
    text-align: justify;
    hyphens: auto;
    }
    

    View Slide

46. glyphe
    Justified text with hyphenation: spaces between words are more even but still problematic
    

    View Slide

47. glyphe
    caniuse.com/#feat=css-hyphens (Sept. 2017)
    

    View Slide

48. glyphe
    ca
    caniuse.com/#feat=css-hyphens (Sept. 2017)
    Only supported on Android & Mac platforms
    

    View Slide

49. glyphe
    – Don’t use justified text
    – Never
    – Nope, not even then
    How to use justified text on the web
    

    View Slide

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
    

    View Slide

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
    

    View Slide

52. View Slide

53. glyphe
    Spot the Fake Font
    

    View Slide

54. glyphe
    

    View Slide

55. glyphe
    

    View Slide

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

    View Slide

57. glyphe
    Beware of unintentional bolding added by the browser
    

    View Slide

58. h1 {
    font-family: 'Monoton';
    font-weight: normal; /* or browser will bolden it */
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

62. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

66. glyphe
    <>
    "Right quotation marks are hard to find."
    ´´They definitely are.``
    

    View Slide

67. glyphe
    Accents
    << >>
    id="nav"
    é ó à ì
    Double prime mark
    Angle Brackets
    " "
    ´´ ``
    

    View Slide

68. glyphe
    Curly quotes
    «Bonjour, madame.»
    Gänsefüßchen
    Guillemets
    „Schon viel besser.“
    “Cup of tea, James.”
    

    View Slide

69. glyphe
    „Sehr gut“
    alt + 0132
     ⌥ + ^
    alt + 0147
     ⌥ + 2
    

    View Slide

70. glyphe
    “So good”
    alt + 0147
     ⌥ + 2
    alt + 0148
     ⇧ + ⌥ + ^
    

    View Slide

71. glyphe
    diepresse.com (May 2017)
    

    View Slide

72. glyphe
    "
    “
    "
    „
    

    View Slide

73. glyphe
    „
    "
    

    View Slide

74. View Slide

75. glyphe
    Karin‘s Versagen
    Peter's Fehler
    Birgit´s Scheitern
    

    View Slide

76. glyphe
    Karins Versagen
    Peters Fehler
    Birgits Scheitern
    

    View Slide

77. glyphe
    Kathy‘s failure
    Lukas' Fehler
    What´s up?
    

    View Slide

78. glyphe
    Kathy‘s failure
    Lukas' Fehler
    What´s up? Accents
    Single prime mark
    Left single quote
    ‘Hello’
    url('bg.png')
    á é í ó ú
    

    View Slide

79. glyphe
    

    View Slide

80. glyphe
    Kathy’s success
    Lukas’ Fehler
    What’s up?
    

    View Slide

81. glyphe
    That’s good
    alt + 0146
     ⌥ + ⇧ + #
    

    View Slide

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

    View Slide

83. glyphe
    en dash
    —
    hy-phen-ated

    Front-end
    gut – oder?

    East–West
    Hyphen
    em dash
    -
    –
    good—right?

    € 100,—
    

    View Slide

84. glyphe
    gut – oder?
    alt + 0150
     ⌥ + -
    

    View Slide

85. View Slide

86. View Slide

87. '
    " "
    -
    -
    

    View Slide

88. ’
    “ ”
    Apostroph
    Opening

    curly quote
    Closing

    curly quote
    –
    en dash
    –en dash
    

    View Slide

89. View Slide

90. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

94. glyphe
    

    View Slide