Typografie im Web

  • View
    429

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Transcript

  • 1. Typografie im Webbersicht der Prsentation Lesen am Monitor Saccaden und Fixationen Schriften fr den Monitor Bildschirm-Typografie Antiasliasing Empfehlungen zur Gestaltung Technische Umsetzung & Webfonts

2. Typografie im WebLesen am MonitorLesen am Monitor ist anders Anstrengender 25-30% langsamer Ungenauer(berfliegen) Heller Monitor reitzt die Augen Starre Sitzhaltung 3. Typografie im WebLesen am MonitorLesen am Monitor ist anders Anstrengender 25-30% langsamer Ungenauer(berfliegen) Heller Monitor reitzt die Augen Starre Sitzhaltung 4. Typografie im WebLesen am MonitorLesen am Monitor ist anders Anstrengender 25-30% langsamer Ungenauer(berfliegen) Heller Monitor reitzt die Augen Starre Sitzhaltung 5. Typografie im WebLesen am MonitorLesen am Monitor ist anders Anstrengender 25-30% langsamer Ungenauer(berfliegen) Heller Monitor reitzt die Augen Starre Sitzhaltung 6. Typografie im WebLesen am MonitorLesen am Monitor ist anders Anstrengender 25-30% langsamer Ungenauer(berfliegen) Heller Monitor reitzt die Augen Starre Sitzhaltung 7. Typografie im WebLesen am MonitorSaccaden und Fixationen Einzelne Buchstaben werden nicht erfasst Leser die selten am PC lesen, lesen oft mehrmals Text sollte monitorgerecht aufbereitet werden 8. Typografie im WebLesen am MonitorSaccaden und Fixationen Einzelne Buchstaben werden nicht erfasst Leser die selten am PC lesen, lesen oft mehrmals Text sollte monitorgerecht aufbereitet werden 9. Typografie im WebLesen am MonitorSaccaden und Fixationen Einzelne Buchstaben werden nicht erfasst Leser die selten am PC lesen, lesen oft mehrmals Text sollte monitorgerecht aufbereitet werden 10. Typografie im WebSchriften fr den MonitorGut geeignet sind z.B.DroidSansRegular(Webfont) hamburgefonstivVerdanahamburgefonstivMyriad 11. Typografie im WebAntialiasing(Schriftenglttung)Einmal mit und einmal ohne Glttung 12. Typografie im WebLinksbndig statt BlocksatzFlattersatz ist besser lesbar 13. Typografie im WebText luftig gestaltenZeilenabstand, Abstze, leere FlchenBlindtext The path of the righteous man is beset on all sidesby 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 heis truly his brothers keeper and the finder of lost children.And I will strike down upon thee with great vengeance andfurious anger those who would attempt to poison and de-stroy My brothers. And you will know My name is the Lordwhen I lay My vengeance upon thee Blindtext. 14. Typografie im WebDie Verwendung von HintergrundbildernNicht so schn Katzencontent 15. Typografie im WebDie Verwendung von HintergrundbildernSupi! Katzencontent 16. Typografie im WebSchlechter Bild zu Textabstand 17. Typografie im WebBesserer Bild zu Textabstand 18. Typografie im WebSchlechter Kontrast 19. Typografie im WebGuter Kontrast 20. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 21. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 22. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 23. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 24. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 25. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 26. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 27. Typografie im WebMglichkeitenderWebtypografieDas geht Schriftart: System- oder eingebundene Webfont Farbe:HexadezimaloderperHSLundRGBA(perCSS3) Gre: gebruchlich in Px, Em oder % Gewichtung: Fett, kursiv, unterstrichen, etc. Ausrichtung: Linksbndig, Rechtsbndig, Blocksatz Transformation: Versalien, Minuskeln, Capitlchen Abstnde: Zeilen, Wrtern, Buchstaben Effekte:Textschatten,drehen,etc.(abernurCSS3)etc. 28. Typografie im WebMglichkeitenderWebtypografieDas geht nicht oder nur mit Tricks Automatische Silbentrennung Schriftenglttung des Browsers/Systems erzwingen FormumflieenderText 29. Typografie im WebMglichkeitenderWebtypografieDas geht nicht oder nur mit Tricks Automatische Silbentrennung Schriftenglttung des Browsers/Systems erzwingen FormumflieenderText 30. Typografie im WebMglichkeitenderWebtypografieDas geht nicht oder nur mit Tricks Automatische Silbentrennung Schriftenglttung des Browsers/Systems erzwingen FormumflieenderText 31. Danke fr Eure Aufmerksamkeit!