CSS-Clamp-Generator (fluide Typografie)
Typ-Scale, die mit dem Viewport wächst. Min- und Max-Schriftgröße wählen, Min- und Max-Bildschirmbreiten — fertige clamp()-Regel mit Live-Vorschau-Slider zum Kopieren.
Was ist fluide Typografie?
Fluide Typografie ist eine CSS-Technik, bei der Text mit der Viewport-Breite gleitend zwischen einem Minimum und einem Maximum skaliert – statt an Media-Query-Breakpoints zu springen. Moderne Browser unterstützen das nativ über clamp(MIN, FORMEL, MAX), das die Formel auswertet und das Ergebnis zwischen Boden und Decke begrenzt. Die Formel ist meist eine Mischung aus festem Offset und einem viewport-relativen Term (vw), sodass der Wert der Bildschirmbreite innerhalb des definierten Bereichs folgt.
So nutzen Sie diesen Generator
Wähle die minimale und maximale Schriftgröße für die kleinste und größte Bildschirmbreite. Lege dann den Viewport-Bereich fest – meist eine Telefon-Mindestbreite (320–375 px) und eine Desktop-Maximalbreite (1200–1440 px). Das Ausgabefeld zeigt die exakte clamp()-Deklaration zum Einfügen in dein CSS. Ziehe den Vorschauschieber, um zu sehen, was die Regel bei jeder Breite erzeugt – ohne den Browser zu skalieren. Für eine vollständige Typ-Skala (h1, h2, h3, Body, Small) gib kommagetrennte px-Werte in die Stapelbox ein und du erhältst auf einen Schlag eine Reihe von CSS Custom Properties.
Die Mathematik hinter clamp()
Mit (minVw, minFont) und (maxVw, maxFont) als zwei Punkten lautet die lineare Funktion durch beide font = slope · vw + intercept, wobei slope = (maxFont − minFont) / (maxVw − minVw) und intercept = minFont − slope · minVw ist. Die Steigung in vw-Einheiten zu übersetzen, multipliziert sie mit 100, und der Achsenabschnitt wird in rem umgerechnet, indem durch die Root-Schriftgröße geteilt wird (damit Accessibility-Zoom weiter funktioniert). Der mittlere Term von clamp() ist dann {intercept}rem + {slope*100}vw.
Häufig gestellte Fragen
Warum rem statt px in der Ausgabe?
rem-Werte, wenn der Nutzer seine Standard-Schriftgröße in den Browser-Einstellungen ändert, absolute px-Werte aber nicht. Die Verwendung von rem für Boden, Decke und Achsenabschnitt von clamp() wahrt die Barrierefreiheit und respektiert WCAG 1.4.4 „Resize Text“. Der vw-Term muss nicht umgerechnet werden – er ist bereits viewport-relativ.Welchen Viewport-Bereich soll ich verwenden?
Funktioniert clamp() überall?
clamp(), min() und max() werden seit Anfang 2020 in jedem großen Browser unterstützt (Chrome 79, Safari 13.4, Firefox 75). Für Browser vor 2020 nimmst du außerhalb der Regel eine reguläre font-size-Deklaration als Fallback, die überall im Modernen überschrieben wird.Kann ich clamp() auch für andere Eigenschaften als font-size nutzen?
clamp(2rem, 5vw, 6rem) Padding wirkt vom Smartphone bis zum Ultrawide passend – ohne eine einzige Media Query.Wie baue ich eine vollständige Typ-Skala?
:root.Was ist die Slope-Intercept-Warnung, die manche Tools zeigen?
vw-Koeffizient eine Schwelle wie 5 vw überschreitet, weil bei dieser Steigung schon ein kleiner Zoom oder ein breiter Bildschirm die Schrift unerwartet anschwellen lässt. Dieser Generator erzwingt kein Limit – wenn deine Ausgabe aber wie clamp(1rem, 0.5rem + 8vw, 5rem) aussieht, weite den Viewport-Bereich aus, damit die Steigung unter 4–5 vw fällt.