Type Scale Generator
Genera scale tipografiche modulari con variabili CSS e config Tailwind.
① Imposta dimensione base e ratio ② Clicca Genera Scala ③ Copia le variabili CSS o i token
Cos'è una scala tipografica modulare?
Una scala tipografica modulare è una sequenza di dimensioni di testo in cui ogni passo è il precedente moltiplicato per un ratio fisso. I ratio comuni includono la Quarta Perfetta (1.333), la Terza Maggiore (1.250) e il Rapporto Aureo (1.618). Usare una scala garantisce armonia visiva tra titoli, corpo del testo e didascalie.
Domande frequenti
Una scala tipografica modulare è un insieme di dimensioni di testo derivate moltiplicando una dimensione base per un ratio costante. Invece di scegliere dimensioni arbitrariamente, si ottengono valori matematicamente correlati che creano armonia visiva. Usata nei principali design system come Material Design.
Ogni passo n rispetto alla base usa la formula: dimensione = base × ratio^n. Per n=0 si ottiene la dimensione base. Per n=1, base × ratio. Per passi negativi: base × ratio^(-1), ecc. Questo produce una progressione geometrica regolare.
Minor Second (1.067) e Major Second (1.125) producono scale sottili per interfacce ricche di testo. Minor Third (1.200) e Major Third (1.250) danno contrasto moderato. Perfect Fourth (1.333) è una scelta classica. Perfect Fifth (1.500) e Golden Ratio (1.618) creano differenze drammatiche per tipografia display.
Copia il CSS Variables e incollalo dentro il blocco :root { }. Poi usa le variabili ovunque: font-size: var(--text-xl). Le variabili sono pronte senza configurazione aggiuntiva.
Copia il Config Tailwind e incollalo nella chiave theme.fontSize del tuo tailwind.config.js. Potrai usare classi come text-xl, text-2xl con i tuoi valori personalizzati.
Usa rem per le dimensioni dei testi — rispetta le preferenze del browser dell'utente. Usa em quando vuoi che le dimensioni si scalino rispetto al componente padre. Usa px solo per elementi decorativi fissi come bordi.
Una scala ben scelta crea gerarchia visiva che guida i lettori. Ratio grandi (1.5+) fanno risaltare i titoli. WCAG 1.4.4 richiede che il testo possa essere ridimensionato al 200% — le scale rem lo garantiscono.