Insights 2019 | Barrierefreie Typografie

Barrierefreie Typografie im Web

Auch im Netz spielt Barrierefreiheit eine große Rolle. Die typografische Gestaltung einer Webpräsenz hat großen Einfluss auf das Usererlebnis. Sind Texte nicht harmonisch genug gesetzt, ist das anstrengend für den User. Damit das nicht passiert, ist auf einige Punkte zu achten.

Freitag, 1. November 2019

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).

Katja Karina Kapelle

Katja schreibt, konzipiert und kontaktet im publicgarden. Hier bloggt sie zu Themen und Fragestellungen aus der Projektarbeit, die für Kunden im Print- und Onlinebereich immer wieder relevant sind.

Insights

Stilisierte Illustration. Mann und eine Frau stehen an einem großen Zeiger einer Skala, die die Barrierefreiheitsstufen „A“, „AA“ und „AAA“ darstellt.