Schrift, Größe, Zeilenabstand: was Text lesbar macht

Über die Schriftart wird bei jedem Website-Projekt geredet. Meistens genau eine Runde lang, meistens unter dem Stichwort „passt das zur Marke". Über Schriftgröße, Zeilenabstand und Zeilenlänge wird selten geredet, obwohl diese drei mehr darüber entscheiden, ob dein Text tatsächlich gelesen wird.

Dieser Artikel behandelt beides — und trennt dabei, was Geschmack ist und was messbar zählt.

Drei Begriffe, die man auseinanderhalten sollte

Die Fachliteratur unterscheidet drei Eigenschaften, die im Alltag alle „gut lesbar" heißen:

Leserlichkeit beschreibt, wie gut man einzelne Zeichen erkennt und voneinander unterscheidet. Das klassische Testfeld ist die Kombination aus großem I, kleinem l und der Ziffer 1. In manchen Schriften sind das drei identische senkrechte Striche. Wer dann eine Auftragsnummer oder ein Passwort abtippt, rät.

Lesbarkeit beschreibt, wie leicht sich ein ganzer Text lesen und verstehen lässt. Hier spielen Schriftart, Größe, Zeilenabstand und Satz zusammen.

Anmutung ist die ästhetische Wirkung. Sie ist nicht nebensächlich: Eine Schrift, die gefällt, erhöht die Lesemotivation. Sie steht nur nicht an erster Stelle.

Die Reihenfolge ist wichtig. Eine Schrift, die zur Marke passt, aber I und l nicht unterscheidbar macht, ist die falsche Wahl — auch wenn sie besser aussieht.

(Rheinwerk, Barrierefreie Webseiten, Kap. 6.3)

Die Schriftart

Die WCAG verbieten keine einzige Schriftart. Es gibt keine Liste erlaubter Schriften und keine Prüfung, die eine Schrift durchfallen lässt. Was es gibt, sind Empfehlungen von Leuten, die sich damit ernsthaft beschäftigt haben.

Die drei Gruppen kurz:

Serifenschriften haben kleine Abschlussstriche an den Buchstabenenden — Times New Roman ist das Standardbeispiel. Im Druck sind sie sehr gut lesbar, weil die Serifen die Buchstaben optisch verbinden und das Auge über die Zeile führen. Auf niedrig auflösenden Bildschirmen konnten sie früher matschig wirken. Mit heutigen Displays gilt dieses alte Argument gegen Serifen im Web kaum noch.

Egyptienne oder Slab Serif haben kräftige, blockartige Serifen — Rockwell etwa. Auffällig und gut lesbar in Überschriften und kurzen Texten, für lange Lesestrecken durch ihre Massivität weniger geeignet.

Serifenlose Schriften haben glatte Buchstabenenden und meist gleichmäßige Strichstärke — Arial, Verdana. Sie wirken modern und sind auf Bildschirmen gut lesbar. In langen gedruckten Texten ermüden sie eher, weil die Buchstaben weniger verbunden wirken.

Die konkrete Empfehlung, und die kommt vom Deutschen Blinden- und Sehbehindertenverband über leserlich.info: humanistische serifenlose Schriften. Also solche, deren Formen sich an der Handschrift orientieren und offener gebaut sind — Calibri, Verdana, Noto Sans, Open Sans, unter den kommerziellen etwa Frutiger. Das deckt sich mit der Einordnung nach DIN 16518.

Drei Schriften, die für schwierige Lesesituationen gebaut wurden und alle über Google Fonts verfügbar sind:

• Atkinson Hyperlegible — vom Braille Institute entwickelt, mit bewusst unterschiedlich geformten Buchstaben, die sonst verwechselt werden.
• Lexend — auf Lesegeschwindigkeit hin gestaltet.
• OpenDyslexic — mit beschwerten Unterlängen, für Leser mit Legasthenie gedacht.

Worauf du bei der Auswahl konkret achtest:

