Vorm · T-12
Vloeiende typeschaal
Kies een basisgrootte en een verhouding voor een klein en een groot scherm. Kleurstaal rekent de stappen uit als clamp(), toont ze op de breedte die je wilt en waarschuwt als zoomen niet meer werkt.
Je bestanden blijven op je toestel
Vragen
Goed om te weten
Wat doet clamp() hier precies?
Het geeft een kleinste grootte, een grootste grootte en daartussen een rechte lijn die meegroeit met de schermbreedte. Onder de kleine breedte blijft de tekst op zijn kleinste, boven de grote breedte op zijn grootste.
Waarom een rem-deel naast de vw?
Alleen vw groeit niet mee als iemand inzoomt, en dat moet volgens WCAG 1.4.4. Het rem-deel zorgt dat zoomen de tekst nog groter maakt. Groeit een stap meer dan 2,5 keer tussen beide schermen, dan haalt zoomen op 200 procent het niet overal en waarschuwt Kleurstaal.
Welke verhouding kies ik?
Voor een gsm werkt een kleinere verhouding, zoals 1,2, want grote titels nemen er snel het hele scherm in. Op een breed scherm mag het ruimer, zoals 1,25 of 1,333. Daarom kies je ze apart.
Zo werkt het
Vloeiende typeschaal in drie stappen
Twee schermen
Kies de breedte, de grootte van gewone tekst en de verhouding tussen de stappen, voor een gsm en voor een breed scherm.
Schuif de breedte
Het voorbeeld toont elke stap op de breedte van je keuze, zoals het op zo’n scherm zou staan.
Neem de code mee
CSS-variabelen, een Tailwind 4-thema of design tokens in JSON, klaar om te plakken.