Ausführbare CSS-Docs: Zeilenabstand

Q: Braucht line-height eine Einheit?

Meistens nicht. Ein Wert ohne Einheit wie 1.5 wird mit der eigenen Schriftgröße jedes Elements multipliziert und bleibt so in Kindern mit anderer Größe proportional. Ein Wert mit Einheit wird einmal berechnet und als feste Länge vererbt.

Was line-height macht

line-height legt die Höhe jeder Textzeile fest. Die Differenz zwischen dieser Höhe und der Höhe, die die Schrift selbst braucht, wird halbiert und über und unter den Buchstaben hinzugefügt. So steuerst du den Abstand zwischen den Zeilen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Alle drei Absätze verwenden eine 16px-Schrift. Die Zeilen sind 16px, 24px und 32px hoch.

Werte: ohne Einheit, Länge, Prozent, normal

Wert	Beispiel	Zeilenhöhe bei 16px-Text	Von Kindern geerbt als
Zahl	`1.5`	24px	Die Zahl (1.5), pro Element neu berechnet
Länge	`24px`, `1.5em`, `1.5rem`	24px	Die berechnete Länge (24px)
Prozent	`150%`	24px	Die berechnete Länge (24px)
`normal`	`normal`	Aus der Schrift, oft etwa 1,2	`normal`

Die erste und die zweite Zeile sehen an einem einzelnen Element gleich aus. Der Unterschied zeigt sich erst, wenn ein Kind eine andere Schriftgröße hat, und darum geht es im nächsten Abschnitt.

Warum ohne Einheit der richtige Standard ist

Ein line-height von 1.5em oder 150% wird am Elternelement in Pixel umgerechnet, und Kinder erben diese Pixel. Ein Kind mit größerer Schrift bekommt dann Zeilen, die niedriger sind als seine Buchstaben. Ein 1.5 ohne Einheit wird als Zahl vererbt und mit der eigenen Schriftgröße jedes Kindes multipliziert.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Beide Überschriften brechen auf zwei Zeilen um. Die erste erbt 21px hohe Zeilen für 32px große Buchstaben, also überlappen sich ihre Zeilen. Die zweite bekommt 32 × 1,5 = 48px hohe Zeilen. Setz line-height einmal als Zahl an body, und die meisten Seiten brauchen es nie wieder.

Probier selbst Werte aus

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier 1, 2, 30px, 200% und normal. Chrome meldet normal als das Wort selbst statt als Pixelwert, weil die Größe aus der Schrift kommt.

Gute Werte für lesbaren Text

Fließtext: 1,4 bis 1,6. Längere Zeilen brauchen mehr Zeilenabstand, damit das Auge den Anfang der nächsten Zeile findet.
Überschriften: 1,1 bis 1,3. Großer Text mit 1,5 wirkt wie einzelne Zeilen statt wie eine Überschrift.
Buttons und einzeilige Labels: 1 bis 1,25, die Höhe kommt vom Padding.

Für die Barrierefreiheit verlangt das WCAG-Erfolgskriterium 1.4.12, dass eine Seite weiter funktioniert, wenn ein Leser den Zeilenabstand auf das 1,5-Fache der Schriftgröße setzt. Vermeide also feste Höhen an Textboxen, die den Text abschneiden würden.

Eine Textzeile vertikal zentrieren

Enthält eine Box genau eine Zeile, setzt ein line-height gleich der Boxhöhe den Text in die vertikale Mitte, weil der zusätzliche Platz gleichmäßig oben und unten verteilt wird:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Das funktioniert nicht mehr, sobald der Text auf zwei Zeilen umbricht, weil dann jede Zeile 40px hoch ist. Alles, was umbrechen kann, zentrierst du stattdessen mit Flexbox, wie auf der Seite div zentrieren gezeigt.

Die font-Kurzschreibweise

Die Kurzschreibweise font setzt Größe und Zeilenabstand zusammen, getrennt durch einen Schrägstrich:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Die Kurzschreibweise setzt jede Schrift-Eigenschaft zurück, die sie nicht nennt (auch line-height auf normal, wenn du den Teil mit dem Schrägstrich weglässt). Schreib sie also vor alle einzelnen font-*-Regeln.

Häufige Fehler

em oder % an einem Container verwenden. Kinder erben eine feste Länge. Nimm eine Zahl ohne Einheit.
Feste height an einer Textbox. Bricht der Text um oder vergrößert der Leser die Abstände, läuft er über. Lass den Inhalt die Höhe bestimmen.
Zu enger Fließtext. line-height: 1 macht Absätze schwer lesbar. Fang bei 1,5 an.
Erwarten, dass line-height Abstand zwischen Absätzen schafft. Das ist margin an den Absätzen.
Sich auf normal verlassen. Es ändert sich von Schrift zu Schrift, also verschieben sich Layouts, wenn die Schrift wechselt.

Häufig gestellte Fragen

Was macht line-height in CSS?

Es legt die Höhe jeder Zeilenbox eines Textes fest. Der Platz, der über die Höhe der Schrift selbst hinausgeht, wird gleichmäßig über und unter den Buchstaben verteilt, also bedeutet ein größeres line-height mehr Abstand zwischen den Zeilen.

Braucht line-height eine Einheit?

Meistens nicht. Ein Wert ohne Einheit wie 1.5 wird mit der eigenen Schriftgröße jedes Elements multipliziert und bleibt so in Kindern mit anderer Größe proportional. Ein Wert mit Einheit wird einmal berechnet und als feste Länge vererbt.

Welcher Zeilenabstand ist gut für Fließtext?

Zwischen 1,4 und 1,6 für Absätze und etwa 1,1 bis 1,3 für große Überschriften. Die AAA-Empfehlung der WCAG verlangt in Absätzen mindestens 1,5.

Was ist line-height: normal?

Der Standard. Der Browser nimmt einen Wert aus den Metriken der Schrift, meist etwa 1,2, aber für jede Schrift anders, also ist er über Schriften hinweg nicht vorhersehbar.

Wie ändere ich den Zeilenabstand in HTML?

HTML hat kein Attribut für den Zeilenabstand. Nimm die CSS-Eigenschaft, zum Beispiel <p style="line-height: 2;"> für doppelten Zeilenabstand.

Verwandte Konzepte