CSS Clamp Calculator
Fluid Typography mit clamp() berechnen. Die Schriftgröße skaliert linear zwischen Min- und Max-Viewport.
clamp(1rem, 0.8696vw + 0.8043rem, 1.5rem)
Live-Preview
So funktioniert das Tool
Die CSS-Funktion clamp(min, fluid, max) ist der Goldstandard für responsive Typografie ohne Media Queries - eine Schriftgröße, die zwischen zwei Viewport-Breiten linear interpoliert. Statt h1 { font-size: 1.5rem } @media (min-width: 768px) { h1 { font-size: 2.5rem } } schreibst du einmal clamp(1.5rem, 1.0rem + 2.0vw, 2.5rem) und bekommst eine stufenlose Skalierung. Unser Calculator nimmt deine Min-Größe, Max-Größe und das Viewport-Range und rechnet die exakte clamp-Expression aus.
Typische Anwendungsfälle
Fluid H1 für Hero-Sections
Ein Hero-Heading, der von 32 px auf Mobile auf 64 px auf Desktop interpoliert - ohne Sprünge bei festen Breakpoints.
Body-Text-Größe ohne Media Queries
Statt zwei Body-Size-Definitionen für unter/über 768 px eine clamp-Expression, die fließend von 14 px auf 16 px wächst.
Padding/Margin fluid
clamp funktioniert nicht nur für font-size - auch padding, margin, gap profitieren von fluidem Verhalten ohne JS-Listener.
Logo- oder Icon-Skalierung
Ein SVG-Logo, das auf großen Screens prominent, auf kleinen aber dezent wirkt - clamp regelt die height ohne mediaqueries.
FAQ
Häufige Fragen
Wie wird der mittlere clamp-Wert berechnet?
Wir lösen das lineare Gleichungssystem: min-Größe bei min-Viewport, max-Größe bei max-Viewport. Daraus ergibt sich „a + b·vw”, wobei a die rem-Basis und b der vw-Koeffizient ist. Beispiel: 16 px bei 320 px Viewport, 24 px bei 1200 px → a = 13.09 px ≈ 0.82rem, b = (24-16)/(1200-320)·100 = 0.91vw. Komplette Expression: clamp(1rem, 0.82rem + 0.91vw, 1.5rem).
Funktioniert clamp in allen Browsern?
Ja, seit April 2020 in allen modernen Browsern (Chrome 79, Safari 13.1, Firefox 75, Edge 79). Im IE11 funktioniert es nicht - wer den noch unterstützt, braucht eine Fallback-Media-Query. Aktuelle Browserlist-Standards droppen IE eh.
Sollte ich rem oder px verwenden?
Für min und max in REM für Accessibility - rem skaliert mit der Browser-Default-Schriftgröße, was Nutzer mit Sehschwäche typischerweise hochsetzen. Der vw-Anteil ist immer Viewport-abhängig. Ergebnis: clamp(1rem, 0.5rem + 1vw, 1.5rem) statt clamp(16px, ...).
Was ist der Unterschied zwischen clamp und einfachem font-size: vw?
Reine vw-Größen skalieren UNBEGRENZT - auf einem 4K-Monitor wird dein Text plötzlich gigantisch, auf einer Smartwatch winzig. clamp begrenzt nach oben und unten, was UX-mäßig der Standard sein sollte.
Kann ich mehr als zwei Viewports definieren (z. B. drei Stufen)?
Nicht mit nativem clamp - das ist eine lineare Interpolation zwischen zwei Punkten. Für mehrstufige Skalierung gibt es Tricks mit calc und min/max, aber meist ist es einfacher, drei clamp-Definitionen in Media Queries zu staffeln.
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.