Bevor jemand eine einzige Information aufnimmt, trifft das Auge auf die Schrift. Ihre Form, ihre Größe und die Abstände zwischen Zeilen und Wörtern entscheiden darüber, ob ein Text mühelos gelesen wird oder ob er anstrengt, ermüdet und am Ende ausschließt. Rund 10 Prozent (British Dyslexia Association) der Bevölkerung sind von Legasthenie betroffen, etwa 4 Prozent (British Dyslexia Association) davon stark. Hinzu kommen ältere Menschen, Menschen mit eingeschränktem Sehvermögen und alle, die auf einem kleinen Display oder in heller Umgebung lesen. Barrierefreie Typografie ist deshalb kein Geschmacksthema, sondern eine messbare Anforderung. Dieser Beitrag zeigt, welche Schriftwahl, welche Größen und welche Abstände Text lesbar machen, wie die WCAG 2.2 diese Werte festschreibt und warum ein WCAG-2.2-Audit Typografie objektiv prüft statt nach Bauchgefühl.
Warum Typografie über den Zugang entscheidet
Typografie und Farbkontrast werden oft in einem Atemzug genannt, sind aber zwei verschiedene Baustellen. Beim Kontrast geht es um das Verhältnis von Vorder- zu Hintergrundfarbe, also um messbare Helligkeitswerte. Bei der Typografie geht es um die Schrift selbst: um die Form der Buchstaben, ihre Größe, den Zeilenabstand und die Abstände zwischen Zeichen, Wörtern und Absätzen. Beide Ebenen können unabhängig voneinander scheitern. Ein Text kann kontrastreich und trotzdem schwer lesbar sein, wenn die Zeilen zu eng stehen, die Schrift zu klein ist oder Buchstaben sich kaum unterscheiden. Wie stark Farbkontraste über die Lesbarkeit entscheiden, behandeln wir gesondert; in diesem Beitrag bleibt die Farbe bewusst außen vor, damit die Schrift im Mittelpunkt steht.
Schrift und Kontrast sind zwei Paar Schuhe
Schriftwahl: klar unterscheidbare Buchstabenformen
Für Bildschirmtext empfiehlt die British Dyslexia Association serifenlose Schriften wie Arial, Verdana oder Tahoma, weil ihre Buchstaben weniger gedrängt wirken und einzelne Zeichen leichter zu erfassen sind (British Dyslexia Association). Entscheidend ist dabei weniger der Name der Schrift als die Frage, ob sich verwechselbare Zeichen deutlich unterscheiden. Klassische Stolpersteine sind der Großbuchstabe I, das kleine l und die Ziffer 1, die in vielen Schriften nahezu gleich aussehen. Ebenso heikel sind die Spiegelformen b, d, p und q sowie die Kombination r und n, die zusammengesetzt schnell wie ein m gelesen wird. Eine gute Screen-Schrift gibt jedem dieser Zeichen eine eigene, unverwechselbare Gestalt.
Wie stark die Form einzelner Buchstaben zählt, zeigt die Schrift Atkinson Hyperlegible, die das Braille Institute für Menschen mit eingeschränktem Sehvermögen entwickelt hat (Braille Institute). Sie bricht bewusst mit der typografischen Norm der Einheitlichkeit und betont stattdessen die Unterscheidbarkeit einzelner Zeichen: Das kleine l bekommt einen Schwung, die Ziffer 1 einen Haken, die Innenräume der Buchstaben werden geöffnet und die Enden verlängert, damit die Zeichen auch bei schlechten Sehbedingungen auseinanderzuhalten sind. Das Braille Institute stellt die Schrift frei unter der SIL Open Font License bereit (Braille Institute). Der Ansatz lässt sich auf jede barrierefreie Webentwicklung übertragen, ohne dass es diese eine Schrift sein muss: Der Maßstab ist die Unterscheidbarkeit der Zeichen, nicht der Markenname.
I, l und 1 trennen
Großbuchstabe I, kleines l und die Ziffer 1 müssen klar verschieden sein. In vielen Screen-Schriften sehen sie fast gleich aus und stiften Verwirrung.
Spiegelformen b d p q
Buchstaben, die sich nur durch Spiegelung unterscheiden, verwechseln viele Leserinnen und Leser. Eigenständige Formen statt reiner Spiegelung helfen.
Offene Punzen
Große, offene Innenräume der Buchstaben, die Punzen, halten a, e und s auch bei kleiner Darstellung erkennbar und verhindern, dass sie zulaufen.
Große x-Höhe
Eine große x-Höhe lässt Kleinbuchstaben optisch größer wirken und verbessert die Lesbarkeit, ohne dass die Punktgröße steigen muss.
Echte Schriftschnitte
Fett und kursiv als eigene, gezeichnete Schnitte statt künstlich verzerrter Varianten erhalten die Form der Buchstaben und die Lesbarkeit.
Serifenlos am Bildschirm
Für Fließtext am Bildschirm eignen sich serifenlose Schriften, deren Zeichen nicht gedrängt wirken und mit klarer Kontur rendern (British Dyslexia Association).
Schriftgröße und Zeilenlänge
Für die Schriftgröße nennt der Dyslexia Style Guide der British Dyslexia Association einen Bereich von 12 bis 14 Punkt, was am Bildschirm etwa 16 bis 19 Pixel entspricht (British Dyslexia Association). Überschriften sollten mindestens 20 Prozent (British Dyslexia Association) größer sein als der Fließtext, damit die Gliederung sichtbar wird. Wichtig ist, dass diese Werte als Ausgangsgröße gedacht sind und nicht als feste Obergrenze: Die WCAG schreiben keine absolute Pixelzahl vor, sondern verlangen, dass Text vergrößert werden kann. Deshalb sollte die Basisgröße in relativen Einheiten wie rem oder em gesetzt sein, damit die Skalierung des Browsers greift. Auch die Prinzipien der redaktionellen Aufbereitung barrierefreier Inhalte bauen auf einer verlässlichen Basisgröße auf.
Neben der Größe entscheidet die Zeilenlänge über die Lesbarkeit. Zu lange Zeilen erschweren es, am Zeilenende den Anschluss an den nächsten Zeilenanfang zu finden; zu kurze zerhacken den Lesefluss. Als guter Bereich gelten 60 bis 70 Zeichen (British Dyslexia Association) pro Zeile, inklusive Leerzeichen. In responsiven Layouts erreicht man das über eine maximale Textbreite, etwa mit der CSS-Einheit ch oder einer prozentualen Begrenzung des Textcontainers. Wer Inhalte in besonders einfacher Form aufbereitet, findet in der Leichten Sprache ergänzende Regeln, die kurze Zeilen und klare Struktur ohnehin voraussetzen.
- Basisgröße für Fließtext bei etwa 16 bis 19 Pixel, gesetzt in rem oder em statt in festen Pixeln.
- Überschriften mindestens 20 Prozent größer als der Fließtext, mit klarer Abstufung zwischen den Ebenen.
- Zeilenlänge auf 60 bis 70 Zeichen begrenzen, damit Auge und Lesefluss den Zeilenwechsel sicher finden.
- Keine Großbuchstaben über ganze Sätze, weil durchgehende Versalien die Wortform verwischen und langsamer lesbar sind.
- Ausreichender Zeilenabstand, damit Ober- und Unterlängen benachbarter Zeilen sich nicht berühren.
Zeilenabstand und Textabstände nach WCAG 1.4.12
Das Erfolgskriterium 1.4.12 Textabstände macht die Lesbarkeit messbar. Es verlangt nicht, dass ein Text bestimmte Abstände von sich aus verwendet, sondern dass er nicht bricht, wenn Nutzerinnen und Nutzer die Abstände selbst vergrößern. Konkret muss Inhalt lesbar und bedienbar bleiben, wenn die Zeilenhöhe auf mindestens das 1,5-fache der Schriftgröße, der Abstand nach Absätzen auf das 2-fache, der Zeichenabstand auf das 0,12-fache und der Wortabstand auf das 0,16-fache gesetzt wird (W3C WCAG 2.2). Wer eigene Stile per Textabstands-Lesezeichen oder Browser-Erweiterung überschreibt, deckt Layouts schnell auf, die bei mehr Luft Text abschneiden oder überlappen lassen.
| Eigenschaft | Mindestwert (relativ zur Schriftgröße) | CSS-Entsprechung |
|---|---|---|
| Zeilenhöhe | mindestens das 1,5-fache | line-height: 1.5 |
| Abstand nach Absätzen | mindestens das 2-fache | margin-block-end: 2em |
| Zeichenabstand | mindestens das 0,12-fache | letter-spacing: 0.12em |
| Wortabstand | mindestens das 0,16-fache | word-spacing: 0.16em |
Alle vier Werte stammen aus demselben Erfolgskriterium und gelten gemeinsam (W3C WCAG 2.2). Der häufigste Fehler liegt nicht darin, dass Abstände zu klein voreingestellt sind, sondern darin, dass feste Höhen und abgeschnittene Container das Vergrößern verhindern. Buttons mit fester Pixelhöhe, Boxen mit overflow: hidden oder Texte in eng bemessenen Kacheln fallen bei mehr Zeilenabstand auseinander. Ein robustes Layout arbeitet deshalb mit flexiblen Höhen, hinterlegt die Abstände als Design-Tokens und testet den vergrößerten Zustand. Die neuen Kriterien der WCAG 2.2 verschärfen daneben vor allem die Anforderungen an sichtbaren Fokus und Zielgröße, doch die Textabstände bleiben der Prüfstein für die reine Lesbarkeit.
Abstände sind eine Zusage, keine Dekoration
Linksbündiger Satz statt Blocksatz
Blocksatz sieht auf den ersten Blick ordentlich aus, weil beide Ränder eine gerade Kante bilden. Erkauft wird das mit ungleichmäßigen Wortabständen: Damit jede Zeile exakt bis zum rechten Rand reicht, zieht der Browser die Wörter unterschiedlich weit auseinander. Dabei entstehen sogenannte Löcher und Flüsse, also senkrechte weiße Bahnen quer durch den Absatz, die das Auge ablenken. Für Menschen mit Legasthenie erschwert das die Orientierung zusätzlich. Die British Dyslexia Association empfiehlt deshalb linksbündigen Satz ohne Blocksatz (British Dyslexia Association), also einen festen linken und einen frei auslaufenden rechten Rand.
Auch für Newsletter und E-Mail
200-Prozent-Skalierung ohne Layoutbruch
Viele Menschen vergrößern Text, um ihn bequem zu lesen. Das Erfolgskriterium 1.4.4 Textgröße ändern verlangt, dass sich Text bis 200 Prozent vergrößern lässt, ohne dass Inhalt oder Funktion verloren gehen (W3C WCAG 2.2). Ergänzend fordert 1.4.10 Umbruch, dass Inhalt bei einer Breite von 320 CSS-Pixeln, was etwa 400 Prozent (W3C WCAG 2.2) Zoom auf einem üblichen Desktop entspricht, ohne waagerechtes Scrollen umbricht. Beides gelingt nur, wenn Größen in relativen Einheiten gesetzt sind und das Layout auf Umbruch ausgelegt ist. Der Grundgedanke, Barrierefreiheit von Beginn an mitzudenken, wird im Beitrag Accessibility by Design vertieft; für die Typografie heißt er schlicht: nichts fest verdrahten, was der Nutzer vergrößern können muss.
- Feste Pixelgrößen für Fließtext verhindern, dass die Schriftgrößen-Einstellung des Browsers greift; rem oder em lösen das.
- user-scalable=no in der Viewport-Angabe sperrt das Zoomen auf Mobilgeräten und ist ein klarer Verstoß gegen 1.4.4.
- Feste Container-Höhen schneiden vergrößerten Text ab; flexible Höhen und Umbruch statt overflow: hidden halten den Inhalt sichtbar.
- Text in Bildern skaliert nicht sauber mit und wird unscharf; echter Text bleibt bei jeder Vergrößerung lesbar.
- Nebeneinander fixierte Spalten brechen beim Zoomen; ein Layout, das umbricht, hält auch bei 200 Prozent zusammen.
Der Legasthenie-Font-Mythos
Hartnäckig hält sich die Idee, eine eigens gestaltete Legasthenie-Schrift löse das Leseproblem. Der bekannteste Vertreter ist OpenDyslexic, dessen Buchstaben unten beschwert sind, damit sie sich angeblich schwerer verdrehen lassen. Die empirische Studienlage stützt diese Hoffnung kaum. Eine kontrollierte Untersuchung mit Kindern mit Legasthenie fand keine Verbesserung von Lesegeschwindigkeit oder Genauigkeit gegenüber gängigen Schriften; die Kinder lasen mit OpenDyslexic eher etwas langsamer und ungenauer (Annals of Dyslexia). Auch die Vorliebe fehlte: Keines der teilnehmenden Kinder gab an, den Text in dieser Schrift lieber zu lesen (Annals of Dyslexia).
Eine besondere Legasthenie-Schrift ersetzt keine gute Typografie. Was messbar hilft, sind lesbare Standardschriften, ausreichende Größe und großzügige Abstände, die alle Nutzer selbst anpassen können.
Die British Dyslexia Association empfiehlt in ihrem Style Guide folgerichtig keine Spezialschrift, sondern gut lesbare, serifenlose Standardschriften in ausreichender Größe mit klaren Abständen (British Dyslexia Association). Der wirksamere Weg ist also nicht eine einzelne Wunder-Schrift, sondern die Kombination aus unterscheidbaren Buchstaben, angemessener Größe, ruhigem linksbündigem Satz und Abständen, die sich nach 1.4.12 vergrößern lassen. Wer zusätzlich eine Umschaltung anbieten möchte, kann eine gut lesbare Alternative bereitstellen, sollte sie aber nicht als Ersatz für saubere Grundtypografie verstehen.
Typografie im Audit objektiv prüfen
Ob eine Schriftwahl gut ist, lässt sich diskutieren; ob ein Layout die WCAG-Kriterien zur Typografie erfüllt, lässt sich prüfen. Genau hier trennt ein Audit Geschmack von Nachweis. Es misst nicht, ob eine Schrift schön ist, sondern ob verwechselbare Zeichen unterscheidbar sind, ob sich der Text auf 200 Prozent vergrößern lässt, ob er bei 320 Pixeln Breite umbricht und ob er die Textabstände nach 1.4.12 aushält. Auch verwandte Details wie sinnvolle Alternativtexte greifen ineinander; wie barrierefreie Bilder und Alt-Texte zu behandeln sind, betrachten wir gesondert. Für die Typografie zählt der objektive Befund, nicht das Bauchgefühl.
- Schriftwahl prüfen: Sind I, l und 1 sowie die Spiegelformen b, d, p, q im gewählten Schriftschnitt eindeutig unterscheidbar?
- Größe und Zeilenlänge messen: Liegt der Fließtext im Bereich um 16 bis 19 Pixel und die Zeile bei etwa 60 bis 70 Zeichen?
- Textabstände überschreiben: Bleibt der Inhalt bei 1,5-facher Zeilenhöhe, doppeltem Absatzabstand sowie erhöhtem Zeichen- und Wortabstand vollständig?
- Auf 200 Prozent vergrößern: Bleibt jeder Text lesbar und jede Funktion bedienbar, ohne dass Inhalt abgeschnitten wird?
- Umbruch testen: Bricht die Seite bei 320 Pixeln Breite ohne waagerechtes Scrollen um?
- Befunde festhalten: Jeden Punkt einem Kriterium zuordnen und in einer Erklärung zur Barrierefreiheit dokumentieren.
Ein einzelner geprüfter Text nützt wenig, wenn der Rest der Seite ungeprüft bleibt. Die barrierefreie Umsetzung betrachtet die Oberfläche als Ganzes, und die Anforderungen des BFSG gelten für Schrift und Abstände genauso wie für jedes andere Element. Ein WCAG-2.2-Audit liefert dafür die priorisierte Maßnahmenliste, und ein laufendes BFSG-Monitoring erkennt, wenn ein späteres Update die sorgsam gesetzten Größen und Abstände wieder verschiebt.
Quellen und Studien