• Sind I, l und 1 unterscheidbar? Tipp sie nebeneinander und schau hin.
• Sind c, e und o klar offen, oder laufen die Bögen fast zu? Geschlossene Formen sind bei schlechtem Licht schwerer zu unterscheiden.
• Wie stark ist der Unterschied zwischen Grundstrich und Haarstrich? Der Grundstrich ist der tragende, dicke Strich eines Buchstabens, der Haarstrich der feine Gegenstrich — beim H die beiden dicken Senkrechten gegenüber dem dünnen Querbalken. Ein sehr hoher Kontrast zwischen beiden wirkt elegant und wird bei kleinen Größen zum Problem.

Die Schriftgröße

Die WCAG schreiben keine Mindestgröße vor. Sie schreiben Kontraste vor, die von der Größe abhängen — das ist etwas anderes.

Die Empfehlung lautet: mindestens 16 px. Das ist gleichzeitig der Standardwert der meisten Browser und lange der Desktop-Standard gewesen. Der Trend geht inzwischen zu 18 bis 24 px für Fließtext, abhängig von der Schriftart. Der Schriftgrößenrechner des DBSV kommt für Desktop-Fließtext auf Werte um 22 px.

Auf dem Smartphone gilt ebenfalls 16 px als Standard. Gelegentlich wird auf 14 px reduziert — davon rate ich ab, und die Fachliteratur ebenfalls.

Der Grund, warum die Größe nicht absolut festgelegt werden kann, ist der Leseabstand. Zum Smartphone sind es etwa 30 cm, zum Monitor etwa 70 cm. Dazu kommen die individuelle Sehschärfe — DIN 1450 rechnet mit über 70 Prozent, bei sehbehinderten Menschen und Senioren mit 40 bis 50 Prozent — und die Umgebung. Die DIN EN ISO 9241-303 für elektronische Anzeigen leitet daraus rechnerisch Werte ab, die meist deutlich über 24 px liegen.

Praktisch heißt das: 16 px ist die Untergrenze, nicht das Ziel. Wenn du zwischen 16 und 20 px schwankst, nimm 20.

Relative statt absolute Einheiten. Setz die Basisgröße einmal fest und leite alles andere relativ davon ab:

:root {
  font-size: 100%;   /* respektiert die Browsereinstellung des Nutzers */
}

body {
  font-size: 1.125rem;
}

Der Unterschied ist nicht theoretisch. Wer die Schriftgröße im Browser hochgestellt hat — und das tun mehr Leute, als man denkt — bekommt bei einer Angabe in px trotzdem die kleine Schrift. Bei rem wirkt seine Einstellung.

Für die Überschriftenstufen brauchst du einen Faktor, keine Einzelentscheidungen. Bei 16 px Basis und Faktor 1,25 ergibt sich: H4 = 20 px, H3 = 25 px, H2 = 31 px, H1 = 39 px. Übliche Faktoren liegen zwischen 1,2 und 1,5. Unter modularscale.com lässt sich das durchspielen.

(Rheinwerk, Barrierefreie Webseiten, Kap. 6.3)

Zeilenabstand, Zeilenlänge, Zeichenabstand

Hier liegen die Fehler, die am häufigsten übersehen werden, weil sie sich nicht als Fehler anfühlen — der Text sieht ja aus.

Zeilenabstand: mindestens 120 Prozent der Schriftgröße. Das ist die absolute Untergrenze, damit Ober- und Unterlängen benachbarter Zeilen sich nicht berühren. Die WCAG-Empfehlung für gute Darstellung liegt bei 1,5-fachem Zeilenabstand innerhalb eines Absatzes, und der Abstand zwischen Absätzen bei mindestens dem 1,5-fachen des Zeilenabstands.

Es gibt einen Zusammenhang, den man kennen sollte: Je länger die Zeilen, desto größer sollte der Zeilenabstand sein. Das Auge muss am Zeilenende zurückspringen und die nächste Zeile finden. Bei langen Zeilen ist dieser Sprung schwer, ein größerer Abstand hilft. Bei kurzen Zeilen — auf dem Smartphone etwa — kann der Zeilenabstand entsprechend kleiner sein.

Zeilenlänge: maximal etwa 80 Zeichen einschließlich Leerzeichen, auf dem Desktop. Zu lange Zeilen brechen den Lesefluss und ermüden. Das ist der Grund, warum ein Textblock über die volle Breite eines 27-Zoll-Monitors unlesbar ist, selbst wenn Schriftgröße und Kontrast stimmen. In CSS:

