typografie im web
Post on 06-Jul-2015
438 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related