Barrierefreie Typografie im Web
Hierarchien erleichtern Lesefluss
Texte sollten strukturiert sein. Dazu gehören der Einsatz von unterschiedlichen Headline-Größen (H1, H2, H3) und Zwischentitel, sowie Hervorhebungen einzelner Wörter mit Fett oder Kursiv. Optimierte Schriften im Web Open Front Format (WOFF) erleichtern eine optimale Lesbarkeit und Leserlichkeit. Es ist ausreichend, zwei oder drei Schriftschnitte zu verwenden. Oft genügt auch nur eine Schrift. Eine Serifen-Schrift ergänzt sich am besten mit einer serifenlosen Schrift. Wichtig dabei ist, dass die beiden Schriften ähnlich vertikal proportioniert sind.
Angemessene Schriftgrößen
Die Schriftgröße sollte mindestens 15 oder 16 Pixel haben. Fürs Handy kann sie durchaus kleiner sein. Die Überschriften sollten 180 bis 200 Prozent des Bodytexts ausmachen, Untertitel dagegen 130 bis 150 Prozent. Vorteilhafter ist es, wenn die Schriftgröße in einer relativen Größe angegeben wird (em, rem oder Prozent). Damit sind die Schriften voneinander abhängig und es muss nur ein Wert im Stylesheet geändert werden, um alle Schriften zu verkleinern oder zu vergrößern. Eine Zeilenlänge mit maximal 70 Zeichen ist am lesefreundlichsten. Auch ein angemessener Abstand zwischen den Zeilen ist wichtig. Auf dem PC ist ein Zeilenabstand von 130 bis 160 Prozent bei einer Schriftgröße von 16 Pixel ideal, auf dem Handy kann er geringer ausfallen.
FOUT | FOIT
Für die Einbindung von Text gibt es zwei Möglichkeiten:
FOUT steht für “Flash of unstyled text“. Manchmal kann es vorkommen, dass der Inhalt einer Seite geladen wird, aber der Webfont noch nicht. FOUT überbrückt diese meist kurze Zeit, indem zunächst eine zuvor definierte Fallback-Font geladen wird. Fallback-Font und Webfont werden ausgetauscht, wenn alles vollständig geladen ist. Um grafische Störungen zu vermeiden, sollte beide Schriften sehr ähnlich sein.
FOIT ist die Abkürzung für “Flash of Invisible Text“. Hier zeigt der Browsern den Text einer Website so lange nicht an, bis der externe Webfont fertig geladen wurde.
Kontrast ist wichtig
Eine optimale Stationierung und Unterschneidung vermeidet die “Löchrigkeit” eines Textes. Bei größeren Überschriften ist es oft nicht zu vermeiden, selbst manuell nachzukorrigieren. Bei den Fließtexten sollte es einen starken Kontrast zwischen Schrift- und Hintergrundfarbe geben. Besonders angenehm fürs Auge ist ein dunkelgrauer Text auf einem leicht abgetönten Hintergrund. Wenn es sich um farbige Texte oder Hintergründe handelt, lässt sich der Kontrast mit unterschiedlichen Tools prüfen (Beispiel: Color Contrast Checker).