.beitrag p {
  max-inline-size: 70ch;
  line-height: 1.6;
}

Die Einheit ch orientiert sich an der Zeichenbreite der verwendeten Schrift, ist also genau die richtige Größe für diese Regel.

Kein Blocksatz. Blocksatz erzeugt unterschiedlich große Wortabstände, im schlimmsten Fall regelrechte Löcher, die als senkrechte weiße Bahnen durch den Absatz laufen. Das behindert das Lesen messbar und trifft Menschen mit Leseschwäche besonders. Linksbündiger Flattersatz ist im Web die richtige Wahl.

Keine Versalien für längere Passagen. GROSSBUCHSTABEN sind schwerer zu lesen, weil ihre Formen sich weniger unterscheiden als die von Kleinbuchstaben — die obere Buchstabenhälfte, die beim Lesen die meiste Information trägt, ist bei Versalien deutlich uniformer. Dazu kommt schlichte Übung: Wir lesen fast nur Gemischtsatz. Für ein einzelnes Wort in einem Button ist das vertretbar, für eine Überschrift schon grenzwertig, für einen Absatz falsch.

Zeichenabstand. Der optimale Abstand zwischen Zeichen liegt bei etwa 35 Prozent der Mittellänge — also der Höhe eines kleinen x. Ein praktischer Sonderfall aus DIN 1450: Bei heller Schrift auf dunklem Grund sollte der Zeichenabstand um etwa zwei Prozent erhöht werden, weil helle Zeichen optisch zusammenlaufen. Wer eine dunkle Variante seiner Website baut, sollte das mitnehmen.

Keine leeren Absätze als Abstandshalter. Ein <p></p> ohne Inhalt wird von Screenreadern trotzdem verarbeitet und meist als kurze Pause oder als „Leerzeile" angesagt. Für den Zuhörer entsteht der Eindruck, dass da etwas fehlt. Abstände gehören in CSS, nicht in leere Elemente.

(Rheinwerk, Barrierefreie Webseiten, Kap. 6.4)

Was passiert, wenn jemand die Schrift größer stellt

Das ist der Punkt, an dem Websites tatsächlich kaputtgehen — und der Punkt, den fast niemand prüft.

Es gibt vier Kriterien dazu, und alle sind Stufe AA, also relevant für die gesetzliche Anforderung:

1.4.4 Textgröße ändern. Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen. Ohne Spezialsoftware, einfach über den Browser-Zoom. Buttons müssen weiter bedienbar bleiben, Texte dürfen nicht abgeschnitten werden.

1.4.10 Reflow. Bei 400 Prozent Vergrößerung darf man nur noch in einer Richtung scrollen müssen — entweder senkrecht oder waagerecht, nicht beides. Praktisch entspricht das einem Ansichtsfenster von 320 × 256 CSS-Pixeln. Der ehrlichste Test dafür ist nicht der Zoom im Desktop-Browser, sondern die Seite auf einem echten Smartphone anzuschauen; das Ergebnis unterscheidet sich oft.

1.4.12 Textabstände. Wenn ein Nutzer über eigene Einstellungen die Abstände verändert, darf nichts verloren gehen. Die Werte, bei denen die Seite noch funktionieren muss:

Eigenschaft	Wert
Zeilenhöhe	mindestens 1,5-fache Schriftgröße
Absatzabstand	mindestens 2-fache Schriftgröße
Zeichenabstand	mindestens 0,12-fache Schriftgröße
Wortabstand	mindestens 0,16-fache Schriftgröße

Der typische Bruch hier: Ein Button mit fest eingestellter Höhe, dessen Text bei größerem Zeilenabstand unten herausläuft. Oder eine Kachel mit fester Höhe, in der der Text abgeschnitten wird.

1.3.4 Ausrichtung. Die Seite muss im Hoch- und im Querformat funktionieren. Die Ausrichtung darf nicht festgenagelt werden.

Und das Viewport-Meta-Tag. Ein Detail mit großer Wirkung:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

So gehört es hin. Was da nicht hingehört, sind maximum-scale=1.0 oder user-scalable=no. Beides verhindert, dass jemand auf dem Telefon hineinzoomen kann. Das steht in erstaunlich vielen älteren Themes und Baukasten-Exporten und ist einer der Fälle, in denen eine einzige Zeile eine Website für sehbehinderte Nutzer praktisch unbrauchbar macht.

