CSS clamp() mit echten Zahlen erklärt

Die CSS-Funktion clamp() nimmt drei Werte — clamp(MIN, PREFERRED, MAX) — und liefert den bevorzugten Wert zurück, eingerastet zwischen den beiden Grenzen; formal löst sie sich zu max(MIN, min(PREFERRED, MAX)) auf. In der Typografie ist der bevorzugte Wert meist eine Formel, die mit dem Viewport wächst — und genau das macht eine clamp-Schriftgröße zur gängigen Einzeiler-Form fluider Typografie: eine Größe, die mit der Bildschirmbreite gleitet, ihren gestalteten Bereich aber nie verlassen kann.

Die meisten Erklärungen hören bei der Anatomie auf. Diese hier rechnet ein echtes Beispiel komplett durch — Steigung, Achsenabschnitt, die fertige Deklaration — und verifiziert es bei drei Viewport-Breiten, denn genau in der Rechnerei hört clamp() auf, Magie zu sein. Dieser Artikel ist Teil unseres Leitfadens zur fluiden Typografie.

Wie entscheidet clamp(), welcher Wert gewinnt?

Stell dir die drei Argumente als Boden, beweglichen Wert und Decke vor — eine Anatomie, die web.devs Leitfaden zu min(), max() und clamp() schön veranschaulicht. Der Browser wertet zuerst den bevorzugten Wert aus:

• Bevorzugt unter dem Minimum → das Minimum gewinnt (der Boden hält).
• Bevorzugt zwischen den Grenzen → der bevorzugte Wert gewinnt (der bewegliche Teil hat das Sagen).
• Bevorzugt über dem Maximum → das Maximum gewinnt (die Decke hält).

Die CSS-Funktion clamp() wird jedes Mal neu ausgewertet, wenn sich ihre Eingaben ändern — ein bevorzugter Wert mit vw wird also bei jeder Größenänderung neu berechnet, und genau diese Eigenschaft nutzt fluide Typografie aus.

Was bedeuten die rem- und vw-Teile des bevorzugten Werts?

Ein fluider bevorzugter Wert wie 0.9511rem + 0.2174vw ist eine getarnte Geradengleichung: size = intercept + slope × viewport. Der vw-Term ist die Steigung — wie viele Pixel die Größe pro Einheit Viewport-Breite gewinnt — und der rem-Term ist der Achsenabschnitt, der Wert, den die Gerade bei einem hypothetischen Viewport der Breite null hätte. Zwei Zahlen, und zusammen legen sie das Gleiten vollständig fest.

Dass der Achsenabschnitt in rem steht, ist nicht bloß Kosmetik: rem folgt der Schriftgrößen-Einstellung des Nutzers und dem Browser-Zoom, sodass sich die ganze Gerade verschiebt, wenn der Leser zoomt. Ein bevorzugter Wert aus reinem vw ist zugleich unflexibel (ein einziger Term muss Position und Steilheit auf einmal kodieren) und ein Barrierefreiheits-Fehler, denn Text allein in Viewport-Einheiten ignoriert Zoom vollständig.

Wie berechnest du die Zahlen in clamp()?

Nimm einen der häufigsten Aufträge in der fluiden Typografie: Fließtext mit 16px bei einem 360px-Viewport, wachsend auf 18px bei 1280px. Drei Schritte.

Schritt 1 — Steigung. Zuwachs geteilt durch Viewport-Spanne:

slope = (18 − 16) / (1280 − 360) = 2 / 920 ≈ 0.002174

Multipliziere mit 100, um es in vw auszudrücken (1vw = 1 % der Viewport-Breite): ≈0.2174vw.

Schritt 2 — Achsenabschnitt. Verfolge die Gerade vom ersten bekannten Punkt zurück:

intercept = 16 − 0.002174 × 360 ≈ 15.22px ≈ 0.9511rem   (÷16)

Schritt 3 — zusammensetzen. Minimum und Maximum in rem (16px = 1rem, 18px = 1.125rem), der bevorzugte Wert aus den beiden berechneten Termen:

font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);

Jetzt verifiziere es, denn ein clamp, das du nicht prüfen kannst, ist ein clamp, dem du nicht trauen kannst:

Die Endpunkte landen auf den gestalteten Größen, und der Mittelpunkt fällt dorthin, wo die Gerade es vorgibt. Du kannst dieselben Zahlen live inspizieren: öffne dieses clamp in Scale Composer — die fluiden Parameter (16→18 über 360→1280) erzeugen genau diesen Ausdruck, und beim Ziehen der Vorschaubreite läuft die Tabelle oben in Echtzeit durch.

Funktioniert clamp() auch bei mehr als font-size?

Ja — clamp() akzeptiert jede Eigenschaft mit einem Längenwert. Padding, das mit dem Viewport atmet, ein Abstand, der auf kleinen Bildschirmen enger wird, eine Inhaltsspalte, die bis zu einer Obergrenze wächst: alles dasselbe Muster mit anderen Einheiten in denselben drei Slots. Fluide Abstands-Systeme bauen genau darauf auf, mit derselben Steigungs-Rechnung wie fluide Typografie.

Was sind die häufigen clamp()-Stolperfallen?

Drei Fehlermodi decken die häufigen clamp()-Überraschungen ab:

1. Ein Minimum größer als das Maximum. clamp() ordnet seine Argumente nicht um — per Definition max(MIN, min(PREFERRED, MAX)) —, sodass MIN einfach gewinnt und der Wert starr wird, wenn MIN das MAX übersteigt. Leicht zu treffen, wenn eine Rechnung eine negative Steigung ergibt.
2. Prozent in font-size. Ein % innerhalb eines font-size-clamp bezieht sich auf die Schriftgröße des Elternelements, nicht auf den Viewport oder das Root-Element — verschachtelte Elemente verstärken das. Nutze rem für den Achsenabschnitt und die Grenzen.
3. Den Zoom-Term vergessen. Der rem-Teil des bevorzugten Werts ist es, der Browser-Zoom und die Schriftgrößen-Vorlieben des Nutzers den gesamten Bereich verschieben lässt. Ein clamp, dessen bevorzugter Wert reines vw ist, hält seine Pixelgröße fest, während der Nutzer nach größerer Schrift verlangt.

Verschiebe das clamp auf das Root-Element

Ein clamp pro Größe funktioniert; ein clamp für das ganze System skaliert besser. Setze den Ausdruck auf html { font-size: … } und schreibe jede andere Größe in rem: Jeder rem-Wert reitet jetzt auf dem Gleiten des Root-Elements mit, sodass die gesamte Skala mit einer einzigen Steigung fluid ist — die Architektur, die Scale Composers fluider Modus für dich erzeugt. Öffne das Root-clamp-Setup, um den einzelnen Ausdruck auf dem Root-Element und die ganze Skala darunter gleiten zu sehen — ändere dann base-max von 18 auf 20 und beobachte, wie eine einzige Änderung jede Größe auf der Seite neu abstimmt.