De css clamp-functie is de schoonste manier om lettergroottes te bouwen die soepel meegroeien en krimpen met het scherm. Vroeger schreven we een stapel @media-queries voor verschillende schermen en pasten we font-size in elk daarvan handmatig aan. Die aanpak liet tekst springen tussen breekpunten en leverde CSS op die lastig te onderhouden was. Eén enkele clamp()-expressie zet daarentegen een vloeiende schaal op die een kop leesbaar houdt op een kleine telefoon en ingetogen op een enorm scherm.
Wat doet clamp() precies?
De syntaxis neemt drie waarden: clamp(MIN, VOORKEUR, MAX). De browser berekent de middelste voorkeurswaarde, maar het resultaat zakt nooit onder MIN en gaat nooit boven MAX. Wiskundig is het identiek aan max(MIN, min(VOORKEUR, MAX)), maar veel leesbaarder.
h1 {
/* minstens 1.75rem, hoogstens 3.5rem, vloeiend ertussenin */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}De magie zit in de middelste expressie. Het deel 1rem + 4vw combineert een vaste basis (1rem) met een viewport-relatieve component (4vw, oftewel 4% van de schermbreedte). Naarmate het scherm breder wordt, groeit 4vw en stroomt de tekst mee.
Waarom niet gewoon vw gebruiken?
font-size: 5vw op zichzelf schrijven is verleidelijk, maar heeft twee serieuze problemen. Ten eerste wordt de tekst op zeer kleine schermen onleesbaar klein en op zeer grote schermen loopt hij uit de hand — er is geen onder- of bovengrens. Ten tweede, en belangrijker: een grootte die puur op vw is gebaseerd reageert helemaal niet wanneer de gebruiker de tekst in zijn browser vergroot. Dat is een toegankelijkheidsovertreding.
Precies hier bewijst het mengen van rem met vw zijn waarde. Als je een rem-component in de expressie houdt, groeit dat deel mee wanneer de gebruiker de browserlettergrootte verhoogt, en blijft de tekst schaalbaar.
De juiste helling berekenen
In plaats van het getal "4vw" op het oog te kiezen, kun je de twee gewenste groottes bij twee schermbreedtes definiëren en de lineaire helling ertussen berekenen. Stel dat je de tekst 16px wilt op een scherm van 320px en 24px op een scherm van 1280px.
- Helling = (24 − 16) / (1280 − 320) = 8 / 960 ≈ 0.00833 → als percentage
0.833vw - Snijpunt (basis) = 16 − 0.00833 × 320 ≈ 13.33px →
0.833rem(uitgaande van een basis van 16px)
p {
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
}Wil je deze rekensom niet telkens zelf maken, dan genereren tools als Utopia of de Fluid Type Scale Calculator kant-en-klare clamp()-expressies op basis van je min- en max-paren voor scherm/grootte. Zodra je de logica doorhebt, besparen deze tools echte tijd.
Een typografische schaal opbouwen
In plaats van clamp() voor afzonderlijke elementen te schrijven, is het veel beter onderhoudbaar om een consistente schaal te definiëren met CSS custom properties:
:root {
--step-0: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
--step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--step-2: clamp(1.56rem, 1.3rem + 1.3vw, 2.5rem);
--step-3: clamp(1.95rem, 1.5rem + 2.2vw, 3.75rem);
}
body { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }Met deze structuur beheer je alle kop- en bodygroottes vanaf één plek. Wijzig één variabele en de hele site werkt consistent bij.
Toegankelijkheid: de zoomtest doorstaan
Het meest verwaarloosde aspect van vloeiende typografie is het WCAG-criterium 1.4.4 Tekstgrootte aanpassen: de gebruiker moet tekst tot 200% kunnen vergroten. Gebruik je puur vw, dan groeit de tekst bij browserzoom niet genoeg omdat de viewportbreedte niet verandert, en zak je voor deze test.
Praktische regel: houd altijd een rem-component in het voorkeursdeel (het midden) van de clamp()-expressie en drijf de vw-verhouding niet te hoog op. Rond de 2.5vw en lager is doorgaans veilig. Zoom als je klaar bent met Ctrl/Cmd + naar 200% en controleer of de tekst echt groter wordt.
- regellengte: begrens bodytekst met
max-width: 65ch; vloeiende grootte voorkomt niet dat regels te lang worden. - regelhoogte: gebruik een eenheidloze waarde voor
line-height(bijv.1.5) zodat die proportioneel blijft naarmate de tekst groeit.
Browserondersteuning en fallback
Goed nieuws: clamp() wordt al jaren stabiel ondersteund in elke moderne browser (Chrome, Firefox, Safari, Edge), zonder prefix of configuratie. Moet je toch zeer oude browsers ondersteunen, dan volstaat een eenvoudige fallback:
h1 {
font-size: 2rem; /* browsers die clamp niet begrijpen gebruiken dit */
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}Begrijpt de browser de tweede regel niet, dan negeert hij die en valt terug op de vaste waarde uit de eerste; begrijpt hij die wel, dan wint de tweede. Dit vereist niet eens een extra @supports-blok.
Veelgestelde vragen
Heb ik calc() nodig voor de rekenkunde in clamp()?
Nee. clamp() staat intern al bewerkingen toe zoals + en -; je hoeft 1rem + 4vw niet in calc() te wikkelen. calc() gebruiken geeft overigens ook geen fout.
Is clamp() alleen voor font-size?
Absoluut niet. Dezelfde logica werkt voor vloeiende padding, margin, gap, width en zelfs border-radius. Spacing vloeiend maken helpt het ontwerp op elk scherm in balans te blijven.
Moet ik container query-eenheden (cqw) gebruiken in plaats van vw?
Moet een component schalen op basis van de breedte van zijn container, dan geeft cqw nauwkeurigere resultaten — maar dat vereist het declareren van container-type op de container. Voor paginabrede typografie blijft vw de eenvoudigste en betrouwbaarste keuze.
Wil je dat je typografie op elk scherm in balans oogt? Heb je hulp nodig bij het opzetten van een vloeiende typeschaal en een toegankelijke frontend, neem dan contact met me op.