Zeilenhöhe in fluiden Systemen

Wenn Schriftgrößen mit dem Viewport gleiten, haben Zeilenhöhen drei Möglichkeiten zu reagieren: einheitenlose Multiplikatoren, die mit der jeweils aktuellen Größe skalieren, rem-basierte Grundlinien-Vielfache, die auf demselben Root-Clamp mitreiten und das Verhältnis von Größe zu Zeilenabstand über den gesamten Gleitbereich festhalten, oder Clamps pro Wert, die den Zeilenabstand seiner eigenen Kurve folgen lassen. Die meisten fluiden Systeme brauchen die mittlere Antwort, ein paar Display-Stile verdienen die dritte, und zu wissen, welche welche ist, bewahrt fluide Schrift davor, sich vertikal aufzulösen. Das ist der zeilenabstand-spezifische Teil unseres Leitfadens zur fluiden Typografie; was die Zeilenhöhe bei jeder Größe sein soll, ist Sache der Schriftgrößenskala — in diesem Artikel geht es darum, was sie tun soll, während die Größen sich bewegen.

Was passiert mit dem Zeilenabstand, wenn du nichts tust?

Das hängt von der Einheit ab, und dieser Unterschied ist das ganze Thema. Eine in px angegebene Zeilenhöhe steht still, während ihr Text gleitet — eine Überschrift, die von 28px auf 31,5px innerhalb einer festen 36px-Zeile wächst, wird sichtbar enger, je breiter der Viewport wird, und ab einer bestimmten Breite wirkt der Zeilenabstand, der auf dem Handy großzügig aussah, auf dem Desktop gequetscht. Niemand hat diese Stauchung gewählt; sie ist das Standardergebnis daraus, eine fluide Größe mit einer eingefrorenen zu mischen — dieselbe Drift, die für fluide Abstände spricht, nur innerhalb des Textblocks selbst.

Die eigentliche Frage ist also nicht, ob der Zeilenabstand auf den Gleitbereich reagieren soll — das muss er —, sondern welcher Mechanismus ihn trägt.

Wann reichen einheitenlose Multiplikatoren?

line-height: 1.5 wird gegen die eigene Schriftgröße des Elements berechnet, gleitet also automatisch mit: 1,5 von 16px auf dem Handy, 1,5 von 18px auf einem breiten Bildschirm, 1,5 von jedem Wert dazwischen. Für Fließtext ist das einfach und richtig — die einheitenlose Form vererbt außerdem gefahrlos, weshalb sie seit Jahren die Standardempfehlung ist.

Der Preis zeigt sich über die Skala hinweg, nicht innerhalb einer einzelnen Größe. Großer Text will proportional engeren Zeilenabstand als Fließtext — die größenabhängige Kurve, die jedes Schriftsystem codiert —, deshalb ist ein einziger einheitenloser Wert für die ganze Seite an den Enden falsch, unabhängig vom fluiden Modus. Einheitenlose Werte pro Ebene (1,5 für Fließtext, 1,3 für Überschriften, 1,1 für Display) beheben das und gleiten trotzdem. Was einheitenlose Werte dir nicht geben können, ist ein gemeinsamer Rhythmus: der Zeilenabstand jedes Elements ist ein privates Verhältnis, und keine gemeinsame Einheit bindet die Höhen des Textblocks zusammen.

Wie verhalten sich rem-basierte Grundlinien-Vielfache im Gleiten?

Das ist der Ansatz von Scale Composer, und er hat eine Eigenschaft, die es wert ist, ausgesprochen zu werden. Zeilenhöhen im System sind Grundlinien-Vielfache, ausgedrückt in rem — Fließtext mit 16px sitzt auf einer 24px-Zeile, geschrieben als 1.5rem, die 36px-Zeile einer Überschrift ist 2.25rem. Im fluiden Modus trägt die Root-Schriftgröße das Gleiten, und jeder rem-Wert reitet darauf mit — Größen und Zeilenhöhen gleichermaßen. Zähler und Nenner skalieren um denselben Faktor, sodass das Verhältnis zwischen einer Größe und ihrem Zeilenabstand bei jeder Viewport-Breite festgehalten ist.

