CSS-clamp()-generator

Wat is CSS-clamp()-generator?

De CSS-clamp()-generator is een gratis rekenmachine voor vloeiende typografie voor front-end-ontwikkelaars en ontwerpers. Je geeft een minimale lettergrootte, een maximale lettergrootte, een minimale viewportbreedte en een maximale viewportbreedte op; hij retourneert een clamp(min, voorkeur, max)-declaratie waarin de voorkeurswaarde een rem-offset combineert met een vw-helling, zodat de tekst lineair met het scherm meegroeit en nooit buiten je grenzen treedt. Dit maakt gestapelde font-size-media-queries overbodig en houdt koppen en bodytekst responsief op elk apparaat. Kies een voorbeeldgrootte om te zien hoe de waarde rendert, wissel de uitvoereenheid tussen rem en px, en kopieer de regel rechtstreeks in je stylesheet.

CSS-clamp()-generator gebruiken

1. Voer de minimale lettergrootte in — de grootte die de tekst moet hebben op het kleinste scherm.
2. Voer de maximale lettergrootte in — de grootte die de tekst moet bereiken op het grootste scherm.
3. Stel de minimale en maximale viewportbreedte in waartussen de grootte moet schalen.
4. Open de instellingen om de uitvoereenheid te wisselen (rem houdt het toegankelijk; px is ook beschikbaar) als je dat wilt.
5. Kies een voorbeeldgrootte om voorbeeldtekst bij die viewport te renderen en lees de live clamp()-waarde af.
6. Kopieer de gegenereerde clamp()-expressie en plak hem in je CSS-font-size.

Voorbeelden

min font 16, max font 20, min vw 320, max vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

min font 32, max font 64, min vw 320, max vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

min font 12, max font 14, min vw 480, max vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Veelgestelde vragen

Hoe schaalt de clamp()-waarde zonder media queries?

clamp(min, voorkeur, max) neemt een ondergrens, een voorkeurswaarde (vloeiend) en een bovengrens. De voorkeurswaarde is een lijn van de vorm rem + vw, zo berekend dat het lettertype bij de minimale viewport gelijk is aan je minimum en bij de maximale viewport aan je maximum. Tussen die breedtes interpoleert de browser automatisch, en daarbuiten zet clamp() de grootte vast op de dichtstbijzijnde grens — allemaal in één declaratie.

Waarom is de uitvoer in rem in plaats van px?

rem gebruiken voor de vaste delen respecteert de lettergrootte-instelling in de browser van de gebruiker, wat beter is voor toegankelijkheid. De viewport-relatieve helling wordt uitgedrukt in vw. Je kunt de eenheid in de instellingen op px zetten als je project absolute eenheden nodig heeft, maar rem is de aanbevolen standaard.

Welk viewportbereik moet ik gebruiken?

Een gangbare keuze is je kleinste ondersteunde breedte (vaak 320px of 360px) voor het minimum en je breedste contentcontainer (zoals 1240px–1536px) voor het maximum. Het lettertype is alleen binnen dat bereik volledig vloeiend; eronder blijft de tekst op het minimum en erboven op het maximum.

Werkt dit voor elke CSS-lengte, niet alleen font-size?

Ja. De gegenereerde clamp()-waarde is gewoon een lengte, dus je kunt hem plakken in padding, margin, gap of elke eigenschap die een lengte accepteert. De labels noemen font-size omdat vloeiende typografie het meest voorkomende gebruik is, maar de wiskunde is identiek voor spatiëring.

Worden mijn gegevens ergens naartoe gestuurd?

Nee. De berekening draait volledig in je browser met JavaScript — je lettergroottes en viewportbreedtes worden nooit naar een server geüpload, dus de tool werkt privé en zelfs offline zodra de pagina is geladen.