The Universal Web

2.5 Zeilenlänge

Die Satzbreite von 55–65 Zeichen hält auch zwei Jahrzehnte später stand — heute direkt in CSS mit ch-Einheiten ausdrückbar und begrenzt durch die 80-Zeichen-Leitlinie der WCAG und die 320px-Reflow-Anforderung.

6 min read

Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.

Die Zeilenlänge — traditionell die Satzbreite — ist die Breite einer Textspalte, gezählt in Zeichen. Die Ausgabe von 2005 empfahl 55–65 Zeichen pro Zeile, etwa zehn bis zwölf Wörter, und warnte, das Lesen am Bildschirm sei ermüdender als im Druck, weshalb kürzere Zeilen und kleinere Absätze sicherer seien. Von allem in der ursprünglichen Untersuchung hat sich diese Empfehlung am besten gehalten. Der typografische Konsens über die bequeme Satzbreite ist seit über einem Jahrhundert Druckpraxis stabil und für Bildschirme wiederholt bestätigt worden. Geändert hat sich nicht die Zahl, sondern die Maschinerie darum herum: Das Web hat heute Einheiten, die Satzbreite direkt ausdrücken, Standards, die sie begrenzen, und Viewports, die sich das Original nicht hätte vorstellen können.

Was sich seit 2005 geändert hat

2005 bedeutete das Begrenzen der Zeilenlänge feste Pixelbreiten, geschätzt anhand eines Durchschnittszeichens. Modernes CSS drückt die Satzbreite in den Begriffen des Textes selbst aus: Die ch-Einheit entspricht der Dickte der Null-Glyphe im aktuellen Font und ist damit ein brauchbarer Näherungswert für die durchschnittliche Zeichenbreite. Eine einzige Deklaration — max-width: 65ch — kodiert die Kernempfehlung dieses Kapitels und passt sich automatisch an, wenn sich Font, Größe oder Nutzerpräferenz ändern. Das ist die nützlichste einzelne Zeile barrierefreiheitsnahen CSS, die eine Gestalterin schreiben kann. Beachten Sie, dass ch eine Näherung ist: Eine 65ch-Spalte ergibt in Proportionalschrift typischerweise etwas mehr als 65 tatsächliche Zeichen, da die Null breiter ist als der Durchschnitt. Behandeln Sie sie als Zielwert, nicht als Garantie, und prüfen Sie echte Absätze.

Standards rahmen den Bereich inzwischen ein. Das WCAG-Erfolgskriterium 1.4.8 Visual Presentation (Level AAA) legt fest, dass ein Mechanismus verfügbar sein muss, mit dem Textblöcke nicht breiter als 80 Zeichen sind (40 für CJK-Schriftsysteme). Achtzig ist eine Obergrenze, kein Zielwert — das Kriterium definiert, wo die Beeinträchtigung der Lesbarkeit zu einem Barrierefreiheitsproblem wird, während die Zone von 55–65 bleibt, wo der Komfort seinen Höhepunkt erreicht. Eine Spalte, die bei etwa 65–70ch endet, erfüllt sowohl die Leitlinie als auch den älteren handwerklichen Konsens.

Die andere neue Beschränkung wirkt in die Gegenrichtung. Das Erfolgskriterium 1.4.10 Reflow (Level AA, WCAG 2.1 und 2.2) verlangt, dass Inhalte auf einen 320 CSS-Pixel breiten Viewport umbrechen — äquivalent zu einer Desktop-Seite bei 400 % Zoom — ohne zweidimensionales Scrollen. 2005 war das Risiko: zu lange Zeilen; 2026 ist ein ebenso großes Risiko: Layouts, die sich weigern, kurz zu werden. Spalten mit fester Breite, nebeneinanderliegende Layouts, die nie stapeln, und Elemente mit starren Mindestbreiten erzwingen bei 320px horizontales Scrollen — das ist sowohl ein Konformitätsfehler als auch eine echte Barriere: Text zu lesen, der in jeder Zeile seitliches Scrollen verlangt, gehört zu den quälendsten Erfahrungen, von denen sehbehinderte Nutzer berichten. Bei 320px mit 16px-Fließtext laufen die Zeilen auf etwa 30–40 Zeichen. Das liegt unter der Komfortzone, und das ist in Ordnung — kurze Zeilen verlangsamen das Lesen leicht, brechen es aber nicht, während horizontales Scrollen es vollständig bricht. Gestalten Sie die Satzbreite als Maximum, nie als Minimum.

Warum der Bereich funktioniert