Konkret nachverfolgt — eine 1.75rem-Überschrift auf einer 2.25rem-Zeile, Basis gleitet 16→18 über Viewports 360→1280:

Das Verhältnis, das der Designer gesetzt hat, ist das Verhältnis, das jeder Leser bekommt, unabhängig vom Bildschirm — und weil alle Zeilenhöhen Vielfache derselben rem-basierten Grundlinie sind, gleitet die Rhythmuseinheit selbst mit: die 8px-Grundlinie ist 8px am schmalen Ende und 9px am breiten Ende, wobei jeder Textblock weiterhin ganze Einheiten davon zählt. Vertikaler Rhythmus überlebt den fluiden Modus, indem er skaliert, nicht indem er bricht.

Öffne ein fluides System mit sichtbarer Zeilenhöhen-Spalte — Größen und Zeilenabstände beide in rem, auf einem einzigen Root-Clamp mitreitend, während die Verhältnisse stillhalten und der Viewport-Simulator sich bewegt.

Wann verdient der Zeilenabstand seinen eigenen Clamp?

Wenn ein Stil seinen Charakter durch den Gleitbereich ändern soll, nicht nur seine Größe. Der klassische Fall ist Display-Text: eine Hero-Überschrift, die von 28px auf dem Handy auf 48px auf dem Desktop wächst, will ihren Zeilenabstand wohl enger ziehen, während sie wächst — große Schrift liest sich als Form, und Formen wollen weniger Luft. Ein Clamp pro Wert drückt das aus: die Größe gleitet 28→48px, während der Zeilenabstand 32→52px gleitet,

h1 {
  font-size: clamp(1.75rem, 1.2609rem + 2.1739vw, 3rem);     /* 28 → 48px */
  line-height: clamp(2rem, 1.5109rem + 2.1739vw, 3.25rem);   /* 32 → 52px */
}

und das Verhältnis fällt durch den Gleitbereich hindurch, ganz bewusst: 32/28 ≈ 1,14 am schmalen Ende, 52/48 ≈ 1,08 am breiten Ende (beide Ausdrücke an beiden Endpunkten verifiziert). Dieses fallende Verhältnis ist mit einheitenlosen Werten oder Grundlinien-Vielfachen nicht erreichbar — sie halten Verhältnisse fest; diese Kurve biegt eines.

Der Preis ist der übliche Preis pro Wert: zwei Clamps pro Stil, die konsistent gehalten werden müssen, und ein Zeilenabstand, der nicht mehr auf der gemeinsamen Grundlinie landet. Der ehrliche Rat: reserviere ihn für die ein, zwei Display-Stile, bei denen der Charakterwechsel der Punkt ist, und lass die Mechanik des festgehaltenen Verhältnisses alles andere tragen.

Welcher Mechanismus für welchen Text?

• Fließtext und UI-Text — Grundlinien-Vielfache in rem (festgehaltene Verhältnisse, gemeinsamer Rhythmus) oder einheitenlose Werte pro Ebene, wenn Rhythmus kein Ziel ist. Beides gleitet korrekt; der rem-Weg hält zusätzlich das Grundlinienraster am Leben.
• Überschriften — Grundlinien-Vielfache, mit den pro Ebene engeren Verhältnissen, die die Schriftgrößenskala ohnehin zuweist. Der Gleitbereich bewahrt jede Kurve, die du setzt.
• Display — der eine Kandidat für einen eigenen Zeilenabstand-Clamp, wenn ein Verhältnis, das sich durch den Gleitbereich biegt, wirklich gewünscht ist.

Prüfe deine eigenen Verhältnisse über den Gleitbereich

Der Fehlermodus, den dieser Artikel verhindern soll, ist lautlos: ein Zeilenabstand, der driftet, während alle auf die Schriftgrößen schauen. Öffne das fluide System und lies das Verhältnis bei drei Breiten ab — zieh den Viewport-Simulator auf das Minimum, den Mittelpunkt und das Maximum und prüfe, dass das Verhältnis von Größe zu Zeilenabstand auf jeder Ebene das ist, das du gewählt hast. Wenn sich ein Verhältnis bewegt und du die Bewegung nicht gestaltet hast, dann sitzt die Korrektur in der Einheit — nicht im Wert.