CSS clamp calculator

Met deze CSS clamp calculator maak je van een minimum, een maximum en een viewportbereik de kant-en-klare clamp()-uitdrukking voor lettergroottes, witruimte en breedtes, zonder media queries.

Voorbeeld: CSS-eigenschap: font-size · Kleinste waarde (mobiel) 16 px · Grootste waarde (desktop) 24 px · Vanaf viewportbreedte 320 px · Tot viewportbreedte 1.280 px · Basislettergrootte (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Bron: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Bijgewerkt: 2 oktober 2026.

CSS-eigenschap

Kleinste waarde (mobiel)

Grootste waarde (desktop)

Vanaf viewportbreedte

Tot viewportbreedte

Basislettergrootte (rem)

16 px

Mijn toolboxJe invoer wordt alleen in deze browser opgeslagen.

Resultaat

CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Waarde bij gangbare viewportbreedtes: Viewportbreedte Waarde in px Waarde in rem
320 px 16 px 1 rem
375 px 16,46 px 1,029 rem
768 px 19,73 px 1,233 rem
1024 px 21,87 px 1,367 rem
1280 px 24 px 1,5 rem
1920 px 24 px 1,5 rem; Daartussen groeit de waarde lineair met 0,8333 vw per 1 vw viewportbreedte.

Viewportbreedte	Waarde in px	Waarde in rem
320 px	16 px	1 rem
375 px	16,46 px	1,029 rem
768 px	19,73 px	1,233 rem
1024 px	21,87 px	1,367 rem
1280 px	24 px	1,5 rem
1920 px	24 px	1,5 rem

Zo wordt het berekend

clamp(MIN, WAARDE, MAX) begrenst een waarde naar onder en naar boven. Voor tekst die tussen 320 px en 1280 px viewportbreedte van 16 naar 24 px groeit, wordt het: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Zo wordt er gerekend

Tussen de twee viewportbreedtes stijgt de waarde lineair. De helling is (max − min) / (viewport_max − viewport_min), het snijpunt min − helling · viewport_min. Het snijpunt staat in rem en de helling in vw, zodat een door de gebruiker vergrote browserletter blijft meetellen. De tabel toont de waarde op gangbare apparaten.

Goed om te weten

Lettergroottes alleen in vw, zonder rem-deel, laten zich in de browser nauwelijks zoomen; daarom bevat de uitdrukking een rem-deel.
clamp() werkt ook voor padding, margin, gap en width – overal waar een lengte staat.
Alle huidige browsers ondersteunen clamp() (sinds 2020).

Veelgestelde vragen

Hoe bereken ik clamp() voor lettergroottes?

Vul de minimale en maximale grootte in px in, plus de viewportbreedtes. De calculator maakt de voorkeurswaarde uit rem en vw en zet die tussen minimum en maximum.

Waarom zit er een rem-deel in de uitdrukking?

Een waarde alleen in vw negeert de lettergrootte van de browser. Met een rem-deel blijft de tekst meeschalen voor gebruikers met een grotere standaardletter.

Kan ik clamp() ook voor witruimte gebruiken?

Ja, voor elke CSS-eigenschap met een lengtewaarde, zoals padding, margin, gap of width.

Wat betekent 1.5rem aan het eind?

Het maximum: boven de bovenste viewportbreedte groeit de tekst niet verder. Bij een basis van 16 px is 1,5 rem precies 24 px.

Bronnen en wettelijke basis

Bijgewerkt op: 2 oktober 2026 · Redactioneel beleid