Zeilenlänge: Die 45–75-Zeichen-Regel
Mach ein kleines Experiment, bevor du dir irgendwelche Regeln ansiehst. Maximiere deinen Browser auf einem großen Monitor und öffne eine Seite, auf der der Text die volle Fensterbreite ausnutzt – eine ältere Dokumentationsseite oder eine rohe README funktioniert meist gut. Lies vier oder fünf Zeilen und beobachte, was am Ende jeder Zeile passiert: Dein Auge macht eine lange diagonale Reise zurück zum linken Rand, und bei der Ankunft zögert es – mal liest es die gerade beendete Zeile erneut, mal landet es zwei Zeilen tiefer. Mit der Schriftart ist nichts verkehrt. Die Zeilen sind schlicht zu lang, als dass die Rückreise zuverlässig ihr Ziel fände.
Die Regel: Fließtext liest sich am besten bei 45–75 Zeichen pro Zeile, Leerzeichen mitgezählt, und rund 66 Zeichen sind der klassische Idealwert. Die Zahlen stammen aus der typografischen Drucktradition – Robert Bringhursts The Elements of Typographic Style ist die übliche Quelle für das 66-Zeichen-Ideal – und sie machen die Zeilenlänge zu einer der messbarsten, am wenigsten geschmacksabhängigen Entscheidungen der Typografie. Dieser Artikel ist Teil unseres Typografie-Leitfadens; er erklärt, warum die Regel existiert, wie du den Bereich in CSS triffst und welcher Text davon ausgenommen ist.
Warum beeinflusst die Zeilenlänge die Lesbarkeit?
Lesen gleitet nicht an einer Zeile entlang – das Auge springt zwischen Fixationspunkten, mehrere Zeichen pro Sprung. Der Sprung, auf den es hier ankommt, ist der größte: der Rücksprung (return sweep), die diagonale Reise vom Ende einer Zeile zum Anfang der nächsten. Diese Reise hat ein kleines Ziel – eine Zeilenhöhe nach unten, eine ganze Spaltenbreite zurück – und ihre Fehlerrate wächst mit der zurückgelegten Distanz. Bei langen Zeilen landet der Rücksprung zu kurz, und das Auge liest die gerade verlassene Zeile erneut (die Verdopplung aus dem Experiment oben), oder er landet zu weit und überspringt eine Zeile. Das ist ein durchgängiger Befund der Leseforschung, keine Vorliebe von Designern: Je länger die Zeile, desto häufiger verfehlt die Rückreise ihr Ziel.
Kurze Zeilen scheitern auf die entgegengesetzte Weise. Eine Zeile mit 30–35 Zeichen fasst nur vier oder fünf Wörter, sodass zusammengehörige Wortgruppen über Zeilenumbrüche zerhackt werden, und das Auge verbringt einen großen Teil seiner Zeit mit Umkehren statt mit Vorwärtskommen. Das Verständnis bleibt erhalten, aber der Rhythmus wird stockend, und Lesen fühlt sich nach Arbeit an.
Das 45–75-Band ist schlicht der Bereich, in dem beide Fehlermodi selten bleiben: Zeilen lang genug, um eine vollständige Wortgruppe zu tragen, und kurz genug, dass der Rücksprung treffsicher bleibt.
Wie steuerst du die Zeichen pro Zeile?
Die Zeilenlänge ist ein Quotient: Zeichen pro Zeile = Spaltenbreite ÷
durchschnittliche Zeichenbreite. Den zweiten Term kontrollierst du selten – er
gehört zur Schriftart und zum Schriftgrad –, also ist der wirksame Hebel der
erste: die Breite der Textspalte, was in CSS max-width am Text-Container
bedeutet.
Die direkteste Einheit dafür ist ch. Ein ch entspricht der Breite der Ziffer
0 in der aktuellen Schrift und Größe, die bei den meisten proportionalen
Textschriften nahe an der durchschnittlichen Zeichenbreite liegt. Damit lässt
sich die Regel in einer Zeile umsetzen:
article p {
max-width: 65ch;
}Es ist nicht exakt – die 0 ist meist eine Spur breiter als das echte
Durchschnittszeichen, sodass 65ch oft eher an die 70 Zeichen fasst –, aber es
platziert die Spalte innerhalb des Bandes, und es skaliert automatisch mit, wenn
sich der Schriftgrad ändert, was ein Pixelwert nicht tut.
Der strukturelle Hebel ist das Spaltensystem selbst. Die Textspalten eines Layout-Rasters sind unter anderem ein Zeilenlängen-Budget: Wähle die Spaltenbreiten so, dass Fließtext bei deinem breitesten Breakpoint im Band landet, und jeder schmalere Breakpoint erbt eine sichere Zeichenzahl.
Warum verkompliziert responsives Design die Zeilenlänge?
Weil die Bildschirme schneller gewachsen sind als das Lesen. Bei 16px belegt ein durchschnittliches Zeichen rund 8px Breite, sodass ein Absatz über ein 1440px breites Fenster etwa 180 Zeichen pro Zeile läuft – mehr als das Doppelte der Bandobergrenze. Das ist, mehr als jede ästhetische Vorliebe, der Grund, warum es max-width-Container und Spaltenraster überhaupt gibt: Ein randlos abfallendes Hero-Bild darf das Fenster füllen, aber Absätze brauchen einen Zaun. Auf großen Bildschirmen ist unbegrenzte Breite der Standardfehler, kein Sonderfall.
Die Zeichenzahl an einer echten Spalte zu beurteilen schlägt das Schätzen aus dem Fenster. Die Typo-Ansicht des Scale Composer trägt ein schreibgeschütztes Spalten-Overlay, das den größten Breakpoint aus den Raster-Einstellungen spiegelt: Öffne das Fließtext-Muster mit eingeschaltetem Overlay und beurteile deine eigene Textgröße an tatsächlichen Spaltenbreiten – der Moment, in dem eine Zeile das bequeme Band überschreitet, ist direkt im laufenden Text sichtbar.
Gilt die Regel für jede Art von Text?
Nein – sie schützt das durchgehende Lesen, und ein Großteil des Interface-Texts ist das nicht:
| Text | Bereich | Warum |
|---|---|---|
| Fließtext, eine Spalte | 45–75 Zeichen | der Rücksprung muss zuverlässig landen, Zeile für Zeile |
| Fließtext, mehrere Spalten | 45–60 Zeichen | wenn eine Nachbarspalte um die Landezone konkurriert, halten kürzere Zeilen das Auge in der eigenen Spalte |
| Bildunterschriften, UI-Beschriftungen, Buttons | ausgenommen | meist eine einzige Zeile – kein Rücksprung, nichts zu schützen |
| Überschriften | ausgenommen | ein paar Wörter werden als Form erfasst, nicht linear abgetastet |
Die Ausnahmen zählen ebenso viel wie die Regel: Einem Button-Label aus drei Wörtern ein Minimum von 45 Zeichen aufzuzwingen löst ein Problem, das das Label gar nicht hat.
Wie sieht derselbe Absatz bei 40, 66 und 120 Zeichen aus?
Nimm einen Absatz aus 70 Wörtern – etwa 420 Zeichen samt Leerzeichen – gesetzt in 16px, wo das durchschnittliche Zeichen rund 8px breit ist:
- Bei ~40 Zeichen (eine 320px-Spalte) läuft der Absatz über etwa elf Zeilen. Fast kein Satz übersteht eine Zeile unversehrt; Wortgruppen brechen mitten im Gedanken, der Flatterrand rechts ist tief, und das Auge kehrt alle vier oder fünf Wörter um. Der Text liest sich in Fragmenten.
- Bei ~66 Zeichen (eine 530px-Spalte) läuft er über etwa sieben Zeilen. Die meisten Zeilen tragen eine vollständige Wortgruppe, der ~500px lange Rücksprung landet verlässlich, und der Absatz liest sich in Wortgruppen statt in Fragmenten. Das ist die Einstellung, die die Regel schützt.
- Bei ~120 Zeichen (eine 960px-Spalte) läuft er über etwa vier Zeilen – und jeder Rücksprung legt nun fast tausend Pixel zurück. Hier tauchen die verdoppelten und übersprungenen Zeilen aus dem Eingangsexperiment auf, und hier beginnen Leser klammheimlich zu überfliegen statt zu lesen.
Derselbe Absatz, dieselbe Schriftart, dieselbe Größe. Allein die Spalte entscheidet, welche der drei Erfahrungen ein Leser bekommt.
Prüf deine eigenen Spalten
Das Band wird erst zur Überzeugung, wenn du es an deinem eigenen Layout misst. Fang am kaputten Ende an: Lade ein Muster, dessen Zeilen deutlich über das Band hinauslaufen, spüre, wie der Rücksprung in einem Text, den du bearbeiten kannst, schlechter wird, und verschmälere dann den Container, bis die Zeichenzahl unter 75 fällt und sich nahe 66 einpendelt – Öffne das zu breite Muster und bring es zurück ins Band.