Jahrelang bestand responsives Webdesign aus festen Stufen: Eine Überschrift war auf dem Smartphone 24px groß, ab einer bestimmten Bildschirmbreite sprang sie per Media Query auf 40px. Dazwischen passierte nichts – die Schrift blieb starr, bis die nächste Schwelle erreicht war. Mit der CSS-Funktion clamp() gehört dieses ruckartige Verhalten der Vergangenheit an. Schriftgrößen und Abstände skalieren jetzt stufenlos mit der Fensterbreite. Genau das nennt man Fluid Typography beziehungsweise Fluid Spacing.
Was clamp() eigentlich macht
Die Funktion clamp(MIN, IDEAL, MAX) nimmt drei Werte entgegen und gibt immer den mittleren zurück – allerdings begrenzt durch das Minimum und das Maximum. Der ideale Wert in der Mitte enthält in der Regel eine Viewport-Einheit wie vw, die proportional zur Fensterbreite wächst. Sobald dieser Wert unter das Minimum fällt, greift das Minimum; überschreitet er das Maximum, greift das Maximum. Dazwischen wird linear interpoliert.
Ein konkretes Beispiel für eine Überschrift sieht so aus:
- Minimum:
1.5rem– kleiner soll die Schrift auf schmalen Displays nie werden. - Idealwert:
1rem + 3vw– ein fixer Sockel plus ein viewport-abhängiger Anteil. - Maximum:
3rem– größer soll sie auf breiten Monitoren nicht werden.
Daraus wird clamp(1.5rem, 1rem + 3vw, 3rem). Genau solche Werte berechnest du mit dem Fluid Spacing Generator, ohne die Formel von Hand auflösen zu müssen.
Die Mathematik hinter dem mittleren Wert
Der eigentliche Trick steckt im Idealwert. Du legst zwei Punkte fest: eine Schriftgröße bei einer kleinen Viewport-Breite und eine bei einer großen. Aus diesen vier Zahlen – zwei Größen und zwei Breiten – berechnet sich eine Gerade. Die Steigung dieser Geraden bestimmt den vw-Anteil, der Achsenabschnitt den festen rem-Sockel.
Die Formel für die Steigung lautet vereinfacht: Differenz der Schriftgrößen geteilt durch Differenz der Viewport-Breiten. Multipliziert mit 100 ergibt sich der vw-Faktor. Der konstante Anteil sorgt dafür, dass die Gerade an den definierten Punkten exakt durch die gewünschten Werte verläuft. Wer das per Hand macht, verrechnet sich schnell – deshalb lohnt der Griff zum Fluid Spacing Generator, der dir den fertigen clamp()-Ausdruck direkt zum Kopieren liefert.
Warum rem und nicht px im Minimum
Ein häufiger Fehler ist es, das Minimum in px anzugeben. Das Problem: Feste Pixelwerte ignorieren die im Browser eingestellte Standard-Schriftgröße. Nutzt jemand eine vergrößerte Grundschrift wegen einer Sehschwäche, bleibt deine Schrift trotzdem klein. Mit rem hingegen referenzierst du die Wurzel-Schriftgröße und respektierst damit die Einstellungen des Nutzers. Für barrierefreie Fluid Typography sollten Minimum und Maximum daher immer in rem stehen.
Reine vw-Werte sind ein Barrierefreiheits-Problem
Es ist verlockend, einfach font-size: 4vw zu schreiben und fertig. Doch reine Viewport-Einheiten lassen sich vom Nutzer nicht mehr zoomen – die Schrift ist an die physische Fensterbreite gekettet. Das verstößt gegen die WCAG-Anforderung, dass Text auf 200 Prozent vergrößerbar sein muss. Der Sockel aus rem innerhalb des Idealwerts löst genau dieses Problem: Er sorgt dafür, dass Zoom weiterhin wirkt. Deshalb kombiniert ein guter Generator den vw-Anteil immer mit einem rem-Anteil.
Fluid Spacing für Abstände
Die gleiche Technik funktioniert nicht nur für Schriftgrößen, sondern auch für Innen- und Außenabstände. Statt padding: 4rem fest zu setzen, lässt du den Abstand zwischen Sektionen mitwachsen: Auf dem Smartphone reichen vielleicht 2rem, auf einem großen Monitor dürfen es 6rem sein. Mit einem einzigen clamp()-Wert sparst du dir mehrere Media Queries und erhältst trotzdem ein harmonisch atmendes Layout. Das macht den Code kürzer und die Pflege einfacher.
Browser-Unterstützung und Fallback
Die Funktion clamp() wird von allen aktuellen Browsern unterstützt – Chrome, Firefox, Safari und Edge seit mehreren Jahren. Für sehr alte Browser kannst du davor eine statische Deklaration setzen, die als Fallback dient. Moderne Browser überschreiben sie dann mit dem clamp()-Wert. In der Praxis ist das heute aber selten nötig.
So gehst du am besten vor
Definiere zunächst deine Typo-Skala in zwei Eckpunkten: Wie groß soll die Schrift bei einer Fensterbreite von etwa 320 Pixeln sein, wie groß bei etwa 1280 oder 1440 Pixeln? Trage diese Werte in den Fluid Spacing Generator ein, kopiere den Ausdruck und teste ihn live im Browser, indem du das Fenster langsam in der Breite ziehst. Wiederhole das für jede Stufe deiner Skala – von der Fließtextgröße bis zur größten Überschrift.
Wer tiefer in das Zusammenspiel von Pixeln und relativen Einheiten einsteigen möchte, findet im Viewport Rechner ein passendes Werkzeug, um Größen zwischen px und vw oder vh umzurechnen. Eine vollständige Übersicht aller Helfer gibt es unter kotsch.tech/webtools.
Häufige Fragen
Funktioniert clamp() auch für line-height?
Ja, aber Vorsicht: Die Zeilenhöhe sollte idealerweise als einheitenloser Faktor relativ zur Schriftgröße bleiben, damit sie automatisch mitskaliert. Eine feste fluide Zeilenhöhe kann bei sehr großen oder kleinen Schriften unschöne Abstände erzeugen.
Welche Viewport-Breiten soll ich als Eckpunkte wählen?
Bewährt haben sich rund 320 Pixel für das untere Ende (kleine Smartphones) und 1200 bis 1440 Pixel für das obere Ende (typische Desktop-Layouts). Außerhalb dieses Bereichs sorgen Minimum und Maximum für stabile Werte.
Brauche ich dann gar keine Media Queries mehr?
Für reine Skalierung von Schrift und Abständen meist nicht. Media Queries bleiben aber sinnvoll, wenn sich das Layout strukturell ändert – etwa wenn aus einer einspaltigen eine dreispaltige Anordnung wird.