Vloeiende lettergrootte clamp()-generator
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 met een algemene vloeiende-lettergrootte-setup die al is ingevuld: 16px bij een 320px viewport tot 24px bij een 1280px viewport. Dat is een comfortabel bereik van broodtekst tot iets groter dat soepel meeschaalt van een typisch telefoonscherm naar een gangbaar desktopvenster, en het is precies de setup die de meeste mensen voor ogen hebben wanneer ze naar een vloeiende lettergrootte-clamp() zoeken.
De vier getallen kun je aanpassen: verhoog de maximale grootte voor een kop in plaats van broodtekst, of verklein de viewport-range als het ontwerp alleen tussen een tablet- en een desktop-breekpunt flexibel hoeft te zijn. Wat je ook invoert, de helling en het y-as-snijpunt worden opnieuw berekend op dezelfde manier en als expliciete rekenkundige stappen getoond, niet weggestopt in de uiteindelijke regel.
Onder de vier invoervelden stuurt een viewport-breedteschuifregelaar een live preview aan, zodat de schaling onmiddellijk zichtbaar is, en de kant-en-klare clamp()-regel is één klik verwijderd. Wisselen tussen rem en px als uitvoereenheid herberekent elk getal zonder de minimale en maximale grootte zelf te veranderen.