Zeilenabstand und Zeilenlänge für gut lesbaren Text

Der Zeilenabstand ist der Abstand von der Grundlinie einer Textzeile zur Grundlinie der nächsten, und die Zeilenlänge (von Typografen Satzbreite genannt) ist die Zahl der Zeichen auf einer Zeile. Für Fließtext ist ein Zeilenabstand vom etwa 1,4- bis 1,6-Fachen der Schriftgröße und eine Zeilenlänge von etwa 45 bis 75 Zeichen der Bereich, der sich in den meisten Schriften angenehm liest. Überschriften wollen weniger Zeilenabstand, oft 1,05 bis 1,25. Diese beiden Einstellungen tun mehr für die Lesbarkeit als fast jede Schriftwahl.

Dieser Ratgeber erklärt, warum diese Bereiche funktionieren, wie sich die beiden Einstellungen gegenseitig beeinflussen und wie du sie für Websites, Folien und Social-Posts festlegst. Er gehört zum größeren Ratgeber Typografie-Grundlagen, neben Laufweite.

Was Zeilenabstand und Zeilenlänge tatsächlich steuern

Lesen ist eine Folge von Sprüngen. Dein Auge erfasst ein paar Wörter, springt die Zeile entlang und macht dann einen langen Rücksprung nach links, um die nächste Zeile zu finden. Die Zeilenlänge bestimmt, wie lang diese Reise ist. Der Zeilenabstand bestimmt, wie leicht man am Ende des Rücksprungs auf der richtigen Zeile landet.

Zu eng, und die Zeilen drängen sich: Unterlängen berühren Oberlängen, und der Rücksprung landet auf der falschen Zeile. Zu weit, und der Absatz zerfällt in Streifen. Zu lange Zeilen verlieren das Auge auf dem Rückweg, zu kurze Zeilen machen das Lesen abgehackt.

So wählst du den Zeilenabstand für Fließtext

Fang bei 1,5 an und passe nach Augenmaß an. Drei Dinge schieben den Wert nach oben oder unten.

• x-Höhe. Schriften mit großer x-Höhe (Kleinbuchstaben, die im Verhältnis zu den Großbuchstaben groß sind) wirken dichter und brauchen mehr Zeilenabstand. Schriften mit kleiner x-Höhe können enger stehen.
• Zeilenlänge. Lange Zeilen brauchen mehr Zeilenabstand, damit der Rücksprung ein breiteres Ziel hat. Kurze Zeilen, etwa eine schmale Spalte oder ein Handybildschirm, kommen mit etwas weniger aus.
• Gewicht und Farbe. Fette Schrift und helle Schrift auf dunklem Grund wirken beide schwerer auf der Seite und profitieren von etwas mehr Raum zwischen den Zeilen.

Die Vorgaben zur Barrierefreiheit weisen in dieselbe Richtung. Das Erfolgskriterium zu Textabständen des W3C verlangt, dass Inhalte funktionieren, wenn Lesende den Zeilenabstand auf das 1,5-Fache der Schriftgröße erhöhen, jedes Layout, das auf 1,5 aufbaut, besteht diesen Teil des Tests also schon. Leg die Höhe eines Textfelds nie so knapp fest, dass mehr Zeilenabstand die Wörter abschneiden würde.

Zeilenabstand für Überschriften und große Schrift

Der Zeilenabstand ist ein Verhältnis, der Raum, den er schafft, wächst also mit der Schriftgröße. Bei 16 px fügt ein Zeilenabstand von 1,5 8 px Raum hinzu. Bei 72 px fügt dasselbe Verhältnis 36 px hinzu, weit mehr, als eine Überschrift braucht. Deshalb wirkt große Schrift mit Fließtext-Einstellungen locker und muss enger werden, je größer sie wird.

