Type scale generator met vloeiende clamp() CSS | We.Inc
Genereer een modulaire typografische schaal uit een basisgrootte en een ratio, met vloeiende clamp()-waarden voor elke stap, een live voorbeeld en CSS- of Tailwind-variabelen om te kopiëren.
Type scale generator
Een typografische schaal vermenigvuldigt een basislettergrootte steeds opnieuw met één ratio, zodat elke kopgrootte in verhouding staat tot de broodtekst. Kies een basis en ratio voor telefoons en een andere voor desktops; deze generator zet elke stap om in een clamp()-waarde in rem en vw die vloeiend meegroeit tussen de twee breedtes.
Gangbare ratio's en waar ze bij passen
Ratio
Waarde
Gevoel
Kleine secunde
Compacte apps, dashboards
Grote secunde
Compacte apps, dashboards
Kleine terts
Artikelen, marketingpagina's
Grote terts
Artikelen, marketingpagina's
Reine kwart
Artikelen, marketingpagina's
Overmatige kwart
Posters, uitgesproken landingspagina's
Reine kwint
Posters, uitgesproken landingspagina's
Gulden snede
Posters, uitgesproken landingspagina's
De meeste type scale-tools geven één vaste set groottes. Deze geeft er twee, een schaal voor kleine schermen en een voor grote schermen, en verbindt ze met clamp(), zodat u per stap één regel uitlevert in plaats van een stapel media queries.
Waarom twee ratio's
Een ratio die ruim oogt op een monitor van 1440 pixels laat koppen op een telefoon over vier regels lopen. Met een krappere ratio op kleine schermen, zoals 1.2, en een ruimere op grote schermen, zoals 1.25 of 1.333, blijven koppen krachtig op desktop en leesbaar op mobiel.
Stappen onder nul werken net zo, maar andersom: de basis wordt gedeeld door de ratio, wat groottes voor bijschriften en kleine lettertjes geeft die in verhouding blijven.
Hoe de clamp()-waarden worden berekend
Voor elke stap kent de tool de grootte bij de smalle breedte en bij de brede breedte. Hij trekt een rechte lijn tussen die twee punten: de helling wordt het vw-deel en de beginwaarde wordt het rem-deel van de voorkeurswaarde.
clamp(min, preferred, max) houdt de grootte vervolgens op het minimum onder de smalle breedte en op het maximum boven de brede breedte. rem in de voorkeurswaarde mengen is belangrijk: een grootte puur in vw negeert browserzoom, terwijl het rem-deel wel meegroeit wanneer iemand inzoomt.
MDN adviseert dat wanneer clamp() de tekstgrootte bepaalt, het maximum minstens twee keer het minimum moet zijn, zodat tekst 200 procent zoom kan halen, het resize-niveau van WCAG 1.4.4. Een bescheiden vloeiend bereik haalt dat niet vanzelf, dus test uw grootste stappen met browserzoom op 200 procent.
Stel de root-lettergrootte in (16, tenzij uw CSS de grootte van html wijzigt) en de smalle en brede viewportbreedtes.
Kies voor elk uiteinde een basisgrootte en een ratio. Gelijke waarden geven een vaste schaal; verschillende waarden geven een vloeiende.
Kies hoeveel stappen boven en onder de basis u nodig hebt. De meeste sites gebruiken er vier of vijf boven en één of twee onder.
Sleep de schuifregelaar voor de voorbeeldbreedte om elke stap bij elke schermgrootte te zien, en kopieer dan de CSS-variabelen of het Tailwind-themablok.
Begin broodtekst op 16 tot 18 pixels; kleiner maakt lang lezen op telefoons lastig.
Verklein de regelhoogte naarmate de grootte toeneemt: ongeveer 1.5 voor broodtekst en 1.1 tot 1.2 voor grote koppen oogt evenwichtig.
U hebt zelden meer dan zes stappen nodig. Als twee stappen er in het voorbeeld bijna hetzelfde uitzien, laat er dan één vallen.
Geef variabelen een naam per stap, niet per element (step-3 in plaats van h2), zodat een kaarttitel zonder verwarring een kopgrootte kan lenen.
Veelgestelde vragen
Wat is een goede ratio voor een typografische schaal?
Voor sites met veel tekst zijn 1.2 (kleine terts) of 1.25 (grote terts) veilige keuzes. 1.333 (reine kwart) past bij marketingpagina's met korte, krachtige koppen. Ratio's van 1.5 of hoger maken grote sprongen die werken voor posters, maar al snel enorme koppen opleveren.
Is de gulden snede goed voor typografie?
Met ongeveer 1.618 is die erg steil: vijf stappen boven 16px komen al boven 170px uit. Het kan werken voor een displayschaal van twee of drie stappen, maar de meeste interfaces lezen beter met een kleinere ratio.
Waarom rem plus vw in plaats van alleen vw?
Tekst die alleen in vw is ingesteld, reageert niet op de tekstzoom van de browser, wat mensen die tekst vergroten in de steek laat. Het rem-deel in de voorkeurswaarde houdt zoom werkend, terwijl vw de vloeiende groei tussen de breedtes verzorgt.
Kan ik de uitvoer gebruiken met Tailwind CSS?
Ja. Tailwind v4 maakt een text-*-utility van elke --text-*-variabele binnen een @theme-blok, dus als u de Tailwind-uitvoer plakt krijgt u classes zoals text-step-2 in uw markup.
De schaal gebruiken in uw CSS
Een uitgewerkt voorbeeld: basis 16px bij 375px, oplopend tot 18px bij 1280px, ratio 1.2 oplopend tot 1.25.
Stappen als custom properties
Elke stap is één clamp(). Pas ze toe op elementen of op utility-classes, en stel per stap de regelhoogte in.
Live resultaat
Dezelfde variabelen in een kleine pagina. Bewerk de code om andere waarden te proberen; het kader is smal, dus u ziet de kant van het kleine scherm.
Namen van ratio's en exacte waarden
De muzikale namen komen van de frequentieverhoudingen van intervallen; elke waarde hier is de exacte breuk, afgerond op drie decimalen.
Benoemde ratio's
Naam
Breuk
Waarde
Vijf stappen boven 16px
Kleine secunde
Grote secunde
Kleine terts
Grote terts
Reine kwart
Overmatige kwart
Reine kwint
Gulden snede
Bouw uw schaal
Stel een basisgrootte en ratio in voor een klein scherm en voor een breed scherm. Elke stap krijgt een clamp()-waarde die vloeiend meegroeit tussen de twee breedtes, plus een live voorbeeld en CSS die u kunt kopiëren.