Typografie im WebÜbersicht der Präsentation•	 Lesen am Monitor•	 Saccaden und Fixationen•	 Schriften für den Monitor•	 Bil...
Typografie im WebLesen am Monitor  Lesen am Monitor ist anders•	 Anstrengender•	 25-30% langsamer•	 Ungenauer	(überfliegen...
Typografie im WebLesen am Monitor  Lesen am Monitor ist anders•	 Anstrengender•	 25-30% langsamer•	 Ungenauer	(überfliegen...
Typografie im WebLesen am Monitor  Lesen am Monitor ist anders•	 Anstrengender•	 25-30% langsamer•	 Ungenauer	(überfliegen...
Typografie im WebLesen am Monitor  Lesen am Monitor ist anders•	 Anstrengender•	 25-30% langsamer•	 Ungenauer	(überfliegen...
Typografie im WebLesen am Monitor  Lesen am Monitor ist anders•	 Anstrengender•	 25-30% langsamer•	 Ungenauer	(überfliegen...
Typografie im WebLesen am Monitor  Saccaden und Fixationen•	 Einzelne Buchstaben werden nicht erfasst•	 Leser die selten a...
Typografie im WebLesen am Monitor  Saccaden und Fixationen•	 Einzelne Buchstaben werden nicht erfasst•	 Leser die selten a...
Typografie im WebLesen am Monitor  Saccaden und Fixationen•	 Einzelne Buchstaben werden nicht erfasst•	 Leser die selten a...
Typografie im WebSchriften für den Monitor  Gut geeignet sind z.B.  Droid	Sans	Regular	(Webfont) hamburgefonstiv  Verdana ...
Typografie im WebAntialiasing	(Schriftenglättung)  Einmal mit und einmal ohne Glättung
Typografie im WebLinksbündig statt Blocksatz  Flattersatz ist besser lesbar
Typografie im WebText luftig gestalten  Zeilenabstand, Absätze, leere Flächen  Blindtext The path of the righteous man is ...
Typografie im WebDie Verwendung von Hintergrundbildern  Nicht so schön             Katzencontent
Typografie im WebDie Verwendung von Hintergrundbildern  Supi!             Katzencontent
Typografie im WebSchlechter Bild zu Textabstand
Typografie im WebBesserer Bild zu Textabstand
Typografie im WebSchlechter Kontrast
Typografie im WebGuter Kontrast
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht•	 Schriftart: System- oder eingebundene Webfont•	 Farbe:	Hexade...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht nicht oder nur mit Tricks•	 Automatische Silbentrennung•	 Schri...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht nicht oder nur mit Tricks•	 Automatische Silbentrennung•	 Schri...
Typografie im WebMöglichkeiten	der	Webtypografie  Das geht nicht oder nur mit Tricks•	 Automatische Silbentrennung•	 Schri...
Danke für Eure Aufmerksamkeit!
Nächste SlideShare
Wird geladen in …5
×

Typografie im Web

793 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
793
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Typografie im Web

  1. 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. 2. Typografie im WebLesen am Monitor Lesen am Monitor ist anders• Anstrengender• 25-30% langsamer• Ungenauer (überfliegen) • Heller Monitor reitzt die Augen• Starre Sitzhaltung
  3. 3. Typografie im WebLesen am Monitor Lesen am Monitor ist anders• Anstrengender• 25-30% langsamer• Ungenauer (überfliegen) • Heller Monitor reitzt die Augen• Starre Sitzhaltung
  4. 4. Typografie im WebLesen am Monitor Lesen am Monitor ist anders• Anstrengender• 25-30% langsamer• Ungenauer (überfliegen) • Heller Monitor reitzt die Augen• Starre Sitzhaltung
  5. 5. Typografie im WebLesen am Monitor Lesen am Monitor ist anders• Anstrengender• 25-30% langsamer• Ungenauer (überfliegen) • Heller Monitor reitzt die Augen• Starre Sitzhaltung
  6. 6. Typografie im WebLesen am Monitor Lesen am Monitor ist anders• Anstrengender• 25-30% langsamer• Ungenauer (überfliegen) • Heller Monitor reitzt die Augen• Starre Sitzhaltung
  7. 7. Typografie im WebLesen 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. 8. Typografie im WebLesen 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. 9. Typografie im WebLesen 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. 10. Typografie im WebSchriften für den Monitor Gut geeignet sind z.B. Droid Sans Regular (Webfont) hamburgefonstiv Verdana hamburgefonstiv Myriad
  11. 11. Typografie im WebAntialiasing (Schriftenglättung) Einmal mit und einmal ohne Glättung
  12. 12. Typografie im WebLinksbündig statt Blocksatz Flattersatz ist besser lesbar
  13. 13. Typografie im WebText 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. 14. Typografie im WebDie Verwendung von Hintergrundbildern Nicht so schön Katzencontent
  15. 15. Typografie im WebDie Verwendung von Hintergrundbildern Supi! Katzencontent
  16. 16. Typografie im WebSchlechter Bild zu Textabstand
  17. 17. Typografie im WebBesserer Bild zu Textabstand
  18. 18. Typografie im WebSchlechter Kontrast
  19. 19. Typografie im WebGuter Kontrast
  20. 20. Typografie im WebMö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. 21. Typografie im WebMö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. 22. Typografie im WebMö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. 23. Typografie im WebMö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. 24. Typografie im WebMö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. 25. Typografie im WebMö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. 26. Typografie im WebMö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. 27. Typografie im WebMö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. 28. Typografie im WebMöglichkeiten der Webtypografie Das geht nicht oder nur mit Tricks• Automatische Silbentrennung• Schriftenglättung des Browsers/Systems erzwingen• Formumfließender Text
  29. 29. Typografie im WebMöglichkeiten der Webtypografie Das geht nicht oder nur mit Tricks• Automatische Silbentrennung• Schriftenglättung des Browsers/Systems erzwingen• Formumfließender Text
  30. 30. Typografie im WebMöglichkeiten der Webtypografie Das geht nicht oder nur mit Tricks• Automatische Silbentrennung• Schriftenglättung des Browsers/Systems erzwingen• Formumfließender Text
  31. 31. Danke für Eure Aufmerksamkeit!

×