Type Scale Generator
Genereer modulaire typografieschalen met CSS-variabelen en Tailwind-config.
① Stel basisgrootte en ratio in ② Klik op Schaal genereren ③ Kopieer CSS-variabelen of tokens
Wat is een modulaire typografieschaal?
Een modulaire typografieschaal is een reeks lettergroottes waarbij elke stap de vorige vermenigvuldigd met een vast ratio is. Veelvoorkomende ratio's zijn de Reine Kwart (1.333), de Grote Terts (1.250) en de Gulden Snede (1.618). Het gebruik van een schaal zorgt voor visuele harmonie tussen koppen, lopende tekst en bijschriften.
Veelgestelde vragen
Een modulaire typografieschaal is een set lettergroottes afgeleid door een basisgrootte te vermenigvuldigen met een constant ratio. In plaats van willekeurige groottes krijg je wiskundig gerelateerde waarden die visuele harmonie creëren.
Elke stap n ten opzichte van de basis gebruikt de formule: grootte = basis × ratio^n. Voor n=0 de basisgrootte, n=1 basis × ratio, negatieve stappen basis × ratio^(-1).
Minor Second en Major Second voor subtiele schalen. Minor en Major Third voor gematigd contrast. Perfect Fourth (1.333) is een klassieke keuze. Perfect Fifth en Golden Ratio voor dramatische displaytypografie.
Kopieer de CSS Variables-uitvoer en plak het in :root { }. Gebruik dan de variabelen: font-size: var(--text-xl). Direct klaar voor gebruik.
Kopieer de Tailwind Config-uitvoer en plak het in theme.fontSize in tailwind.config.js. Gebruik klassen zoals text-xl met je aangepaste waarden.
rem voor lettergroottes — respecteert browservoorkeuren van de gebruiker. em voor groottes relatief aan het bovenliggende component. px alleen voor vaste decoratieve elementen.
Duidelijke visuele hiërarchie leidt lezers door de inhoud. WCAG 1.4.4 vereist dat tekst tot 200% kan worden vergroot — rem-schalen garanderen dit.