Zeilenhöhe: Die Grundlinienraster-Methode

Es gibt einen bekannten Frontend-Moment: Zwei Cards stehen nebeneinander, aus derselben Komponente gebaut, und ein Textblock endet ein paar Pixel tiefer als sein Nachbar. Im Inspector ist alles korrekt. Du verschiebst einen Rand, das Paar richtet sich aus, und der Versatz taucht zwei Screens später in einer anderen Kombination wieder auf. Die Ursache ist meist kein verirrter Style, sondern Arithmetik: Zeilenhöhen, die als voneinander unabhängige Faktoren gewählt wurden — 1,4 hier, 1,5 dort, 1,3 bei Überschriften — ergeben Blockhöhen ohne gemeinsamen Teiler, sodass Blöcke sich nur zufällig ausrichten.

Die Grundlinienraster-Methode ersetzt das Raten pro Element durch eine einzige Regel: Leite eine Grundlinien-Einheit von der Hälfte deiner Basis-Schriftgröße ab — 8px bei einer 16px-Basis — und wähle jede Zeilenhöhe als ganzes oder halbes Vielfaches dieser Einheit. Fließtext wird zu 16px auf einer 24px-Zeile (3 Einheiten), eine 32px-Überschrift sitzt auf einer 40px-Zeile (5 Einheiten), eine Bildunterschrift bekommt eine 20px-Zeile (2,5 Einheiten). Die Höhe jedes Textblocks ist dann ein Vielfaches derselben Einheit, sodass sich vertikale Abstände addieren, statt Fehler anzuhäufen.

Dieser Artikel ist Teil unseres Leitfadens zur Schriftgrößenskala. Eine modulare Skala beantwortet, welche Größen existieren; die Grundlinien-Einheit beantwortet, auf welchen Zeilen sie sitzen.

Warum gehen Zeilenhöhen pro Element nicht auf?

Einheitenlose Faktoren sind gutes CSS — line-height: 1.5 vererbt sich sicherer als Prozentwerte oder feste Werte. Das Problem ist nicht die Syntax, sondern wie die Werte gewählt werden. Rechne eine Reihe einzeln vernünftiger Entscheidungen aus, und überall tauchen Beinahe-Treffer auf:

• 16px Fließtext × 1,5 → 24px
• 21px Lead × 1,5 → 31,5px
• 28px Überschrift × 1,3 → 36,4px
• 14px Bildunterschrift × 1,4 → 19,6px

Jeder Wert ist für sich vertretbar. Zusammen haben sie keinen gemeinsamen Teiler, sodass zwei aus ihnen gebaute Stacks um Bruchteile einer Zeile auseinanderdriften — genau der Ein-paar-Pixel-daneben-Effekt. Die Nachkommawerte machen es schlimmer: 31,5px wird bei verschiedenen Zoomstufen und Device-Pixel-Ratios unterschiedlich gerundet, sodass der Drift nicht einmal stabil ist.

Auf einer 8px-Grundlinie werden dieselben Entscheidungen zu 24px (3 Einheiten), 32px (4 Einheiten), 36px (4,5 Einheiten) und 20px (2,5 Einheiten). Du kannst die Ergebnisse im CSS weiterhin als einheitenlose Zahlen schreiben (24 ÷ 16 = 1,5); was sich ändert, ist, dass jeder Wert auf dem Raster gewählt statt pro Element geraten wurde.

Wie funktioniert die Grundlinienraster-Methode?

Zwei Entscheidungen ersetzen das ganze Raten. Erstens die Einheit: die Hälfte der Basis-Schriftgröße, sodass eine 16px-Basis eine 8px-Einheit ergibt. Die Hälfte der Basis statt der Basis selbst, weil ein Raster aus der ganzen Basis zu grob ist — rund um eine 38px-Überschrift bietet ein 16px-Raster nur eine 32px- oder eine 48px-Zeile, während ein 8px-Raster 40px und 48px bietet. Halbe Vielfache (4px-Schritte) bleiben dort verfügbar, wo kleiner Text feinere Kontrolle braucht. Zweitens die Regel: Jede Zeilenhöhe ist ein ganzes oder halbes Vielfaches der Einheit — nie ein freier Wert.

