Download - Typografie im Web

Transcript
Page 1: Typografie im Web

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

Page 2: Typografie im Web

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Page 3: Typografie im Web

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Page 4: Typografie im Web

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Page 5: Typografie im Web

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Page 6: Typografie im Web

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Page 7: Typografie im Web

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

Page 8: Typografie im Web

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

Page 9: Typografie im Web

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

Page 10: Typografie im Web

Typografie im WebSchriften für den Monitor

Gut geeignet sind z.B.

DroidSansRegular(Webfont)

Verdana

Myriad

hamburgefonstiv

hamburgefonstiv

Page 11: Typografie im Web

Typografie im Web

Einmal mit und einmal ohne Glättung

Antialiasing(Schriftenglättung)

Page 12: Typografie im Web

Typografie im Web

Flattersatz ist besser lesbar

Linksbündig statt Blocksatz

Page 13: Typografie im Web

Typografie im Web

Zeilenabstand, Absätze, leere Flächen

Text luftig gestalten

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.

Page 14: Typografie im Web

Typografie im WebDie Verwendung von Hintergrundbildern

Nicht so schön

Katzencontent

Page 15: Typografie im Web

Typografie im Web

Katzencontent

Die Verwendung von Hintergrundbildern

Supi!

Page 16: Typografie im Web

Typografie im WebSchlechter Bild zu Textabstand

Page 17: Typografie im Web

Typografie im WebBesserer Bild zu Textabstand

Page 18: Typografie im Web

Typografie im WebSchlechter Kontrast

Page 19: Typografie im Web

Typografie im WebGuter Kontrast

Page 20: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 21: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 22: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 23: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 24: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 25: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 26: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 27: Typografie im Web

Typografie im Web

• Schriftart: System- oder eingebundene Webfont

• Farbe:HexadezimaloderperHSLundRGBA(perCSS3)

• 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.(abernurCSS3)

Typografie im WebMöglichkeitenderWebtypografie

Das geht

etc.

Page 28: Typografie im Web

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Page 29: Typografie im Web

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Page 30: Typografie im Web

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Page 31: Typografie im Web

Danke für Eure Aufmerksamkeit!