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
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.