Die Regeln, die einen Text lesbar machen, sind alt und lassen sich an einer Hand abzählen. Sie betreffen die Spaltenbreite, den Umbruch und ein paar Zeichen, die auf der Tastatur fehlen. Wer sie kennt, sieht in fünf Minuten, warum eine Seite anstrengend wirkt.
Die Ebene darüber, also Raster, Gruppierung und Weißraum, steht in den Gestaltungsregeln im Layout. Hier geht es um den Satz: um alles, was innerhalb der Zeile passiert.
Die Spaltenbreite, und warum 66ch keine 66 Zeichen sind
Fließtext läuft zwischen 45 und 75 Zeichen pro Zeile, Leerzeichen mitgezählt, mit 66 als Idealwert. Der Wert kommt aus der Buchtypografie; Robert Bringhurst hat ihn in The Elements of Typographic Style als bereits verbreitete Konvention festgehalten. Zusammen mit Schriftgröße und Zeilenhöhe steht er im Beitrag über Schriftarten für die Website.
Im Web wird daraus gern ein Einzeiler.
.fliesstext {
max-width: 66ch;
}Der stimmt so nicht. 1ch ist nicht die durchschnittliche Zeichenbreite, sondern die Breite der Ziffer 0 in der gesetzten Schrift. In einer Textschrift ist die Null meist breiter als das durchschnittliche Zeichen, und 66ch liefert deshalb spürbar mehr als 66 Zeichen. Es hilft nur nachzählen, einmal pro Schrift. Am Ende stehen im CSS dann oft eher 50ch bis 60ch.
Blocksatz braucht Trennung, sonst reißt er Löcher
Blocksatz sieht ordentlich aus und ist im Browser fast immer ein Fehler. Er funktioniert nur mit Silbentrennung. Fehlt sie, verteilt der Browser die fehlende Breite auf die Wortzwischenräume, und in schmalen Spalten stehen weiße Gassen mitten im Absatz.
Im Layoutprogramm trennt die Software von sich aus. Im Browser musst du die Trennung einschalten, und sie braucht eine Sprachangabe, sonst fehlt das Wörterbuch.
<html lang="de">p {
text-align: justify;
hyphens: auto;
}Ohne das lang-Attribut passiert schlicht nichts, und zwar ohne Fehlermeldung. Das ist die häufigste Ursache für Blocksatz mit Löchern.
Aus dem Bleisatz stammt dazu eine Setzerregel, die weiter trägt: höchstens drei Trennungen untereinander. Vier Trennstriche in Folge bilden am Zeilenende eine eigene kleine Linie, und jede Trennung kostet den Leser einen Moment. In InDesign steht diese Grenze in den Silbentrennungsoptionen. Im Browser heißt die Eigenschaft hyphenate-limit-lines, sie läuft aber bislang nur mit Herstellerpräfix und nicht überall.
Meine Empfehlung fürs Web bleibt trotzdem Flattersatz. Er hat gleichmäßige Wortabstände, und eine unruhige rechte Kante stört beim Lesen weniger als eine Gasse mitten im Absatz. hyphens: auto schadet dabei nicht: Die Trennung nimmt der Fahne die größten Ausreißer. Im Print entscheidet die Spaltenbreite, schmale Spalten flattern besser und breite vertragen Blocksatz.
Hurenkind und Schusterjunge
Zwei Begriffe aus dem Bleisatz, die bis heute die häufigsten Umbruchfehler benennen:
- Schusterjunge: Die erste Zeile eines Absatzes steht allein unten auf der Seite, der Rest folgt auf der nächsten.
- Hurenkind, auch Witwenzeile: Die letzte Zeile eines Absatzes steht allein oben auf der neuen Seite.
Das Hurenkind gilt traditionell als der schwerere Fehler, weil eine einzelne Zeile am Seitenanfang den Leser ohne jeden Zusammenhang empfängt.
Im Layoutprogramm ist das zuerst eine Einstellung in den Umbruchoptionen und danach Handarbeit: Text kürzen, die Spalte um eine Zeile vertiefen, eine Trennung erzwingen. Im Web tritt dasselbe Problem kleiner auf, nämlich als einzelnes Restwort am Ende eines Absatzes oder einer Überschrift. Dagegen gibt es zwei CSS-Werte.
h2 { text-wrap: balance; }
p { text-wrap: pretty; }balance verteilt eine Überschrift gleichmäßig auf ihre Zeilen und läuft in allen aktuellen Browsern (Chrome ab 114, Firefox ab 121, Safari ab 17.5). pretty verhindert das einzelne Wort am Absatzende; das beherrschen Chrome und Edge seit 117 und Safari seit 26, Firefox Stand September 2026 noch nicht. Wer den Wert nicht kennt, bekommt den normalen Umbruch, kaputt geht nichts.
Die CSS-Eigenschaften orphans und widows klingen genau passend, greifen aber nur dort, wo es echte Seiten gibt: im Druck-Stylesheet und im Mehrspaltensatz. Auf einer normal scrollenden Webseite tun sie nichts.
Die Zeichen, die fast alle falsch setzen
Hier liegt der sichtbarste Unterschied zwischen gesetztem und getipptem Text, und er kostet keine Minute.
Anführungszeichen
: Deutsch stehen sie unten und oben, nicht als gerade Zoll-Zeichen der Tastatur. Textprogramme ersetzen sie meist automatisch, Code-Editoren und CMS-Felder nicht.
Bindestrich und Gedankenstrich
: zwei verschiedene Zeichen. Der Bindestrich verbindet, wie in E-Mail-Adresse. Der Gedankenstrich trennt Einschübe und ist länger, ein Halbgeviertstrich. Nebeneinander sieht man es sofort: – gegen -.
Geschützte Leerzeichen
: „z. B.“ schreibt der Duden mit Leerzeichen, und dieses Leerzeichen gehört geschützt, damit die Abkürzung nicht über zwei Zeilen zerreißt. Typografisch steht dort ein schmales geschütztes Leerzeichen ( ), und ebenso zwischen Paragraphenzeichen und Zahl: „§ 5“. Im Geschäftsbrief nach DIN 5008 nimmt man stattdessen das volle ( ). Für Maßangaben wie „10 kg“, für „Dr. Müller“ und für „1. Januar“ reicht das volle ohnehin.
Auszeichnung im Fließtext
: Kursiv hebt hervor, ohne den Grauwert des Absatzes zu stören. Fett zieht den Blick aus dem Lesefluss heraus und gehört deshalb in Listen und Zwischenüberschriften.
Die Reihenfolge, die im Alltag trägt
- Spaltenbreite festlegen, also die Zeilenlänge.
- Zeilenabstand dazu wählen, im Fließtext zwischen 1,4 und 1,6. Die Barrierefreiheits-Norm schreibt dir dabei keinen Wert vor, sondern verlangt, dass dein Layout hält, wenn der Leser die Abstände selbst hochdreht, die Zeilenhöhe etwa auf das 1,5-Fache (WCAG, Erfolgskriterium 1.4.12, Text Spacing). Entscheidend ist deshalb nicht dein Wert, sondern dass die Textblöcke nach unten wachsen dürfen.
- Trennung und Umbruchoptionen einstellen, bevor der Text einfließt.
- Die Zeichen beim Schreiben korrigieren, statt sie hinterher zu suchen.
- Eine eigene Schlussrunde, die nur den Umbruch prüft.
Punkt 5 ist der, den alle weglassen, und der billigste von allen. Bei einem Heft fällt der Satz zweimal an: einmal, wenn der Text einfließt, und einmal nach der letzten inhaltlichen Korrektur, wenn drei geänderte Wörter den Umbruch einer ganzen Doppelseite verschoben haben. Wer danach nicht noch einmal auf den Umbruch schaut, druckt die Hurenkinder mit. Wie das in der Praxis abläuft, steht im Guide Magazin selbst gestalten.
Im Web ist dieselbe Runde kürzer: Seite auf Handybreite ziehen, auf volle Desktop-Breite ziehen, und dabei wirklich lesen. Was beim Lesen im Browser tatsächlich passiert, steht unter Leseverhalten im Web.
Diese Schlussrunde ist der Teil, den ich bei einer von mir gebauten Website nicht dem Kunden überlasse. Spaltenbreite, Zeilenabstand und Umbruchregeln stehen dort schon im Aufbau; niemand muss sie später einzeln abarbeiten.
Häufige Fragen
Gilt die Regel mit 45 bis 75 Zeichen auch auf dem Handy?
Nein, dort landest du je nach Schriftgröße bei ungefähr 35 bis 45 Zeichen, und das ist in Ordnung: Auf einer schmalen Spalte ist der Weg zurück zum nächsten Zeilenanfang kurz, das Auge verläuft sich nicht. Falsch wäre, die Schrift zu verkleinern, um 66 Zeichen zu erzwingen.
Warum sieht mein Blocksatz in Word anders aus als im Browser?
Meistens sieht es gleich schlecht aus, und zwar aus demselben Grund: Ohne Silbentrennung bleibt beiden nur, die Abstände zwischen den Wörtern zu dehnen. Word hat die automatische Trennung standardmäßig ausgeschaltet, und der Browser trennt gar nicht, solange du hyphens: auto nicht setzt. Wer in Word einen sauberen Blocksatz sieht, hat die Trennung dort eingeschaltet.
Wie viele Trennungen dürfen untereinander stehen?
Die übliche Setzerregel sagt: höchstens drei. Das ist keine Rechtschreibregel aus dem Duden, sondern eine typografische Konvention, die den Trennstrich-Stapel am rechten Rand verhindert. In InDesign lässt sich die Grenze einstellen, im Browser bislang nicht zuverlässig.
Muss ich geschützte Leerzeichen auch in Website-Texten setzen?
Ja, sie wirken im Browser genauso wie im Druck und verhindern den Umbruch an der falschen Stelle. Achtung beim Einpflegen: Manche CMS-Editoren machen beim Speichern ein gewöhnliches Leerzeichen daraus. Dann hilft nur, das Zeichen im Quelltext-Modus zu setzen und nach dem Speichern nachzusehen, ob es überlebt hat.
Pappelbaum Design
Deine eigene Website
Professionelles Webdesign, persönlich gebaut und ohne Agenturumweg — vom Onepager bis zum Relaunch. Monatlich kündbar. Der erste Schritt kostet nichts.