# Zeilenabstand und Zeilenlänge für gut lesbaren Text

[Canonical HTML page](https://gradiently.design/de/guide/line-height-and-line-length)

Der meiste Text, der sich anstrengend liest, hat die richtige Schrift und die falschen Abstände. Zwei Einstellungen beheben das meiste: wie hoch jede Zeile ist und wie lang sie läuft.

## The short version

- Der Zeilenabstand ist der vertikale Abstand von einer Textzeile zur nächsten, und die Zeilenlänge ist die Zahl der Zeichen, die auf eine Zeile passen.
- Fließtext liest sich meist am besten mit einem Zeilenabstand vom etwa 1,4- bis 1,6-Fachen der Schriftgröße und einer Zeilenlänge von etwa 45 bis 75 Zeichen.
- Überschriften brauchen einen engeren Zeilenabstand als Fließtext, oft 1,05 bis 1,25, weil große Schrift schon viel Raum zwischen den Zeilen hat.
- Je länger die Zeile, desto mehr Zeilenabstand braucht sie, damit das Auge den Anfang der nächsten Zeile findet, ohne abzurutschen.
- Setz in CSS den Zeilenabstand ohne Einheit, etwa `line-height: 1.5`, und begrenze die Zeilenlänge mit `max-width` in der Einheit `ch`.

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](https://gradiently.design/de/guide/typography-basics), neben [Laufweite](https://gradiently.design/de/guide/letter-spacing).

## 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.

| Einstellung | Zu wenig | Angenehm | Zu viel |
| --- | --- | --- | --- |
| Zeilenabstand Fließtext | Unter 1,2: Zeilen drängen sich und stoßen zusammen | 1,4 bis 1,6 | Über 2: Der Absatz zerfällt in Streifen |
| Zeilenabstand Überschriften | Unter 1: Buchstaben zweier Zeilen berühren sich | 1,05 bis 1,25 | Über 1,4: Ein zweizeiliger Titel wirkt wie zwei Titel |
| Zeilenlänge Fließtext | Unter etwa 40 Zeichen: abgehackt | 45 bis 75 Zeichen | Über etwa 90 Zeichen: Das Auge verliert die Stelle |

Startbereiche für lateinische Schrift. Die x-Höhe deiner Schrift und die gewählte Größe verschieben sie ein wenig in die eine oder andere Richtung.

## 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](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) 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.

### Vermeiden

- Ein Zeilenabstand für jede Größe im Design
- Fließtext bei 1,2, weil es im Mockup ordentlich aussieht
- Überschriften bei 1,5, sodass ein zweizeiliger Titel zerfällt
- Textfelder mit fester Höhe, die abschneiden, wenn Abstände wachsen

### Machen

- Engerer Zeilenabstand, je größer der Text wird
- Fließtext um 1,5, an die Schrift angepasst
- Überschriften zwischen 1,05 und 1,25
- Felder, die mit ihrem Text wachsen

## 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.

Ein Hochformat-Post mit einer zweizeiligen Überschrift mit engem Zeilenabstand auf einem warmen Farbverlauf

Eine zweizeilige Überschrift, eng gesetzt bei etwa 1,1, hält als ein Gedanke zusammen.

Ein Hochformat-Post mit einer Überschrift und einem Absatz Fließtext mit großzügigerem Zeilenabstand

Der Begleittext darunter bekommt mehr Raum, weil er Zeile für Zeile gelesen wird.

## 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

Derselbe Absatz in drei Satzbreiten. Die angenehme Spalte ist etwa zwei Drittel so breit wie die breite und viel leichter zu verfolgen.

> **Breite Bildschirme heißen nicht breiter Text** Füg auf einem großen Monitor Raum um die Spalte hinzu oder eine zweite Spalte für Bilder und Notizen. Fließtext, der auf die ganze Bildschirmbreite gestreckt wird, ist die häufigste Ursache für Seiten, die sich schwer lesen.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) erklärt, warum Werte ohne Einheit sicherer vererbt werden als Pixel oder em.

```css
: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;
}
```

Zeilenabstände ohne Einheit, die enger werden, je größer die Schrift ist, und eine Satzbreite in Zeichen. `ch` basiert auf einer Glyphe, prüf also einen echten Absatz und passe den Wert an, wenn deine Schrift breit läuft.

## 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](https://gradiently.design/de/guide/fonts-for-social-media) und [Präsentationshintergründen](https://gradiently.design/de/guide/presentation-backgrounds) behandeln die Größenseite des Problems.

Ein Social-Post im Hochformat, der drei Punkte in kurzen Zeilen auf einem weichen Farbverlauf-Hintergrund auflistet

Ein Listen-Post hält jeden Punkt auf einer kurzen Zeile, der Zeilenabstand muss also nur die Liste zusammenhalten.

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](https://gradiently.design/de/guide/text-on-gradient) zeigt die ganze Methode.

## Eine kurze Checkliste für lesbare Abstände

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. **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. **Miss in Zeichen** Zähl eine echte Zeile. Liegt sie außerhalb von 45 bis 75, ändere den Container, nicht die Schriftgröße.
4. **Lass Lesende es überschreiben** Vermeide Textfelder mit fester Höhe, damit größerer Text oder weitere Abstände deine Wörter nie abschneiden.

## FAQ

### Was ist ein guter Zeilenabstand für Fließtext?

Etwa das 1,4- bis 1,6-Fache der Schriftgröße für die meisten Schriften und Bildschirme. Fang bei 1,5 an und passe an die x-Höhe der Schrift und die Länge deiner Zeilen an.

### Was ist die ideale Zeilenlänge zum Lesen?

Etwa 45 bis 75 Zeichen pro Zeile, mit Leerzeichen, wobei sich rund 60 bis 70 für langes Lesen am natürlichsten anfühlen. In CSS ist eine `max-width` von etwa 60ch bis 70ch ein guter Anfang.

### Ist Zeilenabstand dasselbe wie Durchschuss?

Fast. Durchschuss stammt aus dem Bleisatz, wo Bleistreifen zwischen die Zeilen gelegt wurden, und meint streng genommen nur diesen zusätzlichen Raum. In digitalen Tools ist der Zeilenabstand die ganze Distanz von einer Grundlinie zur nächsten, und das meinen die meisten heute damit.

### Warum brauchen Überschriften einen kleineren Zeilenabstand als Fließtext?

Der Zeilenabstand ist ein Verhältnis zur Schriftgröße, bei großen Größen fügt dasselbe Verhältnis also viel mehr Raum hinzu. Überschriften sehen meist zwischen 1,05 und 1,25 am besten aus.