← WISSENS-BLOG
Warum ich bei moderner CSS-Typografie kaum noch line-height benutze
Moderne CSS-Techniken verändern nicht nur die Gestaltung von Schriftgrößen, sondern zunehmend auch den gesamten typografischen Workflow. In diesem Erfahrungsbericht beschreibe ich, warum ich bei aktuellen Projekten immer häufiger auf feste line-height-Werte verzichte und stattdessen konsequent mit clamp() arbeite. Dabei geht es nicht nur um flexible Schriftgrößen, sondern auch um dynamische Abstände zwischen Überschriften, Texten und Bildern.
Bildnachweis: iStockphoto / Mirsad Sarajlic
Als CSS-Coder beobachtet man natürlich ständig, wie sich CSS weiterentwickelt. Manche Techniken tauchen irgendwann auf, werden zunächst eher vorsichtig eingesetzt und entwickeln sich dann langsam zum Webstandard. Und irgendwann kommt der Punkt, an dem man den eigenen Workflow anpassen muss. Das macht man eher ungern, behaupte mal mit Blick auf das Gewohnheitstier Mensch. ;) Schließlich hat man sich über Jahre bestimmte Arbeitsweisen angewöhnt. Aber genau das gehört zur Arbeit mit CSS dazu:
Ich prüfe immer mal wieder während der Arbeit, ob alte Routinen noch sinnvoll sind. Und wenn mir etwas sinnvoll und effizient erscheint, setze ich es gleich um, auch wenn die Arbeit dadurch zuerst etwas länger dauert. Eine dieser Techniken ist für mich clamp().
Schriftgrößen mit clamp()
Vor einiger Zeit habe ich, wie viele andere auch, clamp() für dynamische Schriftgrößen entdeckt. Die Technik ist mittlerweile etabliert und gehört längst zum Werkzeugkasten moderner CSS-Entwicklung. Ob sie allerdings bereits konsequent eingesetzt wird, steht auf einem anderen Blatt.
Ein Beispiel:
.inhalt h2 {
font-family: var(--semibold);
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
Die Schriftgröße hat damit einen unteren Wert, einen flexiblen Zwischenwert und einen oberen Wert. Auf dem Smartphone bleibt die Überschrift kompakt. Auf größeren Displays wächst sie mit, ohne irgendwann zu groß zu werden. Das allein ist schon sehr hilfreich.
Warum ich immer seltener line-height setze
Interessant wurde es für mich aber erst später. Ich habe gemerkt: Wenn ich Schriftgrößen konsequent mit clamp() aufbaue, brauche ich in vielen Fällen gar keine eigene line-height mehr. Früher hätte ich vielleicht geschrieben:
.inhalt h2 {
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
line-height: 1.25;
}
Heute lasse ich die Zeilenhöhe bei vielen Elementen bewusst weg (allein die Betrachtung des obigen Codes gibt mir das Gefühl, dass sich altes und neues Coding hier beißen).
.inhalt h2 {
font-family: var(--semibold);
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
Nach meinen Tests passen moderne Browser die Zeilenhöhe sehr gut an die jeweilige Schriftgröße an. Gerade wenn die Schriftgröße dynamisch wächst oder schrumpft, wirkt das oft harmonischer, als wenn ich zusätzlich feste Werte erzwinge. Für mich ist das bei komplexeren Layouts eine echte Arbeitserleichterung.
Auch Abstände lassen sich dynamisch gestalten
Der nächste Schritt ist dann naheliegend: Wenn clamp() bei Schriftgrößen funktioniert, warum nicht auch bei Abständen? Zum Beispiel beim Abstand unter einer Überschrift:
.inhalt h2 {
margin: clamp(0.75rem, 1vw, 1rem) 0
clamp(0.45rem, 0.7vw, 0.75rem) 0;
font-family: var(--semibold);
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
Oder bei einer H3:
.inhalt h3 {
margin: clamp(1.5rem, 2.5vw, 1.8rem) 0
clamp(0.8rem, 1vw, 1.2rem) 0;
font-family: var(--regular);
font-size: clamp(1.3rem, 2vw, 1.8rem);
}
Auch Bildabstände lassen sich so flexibler steuern:
.inhalt img {
width: 100%;
height: auto;
margin: clamp(1.2rem, 2.5vw, 2.5rem) 0;
}
Dadurch entstehen auf Smartphones nicht zu große Abstände, während das Layout auf größeren Displays trotzdem luftig bleiben kann.
Das Austarieren bleibt wichtig
Natürlich ersetzt <clamp() keine saubere typografische Arbeit. Die Werte müssen austariert werden. Man muss auf dem Smartphone testen, auf dem Tablet prüfen, am Desktop vergleichen und dann wieder nachjustieren. Das ist ein Geduldsspiel. Aber das CSS wird dadurch robuster, weil ich weniger Sonderregeln schreiben muss.
Weniger Media Queries, weniger Pflegeaufwand
Meine These ist inzwischen: Wer clamp() konsequent für Schriftgrößen, Überschriftenabstände, Absatzabstände und Bildabstände einsetzt, spart sich einen großen Teil typografischer Media Queries. Gerade bei komplexeren Websites mit vielen unterschiedlichen Inhaltstypen reduziert das den Wartungsaufwand doch erheblich. Statt an mehreren Breakpoints immer wieder Schriftgrößen, Abstände und Zeilenhöhen nachzubessern, definiert man flexible Wertebereiche. Innerhalb dieser Bereiche kann sich das Layout selbst anpassen.
Für mich ist das inzwischen einer der wichtigsten Vorteile moderner CSS-Typografie: weniger starre Vorgaben, weniger Sonderregeln und deutlich weniger Nacharbeit.
Wissens-Startseite /// Rubrik CSS