(Rheinwerk, Barrierefreie Webseiten, Kap. 6.5)

Text in Bildern

Ein Sonderfall, der noch immer regelmäßig vorkommt: Text, der als Grafik gespeichert ist. Ein Angebotsbanner, eine Preistabelle als PNG, eine Grußkarte mit Text, eine Infografik, in der die eigentliche Aussage steht.

Was daran nicht funktioniert:

1. Screenreader erkennen den Text nicht als Text. Was dort steht, existiert für einen blinden Nutzer nur, wenn es zusätzlich im Alternativtext steht — und dort steht es meist nicht vollständig.
2. Beim Vergrößern wird er pixelig. Er folgt außerdem nicht den Zeichen- und Zeilenabstandseinstellungen des Nutzers und bricht nicht um. Auf dem Smartphone wird eine Preistabelle als Bild entweder winzig oder muss seitlich geschoben werden.
3. Der Kontrast passt sich nicht an. Wer eine eigene Hintergrundfarbe eingestellt hat, bekommt bei einer Grafik mit transparentem Hintergrund unter Umständen unlesbaren Text.
4. Suchmaschinen lesen ihn nicht. Der Text ist für die Auffindbarkeit schlicht nicht vorhanden — und für KI-Systeme, die deine Seite auswerten, ebenfalls nicht.

Die Regel dazu, Kriterium 1.4.5 auf Stufe AA: Verwende echten Text, mit CSS gestaltet, statt Bilder von Text. Zwei Ausnahmen sind vorgesehen — wenn sich das Textbild an die Bedürfnisse des Nutzers anpassen lässt, oder wenn genau diese Darstellung wesentlich für die Aussage ist. Auf der höheren Stufe AAA (Kriterium 1.4.9) fällt fast alles weg außer reiner Dekoration und Logos.

Praktisch heißt das für dich: Das Firmenlogo darf ein Bild mit Text sein. Alles andere nicht.

Wenn du eine Grafik brauchst, in der Text vorkommt, ist SVG der bessere Weg — der Text bleibt dort Text, skaliert sauber und lässt sich per CSS einfärben.

(Rheinwerk, Barrierefreie Webseiten, Kap. 6.6)

Wie du das selbst prüfst

Der Zoom-Test. Öffne deine Seite und drück fünfmal Strg und +. Das sind ungefähr 200 Prozent. Schau, ob noch alles da ist: Überschriften, Buttons, Menü, Formulare. Dann weiter bis 400 Prozent und prüf, ob du in zwei Richtungen scrollen musst.

Der Schriftgrößen-Test im Browser. Stell in den Browsereinstellungen die Standardschriftgröße auf 20 oder 24 px und lade deine Seite neu. Wenn sich nichts ändert, sind deine Größen in px festgeschrieben.

Das Textabstände-Lesezeichen. Auf bitvtest.de in der Werkzeugliste gibt es ein Bookmarklet, das die vier Abstandswerte aus Kriterium 1.4.12 auf die aktuelle Seite anwendet. Ein Klick, und du siehst sofort, wo Text aus seinem Kasten läuft.

Der Quelltext-Blick aufs Viewport-Tag. Rechtsklick, Seitenquelltext anzeigen, nach viewport suchen. Steht dort user-scalable=no oder maximum-scale, ist das ein Fund.

Die Zeilenlänge nachzählen. Nicht wirklich zählen — aber wenn eine Zeile in deinem Fließtext über die halbe Bildschirmbreite eines großen Monitors läuft, ist sie zu lang.

Der Schriftgrößenrechner des DBSV unter leserlich.info/werkzeuge/schriftgroessenrechner/ rechnet nach DIN 1450 aus Leseabstand und angenommener Sehschärfe eine Mindestgröße aus. Nützlich, wenn du eine Entscheidung begründen musst.

Was zu tun ist

Setz die Basis einmal richtig, statt einzelne Stellen zu reparieren. Schriftgröße, Zeilenhöhe und Zeilenlänge gehören in die Grundgestaltung, nicht in einzelne Bausteine. In einem sauber aufgebauten System stehen diese Werte an einer Stelle und wirken überall.

