CSS-clamp-generator (vloeiende typografie)
Type-schaal die meegroeit met het viewport. Kies min/max-fontgrootte en min/max-schermbreedte — krijg een copy-paste clamp()-regel met live preview-slider.
Wat is vloeiende typografie?
Vloeiende typografie is een CSS-techniek waarbij tekst soepel schaalt tussen een minimum en maximum naarmate de viewportbreedte verandert — in plaats van te springen op media-query-breakpoints. Moderne browsers ondersteunen dit native via clamp(MIN, FORMULE, MAX), dat de formule evalueert en het resultaat tussen de vloer en het plafond houdt. De formule is meestal een mix van een vaste offset en een viewport-relatieve term (vw), zodat de waarde de schermbreedte volgt binnen het bereik.
Hoe gebruik je deze generator
Kies de min- en max-fontgrootte voor de smalste en breedste schermbreedtes. Kies dan het viewportbereik — meestal een telefoon-minimum (320–375 px) en een desktop-maximum (1200–1440 px). Het uitvoervak toont de exacte clamp()-declaratie die je in je CSS plakt. Sleep de preview-slider om te zien wat de regel op elke breedte produceert zonder je browser te resizen. Voor een hele typeschaal (h1, h2, h3, body, small) plak je komma-gescheiden px-waarden in het batchvak en krijg je een set CSS custom properties tegelijk.
De wiskunde achter clamp()
Gegeven (minVw, minFont) en (maxVw, maxFont) als twee punten, is de lineaire functie door beide font = slope · vw + intercept waarbij slope = (maxFont − minFont) / (maxVw − minVw) en intercept = minFont − slope · minVw. De slope omzetten naar vw-eenheden vermenigvuldigt met 100, en de intercept wordt naar rem omgezet door te delen door je root-fontgrootte (zodat toegankelijkheidszoom blijft werken). De middenterm van de clamp() wordt dan {intercept}rem + {slope*100}vw.
Veelgestelde vragen
Waarom rem in plaats van px in de uitvoer?
rem-waarden mee als de gebruiker de standaardlettergrootte in de browser-instellingen wijzigt, maar absolute px-waarden niet. rem in de vloer, het plafond en de intercept van clamp() behoudt toegankelijkheidsvoorkeuren en respecteert WCAG 1.4.4 Resize Text. De vw-term hoeft niet omgezet te worden — die is al viewport-relatief.Welk viewportbereik moet ik gebruiken?
Werkt clamp() overal?
clamp(), min() en max() zijn sinds begin 2020 in elke grote browser ondersteund (Chrome 79, Safari 13.4, Firefox 75). Voor browsers van vóór 2020 val je terug op een gewone font-size-declaratie buiten de regel, die overal in moderne browsers wordt overschreven.Kan ik clamp() ook voor andere zaken dan font-size gebruiken?
clamp(2rem, 5vw, 6rem) padding voelt passend van telefoon tot ultrawide zonder één media query.Hoe bouw ik een hele type-schaal?
:root te zetten.Wat is de slope-intercept-waarschuwing die sommige tools tonen?
vw-coëfficiënt boven een drempel als 5 vw uitkomt, omdat tekst bij die helling op een licht gezoomd of breed scherm onverwacht kan springen. Deze generator legt geen limiet op — maar lijkt je uitvoer op clamp(1rem, 0.5rem + 8vw, 5rem), verbreed dan het viewportbereik zodat de helling onder 4–5 vw zakt.