Die Stabilität der 55–65-Empfehlung spiegelt die Mechanik des Lesens wider. Lange Zeilen verlängern den Rücksprung — den Satz des Auges zurück an den Anfang der nächsten Zeile — und erhöhen Doppelungsfehler, bei denen der Leser auf der falschen Zeile landet; sie verlangen zusätzlichen Durchschuss als Ausgleich. Sehr kurze Zeilen liefern der Vorschau jeder Fixation zu wenige Wörter, erzwingen ständige Zeilenwechsel und zerhacken Wendungen gegen ihre grammatische Struktur. Die Leserlichkeitsforschung verkompliziert das Bild auf interessante Weise: Manche Bildschirmstudien haben festgestellt, dass längere Zeilen höhere Lesegeschwindigkeiten erzeugen können, vermutlich weil sie die Zahl der kostspieligen Rücksprünge reduzieren — doch Leser bevorzugen und bewerten moderate Zeilen konsistent als bequemer, und der Komfort entscheidet darüber, ob Menschen weiterlesen. Für anhaltendes Lesen sprechen Präferenz und geringere Ermüdung für die moderate Satzbreite, und die empfiehlt dieses Kapitel weiterhin.

Die Wechselwirkung mit dem Durchschuss, im vorigen Kapitel behandelt, verdient die Wiederholung als eine Regel: Muss die Satzbreite lang laufen, fügen Sie Zeilenabstand hinzu. Eine 75-Zeichen-Zeile bei line-height 1,6 bleibt lesbar; dieselbe Zeile bei 1,3 lädt zum Doppeln ein.

Der Rücksprung vom Zeilenende zurück an den Anfang der nächsten Zeile — lang und fehleranfällig bei breiter Satzbreite, kurz und zuverlässig bei moderater.

Responsive Satzbreite in der Praxis

Das moderne Muster kombiniert drei Zutaten. Eine Inhaltsspalte mit max-width um 60–70ch etabliert die ideale Satzbreite auf großen Bildschirmen. Fluides horizontales Padding lässt die Spalte bis hinunter zu schmalen Viewports atmen, ohne je horizontales Scrollen auszulösen. Und wenn fluide Typografie im Spiel ist — Schriftgrößen, die per clamp() mit dem Viewport skalieren —, denken Sie daran, dass die Satzbreite in Zeichen gezählt wird, nicht in Pixeln: Weil ch der Schriftgröße folgt, wächst eine ch-basierte max-width mit der Schrift und hält die Zeichenzahl ungefähr konstant — genau das Verhalten, das Sie wollen.

Eine Umkehrung gegenüber dem Originaltext: Die Ausgabe von 2005 riet, Silbentrennung im Fließtext zu vermeiden. Bei Flattersatz mit großzügiger Satzbreite ist Silbentrennung tatsächlich unnötig. Aber bei den schmalen Satzbreiten, die der Reflow erzwingt, erzeugen lange Wörter in ungetrenntem Text klaffende Flatterränder oder laufen ganz über. hyphens: auto zu aktivieren (mit korrekt gesetztem lang-Attribut, da die Silbentrennung wörterbuchgestützt ist) ist heute gute Praxis für Fließtext, der schmale Spalten überstehen muss. Kombinieren Sie es, wo unterstützt, mit text-wrap: pretty für bessere Umbruchentscheidungen.

Schließlich gilt der Rat des Originals zur Absatzlänge weiterhin und hat Zähne bekommen: Kürzere Absätze unterstützen die Orientierung, auf die Screenreader-Nutzer, Überflieger und Leserinnen mit Aufmerksamkeits- oder Gedächtnisschwierigkeiten gleichermaßen angewiesen sind. WCAG 1.4.12 erwartet zusätzlich, dass Inhalte einen vom Nutzer erhöhten Absatzabstand tolerieren; vermeiden Sie also Layouts, die davon ausgehen, dass Absätze sich auf eine exakte Höhe packen.

In CSS

article {
  max-width: 65ch;        /* 45–75 characters; ~65 is the sweet spot */
  margin-inline: auto;
  padding-inline: 1rem;   /* fluid gutter at every width */
}

/* Test at a 320px viewport: no horizontal scrolling (WCAG 1.4.10) */

Empfehlungen

  • Zielen Sie für Fließtext auf 55–65 Zeichen pro Zeile; behandeln Sie 80 als äußerste Grenze gemäß WCAG 1.4.8.
  • Implementieren Sie die Satzbreite mit max-width in ch-Einheiten (etwa 60–70ch) auf der Inhaltsspalte.
  • Stellen Sie sicher, dass Inhalte bei einem 320px-Viewport ohne horizontales Scrollen umbrechen (WCAG 1.4.10); setzen Sie nie eine Mindest-Satzbreite.
  • Erhöhen Sie den Zeilenabstand, wenn die Satzbreite lang läuft; die beiden Einstellungen sind eine Entscheidung.
  • Aktivieren Sie hyphens: auto mit korrektem lang-Attribut, damit schmale Spalten sauber umbrechen, und ergänzen Sie text-wrap: pretty, wo unterstützt.
  • Halten Sie die Satzbreite bei fluider Typografie in zeichenrelativen Einheiten, damit die Zeilenlänge stabil bleibt, wenn die Schriftgröße skaliert.
  • Halten Sie Absätze kurz; prüfen Sie, dass Layouts erhöhten Absatzabstand gemäß WCAG 1.4.12 tolerieren.

Weiterführende Literatur