Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Oliver Schöndorfer

October 26, 2017
Tweet

More Decks by Oliver Schöndorfer

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. glyphe We never had so li le typographic control We

    never had so much typographic control
  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 – 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
  6. 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
  7. 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
  8. glyphe Abc Abc Abc Abc Font size should be adjusted

    to the reader’s distance to the device
  9. 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
  10. 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
  11. 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
  12. 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
  13. glyphe – Don’t use justified text – Never – Nope,

    not even then How to use justified text on the web
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. glyphe <<I can only agree to that.>> "Right quotation marks

    are hard to find." ´´They definitely are.``
  22. glyphe Accents << >> <html> id="nav" é ó à ì

    Double prime mark Angle Brackets " " ´´ ``
  23. glyphe “So good” alt + 0147  ⌥ + 2

    alt + 0148  ⇧ + ⌥ + ^
  24. glyphe Kathy‘s failure Lukas' Fehler What´s up? Accents Single prime

    mark Left single quote ‘Hello’ url('bg.png') á é í ó ú
  25. glyphe Am I—maybe—a bit too much? I think-or I hope-this

    is right. I am – certainly – right.
  26. glyphe en dash — hy-phen-ated
 Front-end gut – oder?
 East–West

    Hyphen em dash - – good—right?
 € 100,—
  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
  28. 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
  29. 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