Eine praktische Skala: Fließtext bei 1,5, Zwischenüberschriften bei etwa 1,3, Überschriften bei 1,1 bis 1,2 und sehr große Display-Zeilen bei 1,0 bis 1,05. Prüf die engsten Einstellungen auf Kollisionen: Eine Unterlänge in Zeile eins (g, y, p) kann auf einen Akzent oder eine Oberlänge in Zeile zwei stoßen. Wenn das passiert, öffne den Zeilenabstand ein wenig, statt einzelne Zeilen zu verschieben.

Wie lang eine Textzeile sein sollte

Der bewährte Bereich aus der Buchtypografie liegt bei 45 bis 75 Zeichen pro Zeile, gezählt mit Buchstaben, Leerzeichen und Satzzeichen, wobei etwa 60 bis 70 sich für durchgehendes Lesen am natürlichsten anfühlen. Auf einer Website heißt das meist eine Textspalte von etwa 560 bis 720 px Breite bei einer Schriftgröße von 16 bis 18 px, aber das hängt von der Schrift ab, miss also in Zeichen statt in Pixeln.

Zum Prüfen zähl die Zeichen einer typischen Zeile. Regelmäßig über etwa 80 heißt, die Spalte ist zu breit, unter etwa 40 heißt, sie ist zu schmal, mit zerfransten Rändern und gestrandeten kurzen Wörtern.

Zu breit: 110 Zeichen

1100 × 180

Angenehm: 65 Zeichen

650 × 260

Zu schmal: 30 Zeichen

300 × 480

Zeilenabstand und Zeilenlänge in CSS festlegen

Zwei Gewohnheiten decken das meiste ab. Schreib den Zeilenabstand als Zahl ohne Einheit, damit jedes Element ihn aus seiner eigenen Schriftgröße berechnet, und begrenze die Zeilenlänge mit der Einheit ch, die auf der Breite der Ziffer Null in der aktuellen Schrift basiert. Die MDN-Seite zu line-height erklärt, warum Werte ohne Einheit sicherer vererbt werden als Pixel oder em.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Zeilenabstand und Zeilenlänge bei Posts und Folien

Social-Posts und Folien werden in Sekunden gelesen, oft auf dem Handy, deshalb verschieben sich die Regeln. Die Zeilen sind von Natur aus kurz, und es gibt wenige davon. Halte Überschriften eng, etwa 1,05 bis 1,2, und jede Begleitzeile auf ein oder zwei kurze Zeilen bei etwa 1,3. Braucht ein Post einen Absatz mit Fließtext-Zeilenabstand, braucht er vermutlich eher weniger Wörter.

Auf einem Post in 1080 mal 1350 liest sich eine Überschrift mit drei bis sechs Wörtern pro Zeile in Handygröße gut. Auf einer Folie in 1920 mal 1080 gilt dasselbe Prinzip quer durch einen Raum: kurze Zeilen, enge Überschriften, großzügige Ränder. Die Ratgeber zu Schriften für Social Media und Präsentationshintergründen behandeln die Größenseite des Problems.

Text auf einem unruhigen Hintergrund braucht von allem etwas mehr: mehr Zeilenabstand, eine größere Schrift und eine ruhigere Fläche dahinter. Text auf Farbverlauf zeigt die ganze Methode.

Eine kurze Checkliste für lesbare Abstände

1. 1

   Leg zuerst den Fließtext fest

   Wähle die Größe, einen Zeilenabstand um 1,5 und eine Satzbreite von 60 bis 70 Zeichen. Stimm alles andere von hier aus ab.

2. 2

   Werde enger, je größer die Schrift

   Verringere den Zeilenabstand stufenweise über Zwischenüberschriften bis zu Überschriften und prüf die engsten Zeilen auf Kollisionen.

3. 3

   Miss in Zeichen

   Zähl eine echte Zeile. Liegt sie außerhalb von 45 bis 75, ändere den Container, nicht die Schriftgröße.

4. 4

   Lass Lesende es überschreiben

   Vermeide Textfelder mit fester Höhe, damit größerer Text oder weitere Abstände deine Wörter nie abschneiden.