Scale Composer leitet das automatisch ab: Die Grundlinien-Einheit ist Basis ÷ 2, und jede Zeilenhöhe der Skala rastet auf ein Vielfaches davon ein. Ändere die Basis auf 18px, und die Einheit wird 9px; jede Zeilenhöhe rastet neu auf das neue Raster ein.

Sieh es dir an einer echten Skala an: öffne die Grundlinien-Ansicht im Scale Composer — eine Quart-Skala auf einer 16px-Basis, jede Größe gepaart mit einer Zeilenhöhe, die ein Vielfaches der 8px-Einheit ist. Zieh am Verhältnis und beobachte, wie die Zeilenhöhen neu aufs Raster einrasten, statt in Nachkommawerte zu driften.

Sollte größerer Text engere Zeilenhöhe haben?

Ja — und kleinerer Text lockerer. Ein einziger Faktor für die ganze Seite plättet eine Kurve, die das Lesen tatsächlich braucht. Hier die volle Spanne auf einer 16px-Basis, reine Quart, mit Zeilenhöhen, die als Grundlinien-Vielfache gewählt wurden:

Der effektive Faktor fällt mit wachsender Größe von 1,67 auf 1,18. Das Warum ist perzeptiv. Fließtext wird Zeile für Zeile gelesen: Das Auge wandert ans Ende einer Zeile und muss den Anfang der nächsten finden, und dieser Rückweg braucht Luft — mehr Luft, je länger die Zeilen laufen. Eine Überschrift ist anders: Sie ist eine oder zwei Zeilen, die als eine einzige Form gelesen werden, und bei Fließtext-Abständen fällt sie auseinander — eine 51px-h1 bei 1,5 säße auf 76px-Zeilen, und der Abstand dazwischen liest sich wie ein Loch. Kleiner Text kehrt die Logik wieder um: Bei 12px sind die Buchstabenformen schon gedrängt, sodass enger Zeilenabstand dichte Bildunterschriften verklumpen lässt; sie brauchen proportional mehr Luft, nicht weniger.

Das Raster drückt diese Kurve auf natürliche Weise aus, weil du Einheiten pro Größe wählst statt eines Faktors für alles.

Was ist die Barrierefreiheits-Untergrenze für Zeilenhöhe?

WCAGs Kriterium zum Textabstand (1.4.12) verlangt, dass eine Seite keinen Inhalt und keine Funktionalität verliert, wenn ein Leser die Zeilenhöhe auf das 1,5-Fache der Schriftgröße überschreibt — neben anderen Abstands-Überschreibungen. Daraus folgen zwei Konsequenzen für das Raster. Erstens: Fließtext bei 3 Einheiten — 24px auf 16px, effektiv 1,5 — liegt bereits auf dem Niveau, das das Kriterium prüft, und ist für sich genommen eine vernünftige Untergrenze für angenehmes Fließtext-Lesen. Zweitens: Beim Kriterium geht es darum, Nutzer-Überschreibungen zu überstehen, nicht um die vorgegebenen Werte: Überschriften enger als 1,5 sind in Ordnung, aber Textcontainer mit fester Höhe, die bei wachsendem Abstand abschneiden, sind es nicht. Ein Grundlinienraster diszipliniert deine Werte; es befreit das Layout nicht davon, mit erhöhtem Abstand getestet zu werden.

Bring deine Zeilenhöhen aufs Raster

Starte bei deiner Fließtext-Größe, halbiere sie und lies den Rest vom Raster ab, statt ihn zu raten. Um zu spüren, wie das System der Basis folgt, öffne eine auf Lesbarkeit abgestimmte Variante im Scale Composer — eine 18px-Basis, sodass die Einheit 9px wird und Fließtext auf einer 27px-Zeile landet, 3 Einheiten eines etwas größeren Rhythmus. Setze die Basis dann zurück auf die deines eigenen Produkts und nimm die Zeilenhöhen, die das Raster bietet: Die Debatten pro Element verschwinden — und mit ihnen das Pixel, das immer daneben war.