Chris' Praxisbeispiel zum Thema CSS: http://jsbin.com/eyahaf/edit#html,live

1. Typografie im Web
Übersicht der Präsentation
• Lesen am Monitor
• Saccaden und Fixationen
• Schriften für den Monitor
• Bildschirm-Typografie
• Antiasliasing
• Empfehlungen zur Gestaltung
• Technische Umsetzung & Webfonts

2. Typografie im Web
Lesen am Monitor
Lesen am Monitor ist anders
• Anstrengender
• 25-30% langsamer
• Ungenauer (überfliegen)
• Heller Monitor reitzt
die Augen
• Starre Sitzhaltung

3. Typografie im Web
Lesen am Monitor
Lesen am Monitor ist anders
• Anstrengender
• 25-30% langsamer
• Ungenauer (überfliegen)
• Heller Monitor reitzt
die Augen
• Starre Sitzhaltung

4. Typografie im Web
Lesen am Monitor
Lesen am Monitor ist anders
• Anstrengender
• 25-30% langsamer
• Ungenauer (überfliegen)
• Heller Monitor reitzt
die Augen
• Starre Sitzhaltung

5. Typografie im Web
Lesen am Monitor
Lesen am Monitor ist anders
• Anstrengender
• 25-30% langsamer
• Ungenauer (überfliegen)
• Heller Monitor reitzt
die Augen
• Starre Sitzhaltung

6. Typografie im Web
Lesen am Monitor
Lesen am Monitor ist anders
• Anstrengender
• 25-30% langsamer
• Ungenauer (überfliegen)
• Heller Monitor reitzt
die Augen
• Starre Sitzhaltung

7. Typografie im Web
Lesen am Monitor
Saccaden und Fixationen
• Einzelne Buchstaben werden nicht erfasst
• Leser die selten am PC lesen, lesen oft mehrmals
• Text sollte monitorgerecht aufbereitet werden

8. Typografie im Web
Lesen am Monitor
Saccaden und Fixationen
• Einzelne Buchstaben werden nicht erfasst
• Leser die selten am PC lesen, lesen oft mehrmals
• Text sollte monitorgerecht aufbereitet werden

9. Typografie im Web
Lesen am Monitor
Saccaden und Fixationen
• Einzelne Buchstaben werden nicht erfasst
• Leser die selten am PC lesen, lesen oft mehrmals
• Text sollte monitorgerecht aufbereitet werden

10. Typografie im Web
Schriften für den Monitor
Gut geeignet sind z.B.
Droid Sans Regular (Webfont)
hamburgefonstiv
Verdana
hamburgefonstiv
Myriad

11. Typografie im Web
Antialiasing (Schriftenglättung)
Einmal mit und einmal ohne Glättung

12. Typografie im Web
Linksbündig statt Blocksatz
Flattersatz ist besser lesbar

13. Typografie im Web
Text luftig gestalten
Zeilenabstand, Absätze, leere Flächen
Blindtext The path of the righteous man is beset on all sides
by the iniquities of the selfish and the tyranny of evil men.
Blessed is he who, in the name of charity and good will,
shepherds the weak through the valley of darkness, for he
is truly his brother‘s keeper and the finder of lost children.
And I will strike down upon thee with great vengeance and
furious anger those who would attempt to poison and de-
stroy My brothers. And you will know My name is the Lord
when I lay My vengeance upon thee Blindtext.

14. Typografie im Web
Die Verwendung von Hintergrundbildern
Nicht so schön
Katzencontent

15. Typografie im Web
Die Verwendung von Hintergrundbildern
Supi!
Katzencontent

16. Typografie im Web
Schlechter Bild zu Textabstand

17. Typografie im Web
Besserer Bild zu Textabstand

18. Typografie im Web
Schlechter Kontrast

19. Typografie im Web
Guter Kontrast

20. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

21. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

22. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

23. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

24. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

25. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

26. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

27. Typografie im Web
Möglichkeiten der Webtypografie
Das geht
• Schriftart: System- oder eingebundene Webfont
• Farbe: Hexadezimal oder per HSL und RGBA (per CSS3)
• Größe: gebräuchlich in Px, Em oder %
• Gewichtung: Fett, kursiv, unterstrichen, etc.
• Ausrichtung: Linksbündig, Rechtsbündig, Blocksatz
• Transformation: Versalien, Minuskeln, Capitälchen
• Abstände: Zeilen, Wörtern, Buchstaben
• Effekte: Textschatten, drehen, etc. (aber nur CSS3)
etc.

28. Typografie im Web
Möglichkeiten der Webtypografie
Das geht nicht oder nur mit Tricks
• Automatische Silbentrennung
• Schriftenglättung des Browsers/Systems erzwingen
• Formumfließender Text

29. Typografie im Web
Möglichkeiten der Webtypografie
Das geht nicht oder nur mit Tricks
• Automatische Silbentrennung
• Schriftenglättung des Browsers/Systems erzwingen
• Formumfließender Text

30. Typografie im Web
Möglichkeiten der Webtypografie
Das geht nicht oder nur mit Tricks
• Automatische Silbentrennung
• Schriftenglättung des Browsers/Systems erzwingen
• Formumfließender Text

31. Danke für Eure Aufmerksamkeit!