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

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

Typografie im WebLesen am Monitor

Lesen am Monitor ist anders

• Anstrengender

• 25-30% langsamer

•Ungenauer(überfliegen)

• Heller Monitor reitzt die Augen

• Starre Sitzhaltung

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

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

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

Typografie im WebSchriften für den Monitor

Gut geeignet sind z.B.

DroidSansRegular(Webfont)

Verdana

Myriad

hamburgefonstiv

hamburgefonstiv

Typografie im Web

Einmal mit und einmal ohne Glättung

Antialiasing(Schriftenglättung)

Typografie im Web

Flattersatz ist besser lesbar

Linksbündig statt Blocksatz

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.

Typografie im WebDie Verwendung von Hintergrundbildern

Nicht so schön

Katzencontent

Typografie im Web

Katzencontent

Die Verwendung von Hintergrundbildern

Supi!

Typografie im WebSchlechter Bild zu Textabstand

Typografie im WebBesserer Bild zu Textabstand

Typografie im WebSchlechter Kontrast

Typografie im WebGuter Kontrast

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.

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.

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.

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.

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.

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.

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.

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.

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Typografie im Web

• Automatische Silbentrennung

• Schriftenglättung des Browsers/Systems erzwingen

•FormumfließenderText

MöglichkeitenderWebtypografie

Das geht nicht oder nur mit Tricks

Danke für Eure Aufmerksamkeit!