Die css clamp-Funktion ist der sauberste Weg, um Schriftgrößen zu bauen, die sanft mit dem Bildschirm wachsen und schrumpfen. Früher schrieben wir einen Stapel @media-Abfragen für verschiedene Bildschirme und passten font-size in jeder davon von Hand an. Dieser Ansatz ließ Text zwischen den Breakpoints springen und erzeugte schwer zu pflegendes CSS. Ein einziger clamp()-Ausdruck hingegen richtet eine fluide Skala ein, die eine Überschrift auf einem kleinen Telefon lesbar und auf einem riesigen Monitor zurückhaltend hält.
Was macht clamp() eigentlich?
Die Syntax nimmt drei Werte: clamp(MIN, BEVORZUGT, MAX). Der Browser berechnet den mittleren bevorzugten Wert, aber das Ergebnis fällt nie unter MIN und übersteigt nie MAX. Mathematisch ist es identisch mit max(MIN, min(BEVORZUGT, MAX)), aber weitaus lesbarer.
h1 {
/* mindestens 1.75rem, höchstens 3.5rem, dazwischen fluid */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}Die Magie steckt im mittleren Ausdruck. Der Teil 1rem + 4vw kombiniert eine feste Basis (1rem) mit einer viewport-relativen Komponente (4vw, also 4 % der Bildschirmbreite). Wird der Bildschirm breiter, wächst 4vw und der Text fließt mit.
Warum nicht einfach vw verwenden?
font-size: 5vw allein zu schreiben ist verlockend, hat aber zwei ernste Probleme. Erstens schrumpft der Text auf sehr kleinen Bildschirmen unter die Lesbarkeit und gerät auf sehr großen Bildschirmen außer Kontrolle — es gibt keine Unter- oder Obergrenze. Zweitens, und wichtiger: eine rein auf vw basierende Größe reagiert überhaupt nicht, wenn der Nutzer den Text in seinem Browser vergrößert. Das ist ein Verstoß gegen die Barrierefreiheit.
Genau hier beweist das Mischen von rem mit vw seinen Wert. Behältst du eine rem-Komponente im Ausdruck, wächst dieser Teil mit, wenn der Nutzer die Browser-Schriftgröße erhöht, und der Text bleibt skalierbar.
Die richtige Steigung berechnen
Statt die Zahl „4vw" nach Augenmaß zu wählen, kannst du die beiden gewünschten Größen bei zwei Bildschirmbreiten definieren und die lineare Steigung dazwischen berechnen. Angenommen, du möchtest den Text auf einem 320px-Bildschirm bei 16px und auf einem 1280px-Bildschirm bei 24px.
- Steigung = (24 − 16) / (1280 − 320) = 8 / 960 ≈ 0.00833 → als Prozentsatz
0.833vw - Achsenabschnitt (Basis) = 16 − 0.00833 × 320 ≈ 13.33px →
0.833rem(bei angenommener Basis von 16px)
p {
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
}Möchtest du diese Rechnung nicht jedes Mal selbst machen, erzeugen Tools wie Utopia oder der Fluid Type Scale Calculator fertige clamp()-Ausdrücke aus deinen Min- und Max-Paaren für Bildschirm/Größe. Hast du die Logik erst verstanden, sparen diese Tools echte Zeit.
Eine Typografie-Skala aufbauen
Statt clamp() für einzelne Elemente zu schreiben, ist es weitaus wartbarer, eine konsistente Skala mit CSS Custom Properties zu definieren:
:root {
--step-0: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
--step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--step-2: clamp(1.56rem, 1.3rem + 1.3vw, 2.5rem);
--step-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.75rem);
}
body { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }Mit dieser Struktur verwaltest du alle Überschriften- und Fließtextgrößen von einer Stelle aus. Ändere eine einzige Variable und die ganze Seite aktualisiert sich konsistent.
Barrierefreiheit: den Zoom-Test bestehen
Der am häufigsten vernachlässigte Aspekt fluider Typografie ist das WCAG-Kriterium 1.4.4 Textgröße ändern: der Nutzer muss Text bis 200 % vergrößern können. Verwendest du reines vw, wächst der Text beim Browser-Zoom nicht genug, weil sich die Viewport-Breite nicht ändert, und du fällst durch diesen Test.
Praktische Regel: behalte stets eine rem-Komponente im bevorzugten (mittleren) Teil des clamp()-Ausdrucks und treibe das vw-Verhältnis nicht zu hoch. Rund um 2.5vw und darunter ist in der Regel sicher. Bist du fertig, zoome mit Strg/Cmd + auf 200 % und prüfe, dass der Text tatsächlich wächst.
- Zeilenlänge: begrenze Fließtext mit
max-width: 65ch; fluide Größe verhindert nicht, dass Zeilen zu lang werden. - Zeilenhöhe: verwende einen einheitenlosen Wert für
line-height(z. B.1.5), damit sie proportional bleibt, während der Text wächst.
Browser-Unterstützung und Fallback
Gute Nachricht: clamp() wird seit Jahren stabil in jedem modernen Browser (Chrome, Firefox, Safari, Edge) unterstützt, ohne Präfix oder Konfiguration. Musst du dennoch sehr alte Browser unterstützen, genügt ein einfacher Fallback:
h1 {
font-size: 2rem; /* Browser, die clamp nicht verstehen, nutzen dies */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}Versteht der Browser die zweite Zeile nicht, ignoriert er sie und fällt auf den festen Wert der ersten zurück; versteht er sie, gewinnt die zweite. Das erfordert nicht einmal einen zusätzlichen @supports-Block.
Häufige Fragen
Brauche ich calc() für die Rechnung in clamp()?
Nein. clamp() erlaubt intern bereits Operationen wie + und -; du musst 1rem + 4vw nicht in calc() einwickeln. calc() zu verwenden verursacht aber auch keinen Fehler.
Ist clamp() nur für font-size gedacht?
Keineswegs. Dieselbe Logik funktioniert für fluides padding, margin, gap, width und sogar border-radius. Abstände fluide zu machen hilft dem Design, auf jedem Bildschirm ausgewogen zu bleiben.
Sollte ich Container-Query-Einheiten (cqw) statt vw verwenden?
Soll eine Komponente relativ zur Breite ihres Containers skalieren, liefert cqw genauere Ergebnisse — das erfordert jedoch das Deklarieren von container-type am Container. Für seitenweite Typografie bleibt vw die einfachste und zuverlässigste Wahl.
Soll deine Typografie auf jedem Bildschirm ausgewogen wirken? Brauchst du Hilfe beim Aufbau einer fluiden Typo-Skala und eines barrierefreien Frontends, nimm Kontakt mit mir auf.