Typografie im Web

757 views
615 views

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
757
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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!

×