Nimm die größere Variante. Bei Schriftgröße, Zeilenabstand und Absatzabstand liegt der Fehler in der Praxis fast immer auf der zu-eng-Seite. Ich habe noch keinen Kunden erlebt, der sich über zu viel Luft beschwert hat.

Vermeide feste Höhen. Buttons, Kacheln und Boxen sollten mit ihrem Inhalt wachsen. Feste Höhen sind der häufigste Grund, warum eine Seite bei größerer Schrift bricht.

Prüf die Schriftart, bevor sie in der ganzen Website steckt. Tipp einen echten Absatz in der Kandidatenschrift, in der geplanten Größe, mit Ziffern und mit den kritischen Buchstaben. Nicht das Alphabet in 60 px anschauen — so wird die Schrift später nicht benutzt.

Und der praktische Hinweis für WordPress: Wenn deine Schriften von einem fremden Server geladen werden, ist das ein eigenes Thema — sowohl für die Ladezeit als auch für den Datenschutz. Dazu gibt es einen eigenen Artikel.

Quellen

• Rheinwerk, Barrierefreie Webseiten, Kap. 6.3 (Schriftart und Schriftgröße) — Leserlichkeit, Lesbarkeit und Anmutung als drei Eigenschaften, Grundstrich und Haarstrich, die drei Schriftgruppen mit ihren Eigenschaften, die Empfehlung humanistischer serifenloser Schriften durch den DBSV über leserlich.info und der Bezug zu DIN 16518, Atkinson Hyperlegible, Lexend und OpenDyslexic, keine WCAG-Vorgabe zur Schriftart, 16 px als Mindestempfehlung und 18–24 px als Trend, DIN EN ISO 9241-303 und DIN 1450, Leseabstände von 30 cm und 70 cm, Annahmen zur Sehschärfe, die Überschriftenskala mit Faktor 1,25 und die Werkzeuge Schriftgrößenrechner und modularscale.com.
• Rheinwerk, Barrierefreie Webseiten, Kap. 6.4 (Abstände und Schreibweisen) — Zeilenabstand ab 120 Prozent, der Zusammenhang von Zeilenlänge und Zeilenabstand, Obergrenze von etwa 80 Zeichen pro Zeile, WCAG 1.4.8 mit Zeilenabstand 1,5 und Absatzabstand 1,5, kein Blocksatz, Versalien und die schlechtere Unterscheidbarkeit ihrer oberen Buchstabenhälften laut DBSV, Zeichenabstand von etwa 35 Prozent der Mittellänge und die Erhöhung um zwei Prozent bei heller Schrift auf dunklem Grund nach DIN 1450, leere Absatzelemente und ihre Ansage durch Screenreader.
• Rheinwerk, Barrierefreie Webseiten, Kap. 6.5 (Zoom und anpassbare Textabstände) — WCAG 1.4.4 mit 200 Prozent, 1.4.10 Reflow mit 400 Prozent und 320 × 256 CSS-Pixeln samt der Empfehlung, auf einem echten Gerät zu prüfen, 1.4.12 mit den vier Abstandswerten, 1.3.4 Ausrichtung, das Viewport-Meta-Tag und die Warnung vor festen Zoomstufen, das Textabstände-Bookmarklet auf bitvtest.de.
• Rheinwerk, Barrierefreie Webseiten, Kap. 6.6 (Bilder von Text) — die vier Nachteile von Textgrafiken, WCAG 1.4.5 mit seinen zwei Ausnahmen, WCAG 1.4.9 und die Sonderstellung von Logos, die Auswirkung auf die Auffindbarkeit.
• Atlas, accessibility/criteria/ — die Einordnung der genannten Erfolgskriterien nach Prinzip, Richtlinie und Konformitätsstufe.
• Eigene Prüfpraxis — die Reihenfolge der Prüfschritte, der Hinweis auf user-scalable=no in älteren Themes und Baukasten-Exporten, feste Elementhöhen als häufigste Bruchstelle bei vergrößerter Schrift, und die Empfehlung, Kandidatenschriften an einem echten Absatz statt am Alphabet zu beurteilen.