Zu enge Zeilen ermüden beim Lesen. Wer schlecht sieht oder Legasthenie hat, stellt sich deshalb manchmal selbst mehr Abstand ein. Dann zeigt sich, ob deine Website mitspielt oder ob Text abgeschnitten wird. Dieser Beitrag ist Teil meiner Serie Barrierefreie Typografie. Am Ende gibt es eine Checkliste zum Abhaken, auch als PDF.
Kurz gesagt
Die WCAG, die internationalen Regeln für barrierefreie Websites, schreiben dir keinen bestimmten Zeilenabstand vor. Sie verlangen, dass deine Website nicht kaputtgeht, wenn Besucher die Abstände selbst vergrößern. Diese Regel hat die Nummer 1.4.12 und gehört zu den Anforderungen, an denen sich die Barrierefreiheitsgesetze in Deutschland und Österreich orientieren. Ein großzügiger Zeilenabstand ist trotzdem eine gute Idee.
Was ist mit Zeilenabstand gemeint?
Der Zeilenabstand ist der Platz zwischen zwei Textzeilen. Dazu kommen drei weitere Abstände: zwischen Absätzen, zwischen einzelnen Buchstaben und zwischen Wörtern. Alle vier bestimmen, wie dicht ein Text wirkt. Die WCAG nennen dafür vier Werte, jeweils bezogen auf die Schriftgröße:
- Zeilenabstand: das 1,5-Fache der Schriftgröße
- Abstand nach einem Absatz: das 2-Fache der Schriftgröße
- Buchstabenabstand: das 0,12-Fache der Schriftgröße
- Wortabstand: das 0,16-Fache der Schriftgröße
Bei einer Schriftgröße von 16 Pixeln heißt das: 24 Pixel Zeilenabstand, 32 Pixel Platz nach jedem Absatz, knapp 2 Pixel zusätzlich zwischen den Buchstaben und gut 2,5 Pixel zusätzlich zwischen den Wörtern.
Vorher und nachher
So sieht das Problem in der Praxis aus. Ein Kasten auf einer Website hat eine feste Höhe. Mit den normalen Abständen passt alles. Stellt jemand mehr Abstand ein, braucht der Text mehr Platz. Der Kasten wächst aber nicht mit, und der Rest des Textes verschwindet.
Was das für dein Unternehmen heißt
Wer Abstände vergrößert, braucht das zum Lesen. Fehlt dann die Hälfte eines Angebots oder der Button „Jetzt anfragen“, verlierst du diese Person als möglichen Kunden. Laut W3C, dem Gremium, das die WCAG herausgibt, profitieren vor allem Menschen mit einer Sehbehinderung, Menschen mit Legasthenie und Menschen mit kognitiven Einschränkungen.
Dazu kommt das Rechtliche. Die WCAG haben drei Stufen: A ist die Grundlage, AA der übliche gesetzliche Maßstab, AAA die freiwillige Höchststufe. Die Regel zu den Textabständen gehört zu AA. Die gute Nachricht: In meiner Praxis kann ein Webentwickler den Fehler meist mit kleinen Änderungen beheben, ohne dass sich das Design ändert.
Wo du das auf deiner Website findest
Besonders betroffen sind kurze Texte in engen Kästen, etwa im Menü. Das W3C nennt genau dieses Beispiel. Typische Stellen sind:
- Hauptmenü: Menüpunkte rutschen in eine zweite Zeile und verschwinden hinter dem Inhalt.
- Kästen und Vorschauen: Blog-Vorschauen, Leistungskacheln oder Produktboxen mit fester Höhe.
- Buttons: Die Beschriftung passt nicht mehr hinein und wird abgeschnitten.
- Große Bildbereiche oben auf der Seite und Bildwechsler: Text liegt über einem Bild in einem Bereich mit fester Höhe.
- Cookie-Banner und Hinweisleisten: Sie bleiben oft fix am Bildschirmrand stehen, der untere Teil ist dann nicht mehr erreichbar.
- Tabellen und Preislisten: Spalten mit fester Breite, in denen Text übereinanderliegt.
So prüfst du es selbst
Du brauchst dafür keine Programmierkenntnisse. Der Entwickler Steve Faulkner hat ein kleines Lesezeichen gebaut, das Text Spacing Bookmarklet. Das W3C verlinkt es selbst als Testhilfe. So geht es, am Computer:
- Blende die Lesezeichenleiste deines Browsers ein: am PC mit Strg + Umschalt + B, am Mac mit Cmd + Umschalt + B.
- Öffne die verlinkte Seite und zieh den Link „Text Spacing“ mit gedrückter Maustaste in die Lesezeichenleiste.
- Öffne deine Website und klick auf das neue Lesezeichen. Der Text wirkt danach breiter und luftiger, das ist gewollt.
- Scroll die Seite durch und achte darauf, ob irgendwo Text fehlt, abgeschnitten ist oder übereinanderliegt.
- Neu laden setzt alles zurück.
Für die Handy-Ansicht ziehst du das Browserfenster am Computer ganz schmal, bis sich die Seite umstellt, und klickst das Lesezeichen noch einmal an.
Was das Gesetz verlangt
Die Regel heißt 1.4.12 Textabstände und gehört zur Stufe AA. Sie kam 2018 mit den WCAG 2.1 dazu und gilt auch in der aktuellen Fassung 2.2. Der Kern: Wenn jemand die vier Abstände auf die genannten Werte stellt, darf kein Inhalt und keine Funktion verloren gehen. Eine Ausnahme nennt das W3C: Text darf mit Auslassungspunkten (…) gekürzt werden, wenn der volle Text anders erreichbar bleibt, etwa auf der verlinkten Seite.
- Deutschland und Österreich: Das Barrierefreiheitsstärkungsgesetz (BFSG) und das Barrierefreiheitsgesetz (BaFG) gelten seit 28. Juni 2025, zum Beispiel für Online-Shops und Buchungen im Internet. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Umsatz oder Bilanzsumme.
- Welche Regeln genau: Die Gesetze nennen die WCAG nicht direkt. Als Maßstab gilt in der Praxis die europäische Norm EN 301 549, die die WCAG-Stufe AA übernimmt. Eine neue Fassung mit den WCAG 2.2 ist fertig und soll Ende 2026 offiziell gelten. Wer sie erfüllt, bei dem wird dann vermutet, dass er die Gesetze erfüllt. Die Regel 1.4.12 steht in der alten wie in der neuen Fassung.
- Schweiz: Auf Grundlage des Behindertengleichstellungsgesetzes (BehiG) gelten die WCAG bisher nur für Websites des Bundes, über den Standard eCH-0059. Wer als Schweizer Unternehmen an Verbraucher in der EU verkauft, kann aber unter die EU-Regeln fallen.
Es gibt noch eine zweite Regel, 1.4.8 Visuelle Darstellung. Sie nennt einen Zeilenabstand von mindestens 1,5 und einen größeren Abstand zwischen Absätzen. Auch hier muss das nur einstellbar sein. Diese Regel gehört zur Stufe AAA und ist gesetzlich nicht gefordert.
Was die Studien zu Abständen sagen
Die Werte in 1.4.12 beruhen laut W3C auf einer Studie von McLeish aus 2007 zum Buchstabenabstand bei jungen Lesern mit Sehbehinderung. Daraus hat der Barrierefreiheits-Experte Wayne Dick die vier Werte abgeleitet. Die übrige Forschung ist nicht ganz eindeutig:
- Mehr Buchstabenabstand hilft bei Legasthenie, aber anders als gedacht. Zorzi und Kollegen fanden 2012: Kinder mit Legasthenie lasen mit deutlich mehr Buchstabenabstand sofort besser. Eine niederländische Studie von Hakvoort und Kollegen fand dagegen nur weniger Lesefehler, kein schnelleres Lesen, und das bei Kindern mit und ohne Legasthenie gleichermaßen.
- Es liegt am Abstand, nicht an der Spezialschrift. Bei Marinus und Kollegen lasen schwache Leser mit einer Legasthenie-Schrift etwas schneller. Mit einer normalen Schrift und denselben Abständen war der Unterschied nicht mehr messbar.
- Buchstaben- und Wortabstand gehören zusammen. Laut Galliussi und Kollegen bremst mehr Buchstabenabstand das Lesen, wenn der Wortabstand nicht passend mitwächst.
- Zeilenabstand: Bei der Suche auf Webseiten fanden Ling und van Schaik mit mehr Zeilenabstand schnellere und genauere Ergebnisse. Bei Lesern mit Legasthenie wirkte sich laut Rello und Kollegen dagegen nur die Schriftgröße messbar aus, der Zeilenabstand nicht.
Einen Zeilenabstand, der für alle am besten ist, belegt keine Studie. Deshalb ist der Ansatz der WCAG sinnvoll: Jeder stellt sich ein, was er braucht. Deine Website muss das nur zulassen.
Was du tun solltest und was nicht
Das Prüfen lohnt sich immer. Es dauert ein paar Minuten und deckt Fehler auf, die auch ohne geänderte Abstände auftreten können. Zum Beispiel, wenn die englische Übersetzung länger ist oder jemand im Team einen Vorschautext verlängert.
Für normalen Text in Absätzen, den sogenannten Fließtext, ist ein Zeilenabstand um 1,5 ein guter Ausgangspunkt. Ich verwende auf purin.at ähnliche Werte. Bei großen Überschriften wirkt so viel Abstand oft zu luftig, dort darf er kleiner sein. Das ist erlaubt, solange die Überschrift nicht kaputtgeht, wenn jemand den Abstand erhöht.
Lass die Buchstaben aber nicht extra weit auseinanderziehen, nur weil es barrierefrei wirken soll. Wie die Studie von Galliussi zeigt, kann mehr Buchstabenabstand ohne mehr Wortabstand das Lesen bremsen. Normale Abstände als Standard und Platz für mehr, das ist der richtige Weg.
Checkliste: Zeilenabstand auf deiner Website
Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.
- Normaler Text in Absätzen wirkt luftig, nicht gedrängt. Einen längeren Absatz ansehen. Kleben die Zeilen aneinander?
- Zwischen Absätzen ist deutlich Platz. Erkennst du auf einen Blick, wo ein Absatz endet?
- Mit dem Text Spacing Bookmarklet fehlt kein Text (WCAG 1.4.12). Lesezeichen anklicken und jede wichtige Seite durchscrollen. Neu laden setzt alles zurück.
- Menüpunkte bleiben lesbar und erreichbar. Mit Bookmarklet das Menü öffnen. Rutscht etwas weg oder hinter den Inhalt?
- Kästen und Vorschauen wachsen mit. Blog-Vorschauen, Leistungskacheln und Preisboxen prüfen. Ist der Text unten abgeschnitten?
- Buttons zeigen ihre ganze Beschriftung. Alle Buttons mit Bookmarklet ansehen, auch im Cookie-Banner.
- Nichts überlappt. Liegen Überschrift und Text oder zwei Spalten übereinander?
- Auch die Handy-Ansicht besteht den Test. Das Browserfenster am Computer ganz schmal ziehen und das Lesezeichen erneut anklicken.
Für deinen Webentwickler
Diesen Teil kannst du so an die Person weitergeben, die deine Website betreut. Das W3C beschreibt die Lösung in der Technik C36, den typischen Fehler in F104: feste Höhen, overflow: hidden und absolut positionierter Text.
/* Fließtext: guter Ausgangswert, ohne Einheit */
body { line-height: 1.5; }
p { margin-block-end: 1.5em; }
/* Karten, Buttons, Menüs: wachsen lassen statt fixieren */
.card { height: auto; min-height: 12rem; } /* statt height: 12rem */
.btn { padding: .75em 1.25em; } /* statt height: 44px */
.nav a { white-space: normal; }
/* overflow: hidden nur, wo nie Text drinsteht */
/* Test: diese Werte müssen ohne Verlust funktionieren (WCAG 1.4.12) */
* {
line-height: 1.5 !important;
letter-spacing: .12em !important;
word-spacing: .16em !important;
}
p { margin-bottom: 2em !important; }Der untere Block ist nur zum Testen gedacht, nicht für die Live-Seite. Er macht dasselbe wie das Bookmarklet. Getestet wird bei 100 % Zoom und in jeder Ansicht des responsiven Layouts.
Häufige Fragen
Welchen Zeilenabstand verlangen die WCAG?
Für die Stufe AA keinen bestimmten. Die Regel 1.4.12 verlangt nur, dass nichts verloren geht, wenn Besucher den Zeilenabstand auf das 1,5-Fache der Schriftgröße stellen. Einen Mindestwert von 1,5 nennt nur die AAA-Regel 1.4.8, und die ist keine Pflicht.
Wie stellen Besucher die Abstände überhaupt um?
Mit Zusatzprogrammen im Browser oder Lesehilfen, die Text für Menschen mit Legasthenie oder Sehbehinderung aufbereiten. Deine Website merkt davon nichts. Sie muss nur flexibel genug gebaut sein.
Ist 1,5 Zeilenabstand immer am besten lesbar?
Nein, einen Wert, der für alle am besten ist, belegen die Studien nicht. 1,5 ist für Fließtext ein guter Ausgangswert. Überschriften dürfen enger gesetzt sein.
Muss ich dafür meine Website neu bauen?
Nach meiner Erfahrung fast nie. Meist reicht es, wenn dein Webentwickler Kästen so einstellt, dass sie mit dem Text mitwachsen. Das Design bleibt gleich.
Du willst wissen, ob deine Website den Test besteht? Einen ersten Eindruck gibt der kostenlose Barrierefreiheits-Schnellcheck. Wenn du es genau wissen willst, schau dir meine Leistungen zur Barrierefreiheit an oder schreib mir über die Kontaktseite. Zurück in der Serie geht es zur Schriftgröße, alle Themen findest du in der Übersicht.
Quellen
- W3C: Understanding Success Criterion 1.4.12 Text Spacing
- W3C: Understanding Success Criterion 1.4.8 Visual Presentation
- W3C: Technik C36, Allowing for text spacing override
- W3C: Fehlertechnik F104
- Steve Faulkner: Text Spacing Bookmarklet
- Zorzi et al. (2012): Extra-large letter spacing improves reading in dyslexia. PNAS 109(28)
- Hakvoort et al. (2017): Improvements in reading accuracy as a result of increased interletter spacing are not specific to children with dyslexia. Journal of Experimental Child Psychology 164
- Marinus et al. (2016): A special font for people with dyslexia: Does it work and, if so, why? Dyslexia 22(3)
- Galliussi et al. (2020): Inter-letter spacing, inter-word spacing, and font with dyslexia-friendly features. Annals of Dyslexia 70
- Ling, van Schaik (2007): The influence of line spacing and text alignment on visual search of web pages. Displays 28(2)
- Rello, Pielot, Marcos, Carlini (2013): Size Matters (Spacing not): 18 Points for a Dyslexic-friendly Wikipedia. W4A
- § 4 Barrierefreiheitsstärkungsgesetz (BFSG)
- National Disability Authority: EN 301 549 V4.1.1 published
