Fluide Typografie mit clamp(): Schriftgrößen, die ohne Breakpoints skalieren

Jahrelang bedeutete das Anpassen der Typografie einer Website an die Bildschirmgröße, Breakpoints zu häufen: eine Überschriftgröße für Mobil, eine weitere für Tablet, eine dritte für den großen Bildschirm. Die Funktion clamp() dreht die Logik um — Text wächst und schrumpft stufenlos zwischen einer unteren und einer oberen Grenze —, doch sie bringt eine Barrierefreiheits-Falle mit, die viele Umsetzungen zu spät entdecken.

#Das Problem fester Größen und der Breakpoints

Eine feste Pixelgröße ignoriert die verfügbare Breite: Eine für den Desktop abgestimmte Überschrift erdrückt das Layout auf dem Mobilgerät, während eine für Mobil gedachte Überschrift auf einem breiten Monitor zaghaft wirkt. Die historische Antwort — @media-Breakpoints — funktioniert, erzeugt aber abrupte Sprünge an jeder Schwelle und ein Stylesheet, das anschwillt, je vielfältiger die Bildschirmgrößen werden. Zwischen zwei Breakpoints bleibt die Größe eingefroren, während die Breite ihrerseits ständig variiert. Hinzu kommt ein selten bezifferter Wartungsaufwand: Jede neue Gerätefamilie — Foldables, Ultrawide, kleine Smartphones — verlangt einen weiteren Breakpoint, und die geringste Überarbeitung der Typo-Skala zwingt dazu, jede Media Query einzeln wieder zu öffnen.

Der Einsatz trifft sich mit dem von Typo-Skalen, die als Design-Tokens behandelt werden: ein einziger, wiederverwendbarer Wert, der eine Absicht beschreibt statt einer eingefrorenen Zahl.

#clamp(): untere Grenze, Idealwert, obere Grenze

Die Funktion nimmt drei Argumente: einen Mindestwert, einen „idealen“ Wert, meist mit einem Anteil der Viewport-Breite (vw) ausgedrückt, und einen Höchstwert. Der Browser wählt den Idealwert, solange er zwischen den beiden Grenzen bleibt, und fällt darüber hinaus auf die nächstgelegene Grenze zurück.

h1 {
  /* jamais moins de 1.75rem, jamais plus de 3rem,
     valeur idéale qui suit la largeur de vue entre les deux */
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

Der mittlere Term verdient Aufmerksamkeit. Ein vw allein würde der Breite ohne lesbaren Boden folgen; der feste rem-Anteil sichert eine Basis, die nie verschwindet. Die Kombination 1rem + 3vw liest sich daher als „eine Basis von einem rem, ergänzt um eine zur Bildschirmgröße proportionale Steigung“.

#Eine stimmige fluide Skala bauen

Statt jede Größe nach Gefühl einzustellen, ruht eine Skala auf einem konstanten Verhältnis zwischen den Stufen. Die folgende Tabelle zeigt eine zurückhaltende Skala, vom Fließtext bis zur größten Überschrift, mit Grenzen, die sich von Stufe zu Stufe überlappen, um Umkehrungen bei mittleren Breiten zu vermeiden.

Als CSS-Variablen ausgedrückt, wird die Skala zu einem Satz wiederverwendbarer Tokens, genau wie eine Farbpalette:

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --step-2: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  --step-3: clamp(1.75rem, 1rem + 3vw, 3rem);
}

body { font-size: var(--step-0); }
h2   { font-size: var(--step-2); }
h1   { font-size: var(--step-3); }

#Die Zoom-Falle: warum rem und vw mischen

Der am meisten missverstandene Punkt an clamp() betrifft das Verhalten beim Zoom. Viewport-Einheiten (vw) sind relativ zum Fenster, nicht zur Schrifteinstellung: In reinem vw bemessener Text wächst nicht, wenn die Nutzerin die Schriftgröße des Browsers erhöht. Indem man einen rem-Anteil in den Idealterm einschiebt, führt man eine Komponente wieder ein, die sehr wohl auf den Zoom reagiert. Die praktische Regel passt in einen Satz: Der mittlere Term muss stets einen rem-Anteil enthalten, niemals vw allein.

Eine Schriftgröße, die nicht mehr auf den Browser-Zoom reagiert, ist nicht fluide, sie ist kaputt.

#Jenseits des Textes: Abstände und Container-Einheiten

Dasselbe Prinzip erstreckt sich auf Ränder, Spaltenabstände und vertikale Rhythmen, die gewinnen, wenn sie mit dem Bildschirm atmen, statt in Stufen zu springen. Eine jüngere Entwicklung verfeinert den Ansatz weiter: containerrelative Einheiten (cqi, die Inline-Breite des Containers) erlauben es einer Komponente, ihren Text nach dem tatsächlich belegten Platz zu bemessen und nicht nach dem gesamten Fenster. Mit Container Queries kombiniert, halten sie ein und dieselbe Komponente lesbar, ob sie eine schmale Spalte oder die volle Breite einnimmt.

.carte { container-type: inline-size; }

.carte h3 {
  /* la taille suit la largeur de la carte, pas celle de la fenêtre */
  font-size: clamp(1.125rem, 0.9rem + 1.5cqi, 1.5rem);
}

#Die Fluidität vor der Auslieferung prüfen

Eine fluide Skala prüft man mit drei getrennten Handgriffen, die allzu oft zu einem verschmolzen werden. Der erste ist das Verändern der Fenstergröße: Es bestätigt die vw-Steigung und das Ausbleiben eines hässlichen Sprungs zwischen den Grenzen. Der zweite ist der Browser-Zoom (Strg und +), der die gesamte Seite gleichmäßig vergrößern muss. Der dritte, am meisten vernachlässigte, ist die auf 200 % gestellte Standard-Schriftgröße des Browsers: Sie entlarvt eine in reinem vw festsitzende Größe, die reglos bleibt, wo der übrige Text gewachsen ist.

Eine letzte Vorsichtsmaßnahme betrifft sehr große Bildschirme. Ohne obere Grenze wächst ein vw-Term unbegrenzt weiter und erzeugt jenseits von 2500 Pixeln Breite überdimensionierte Überschriften; der Höchstwert von clamp() ist daher kein Detail — er ist das Geländer, das das Ausufern begrenzt. Umgekehrt schützt die untere Grenze die Lesbarkeit auf kleinen Bildschirmen, wo eine zu kleine Überschrift ebenso problematisch wird wie eine zu große.

#Was man mitnehmen sollte

Fluide Typografie ersetzt Dutzende Media Queries durch eine Handvoll lesbarer clamp()-Funktionen — vorausgesetzt, man beachtet ihre Grammatik: zwei Grenzen, die die Lesbarkeit schützen, ein mittlerer Term, der eine rem-Basis und eine vw-Steigung mischt. Es ist dieser rem-Anteil, der den Zoom und mit ihm die Barrierefreiheit bewahrt. Die Größen in CSS-Variablen zu überführen, macht die Skala schließlich zu einem wartbaren Satz von Tokens, bereit, sich auf Abstände und Container-Einheiten auszudehnen.

Zum Weiterlesen: die Referenzdokumentation zur clamp()-Funktion auf MDN, mit ihren Grenzfällen und der Browser-Unterstützung.