Früher brauchte man für responsive Schriftgrößen einen Stapel Media Queries: bei 600 Pixel diese Größe, bei 1024 jene, dazwischen Sprünge. Seit es die CSS-Funktion clamp() gibt, geht das eleganter. Eine einzige Zeile lässt Schrift und Abstände stufenlos mit der Bildschirmbreite mitwachsen – und bleibt dabei innerhalb sinnvoller Grenzen. Dieser Artikel erklärt, wie clamp() funktioniert und wie du es richtig einsetzt.
Was clamp() macht
Die Funktion clamp() nimmt drei Werte entgegen: clamp(MIN, BEVORZUGT, MAX). Der Browser wählt immer den bevorzugten Wert, solange dieser zwischen Minimum und Maximum liegt. Wird er kleiner als das Minimum, gilt das Minimum; wird er größer als das Maximum, gilt das Maximum. Der Wert wird also „eingeklemmt" – daher der Name.
Ein typisches Beispiel für eine Überschrift: font-size: clamp(1.5rem, 4vw, 3rem);. Auf einem schmalen Handy bleibt die Schrift bei 1,5 rem, auf einem großen Monitor wächst sie auf höchstens 3 rem, und dazwischen skaliert sie flüssig mit der Fensterbreite. Welche konkreten Werte zu deinem Layout passen, lässt sich am bequemsten mit dem CSS Clamp Generator ermitteln – du gibst Minimal- und Maximalgröße sowie den Viewport-Bereich an und bekommst die fertige clamp()-Zeile zum Kopieren.
Warum der mittlere Wert mit vw arbeitet
Das Herzstück fluider Typografie ist die Einheit vw (viewport width). Ein 1vw entspricht einem Prozent der Fensterbreite. Bindet man die Schriftgröße an vw, wächst sie automatisch mit dem Bildschirm. Allein eingesetzt hätte das aber zwei Probleme: Auf winzigen Bildschirmen würde die Schrift unleserlich klein, auf riesigen Monitoren absurd groß.
Genau hier glänzt clamp(): Der vw-Anteil steht in der Mitte und sorgt für das flüssige Skalieren, während die festen rem-Werte links und rechts unten und oben einen Deckel einziehen. Oft kombiniert man sogar einen festen rem-Sockel mit einem vw-Anteil, etwa clamp(1rem, 0.5rem + 2vw, 2rem) – so startet die Skalierung sanfter und wirkt natürlicher.
Vorteile gegenüber Media Queries
Der klassische Weg mit Breakpoints funktioniert, hat aber Schwächen:
- Sprünge statt Fluss: An jedem Breakpoint springt die Schrift schlagartig. Zwischen den Punkten passiert nichts. clamp() skaliert dagegen kontinuierlich.
- Weniger Code: Eine clamp()-Zeile ersetzt mehrere Media-Query-Blöcke und hält die Stylesheets schlank.
- Bessere Pflege: Du definierst Unter- und Obergrenze an einer Stelle, statt sie über mehrere Regeln verstreut anzupassen.
clamp() ersetzt Media Queries nicht vollständig – für grundlegend andere Layouts (etwa Spalten, die auf dem Handy untereinander rutschen) bleiben sie nötig. Aber für Schriftgrößen, Abstände und Zeilenhöhen ist clamp() meist die bessere Wahl.
Mehr als nur Schriftgrößen
clamp() funktioniert überall dort, wo CSS eine Länge erwartet. Damit lassen sich auch Innen- und Außenabstände, Spaltenbreiten oder Section-Höhen fluide gestalten. Ein Abschnitt mit padding: clamp(2rem, 6vw, 6rem) bekommt auf großen Bildschirmen mehr Luft, ohne auf dem Handy zu erdrücken. So entsteht ein durchgängig fluides Layout, das sich auf jeder Bildschirmgröße proportional anfühlt.
Worauf du achten solltest
Ein wichtiger Punkt ist die Barrierefreiheit. Wenn du Schriftgrößen ausschließlich in vw definierst, kann der Browser-Zoom in manchen Fällen ausgehebelt werden – Nutzer, die Text vergrößern, schauen in die Röhre. Die Lösung: Kombiniere den vw-Anteil immer mit einem rem-Sockel, wie oben gezeigt. So bleibt das Zoomen funktionsfähig, weil rem auf die Nutzer-Einstellung reagiert.
Außerdem solltest du die Grenzen bewusst wählen: Das Minimum darf für Fließtext nicht unter etwa 16 px (1 rem) fallen, und das Maximum sollte nicht so groß werden, dass auf breiten Monitoren nur noch wenige Wörter pro Zeile passen. Die Browser-Unterstützung ist heute kein Thema mehr: clamp() läuft in allen modernen Browsern zuverlässig.
Passende Werkzeuge im Workflow
Fluide Typografie wird besonders rund, wenn die Größen aufeinander abgestimmt sind. Eine harmonische Größenstaffel liefert ein Modular Scale Rechner, dessen Werte du anschließend in clamp() einsetzt. Weitere Helfer für CSS und Frontend findest du gebündelt in den kostenlosen Webtools.
Fazit
clamp() bringt fluide, responsive Gestaltung in eine einzige, lesbare Zeile CSS – ohne Breakpoint-Sprünge und mit weniger Code. Wer Minimum, vw-Anteil und Maximum sinnvoll setzt und an einen rem-Sockel denkt, bekommt Typografie, die auf jedem Gerät stimmig wirkt. Die passenden Werte erzeugst du am schnellsten mit dem CSS Clamp Generator und kopierst die fertige Regel direkt in dein Stylesheet.