Vloeiende typografische-schaalgenerator
Bereken een echte vloeiende CSS clamp()-waarde vanuit een minimale en maximale grootte over twee viewport-breedtes, met de helling en het snijpunt stap voor stap getoond en een live resize-preview.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de calculator direct in de typografische-schaalmodus met een 16px basis en een 1,25-verhouding (grote terts) al geselecteerd — een solide, veelgebruikt startpunt voor een typografische schaal. Uit die twee getallen worden zes groottes gegenereerd: small, base, h4, h3, h2 en h1, elk een eigen vloeiende clamp()-waarde in plaats van een enkele vaste grootte.
Elke stap houdt de basisgrootte verankerd op dezelfde waarde aan zowel de mobiele als de desktopkant, terwijl de kopregels agressiever opschalen op de brede desktopviewport dan op de smalle mobiele — hetzelfde idee als het kiezen van een gematigder verhouding voor kleine schermen en een krachtigere voor grote schermen, automatisch afgeleid uit de ene verhouding die je kiest.
De verhouding wijzigen naar 1,125, 1,2, 1,333 of 1,5 genereert de hele tabel direct opnieuw, en met de knop eronder kopieer je alle zes clamp()-waarden als een direct plakbaar blok CSS custom properties waar de rest van de stylesheet naar kan verwijzen.