Generatore Scala Tipografica
Genera scale tipografiche h1–h6 con rapporti matematici. Export CSS variables, Tailwind config e CSS-in-JS.
:root {
--text-h1: 4.209rem;
--text-h2: 3.158rem;
--text-h3: 2.369rem;
--text-h4: 1.777rem;
--text-h5: 1.333rem;
--text-h6: 1rem;
}Come utilizzare Generatore Scala Tipografica
Imposta base e root font-size
Indica la dimensione base in px (tipicamente il corpo testo, es. 16px) e il font-size della radice del documento (di solito 16px, usato per la conversione in rem).
Scegli il rapporto matematico
Seleziona il ratio tra i livelli h1-h6: da Minor Second (1.067, scala compatta) a Golden Ratio (1.618, scala molto marcata).
Verifica l'anteprima
Ogni livello h1-h6 viene mostrato con dimensione in px e rem e un testo di prova, cosi' puoi valutare visivamente il contrasto tra i livelli prima di esportare.
Esporta nel formato desiderato
Scegli tra CSS variables, configurazione Tailwind o oggetto JS/CSS-in-JS e copia il codice generato con un click.
Suggerimenti
- Parti sempre da una base di 16px: e' lo standard di leggibilita' minima consigliato dalle linee guida di accessibilita' per il testo del corpo.
- Se la scala generata sembra troppo estrema tra h1 e h6, prova un ratio piu' piccolo invece di modificare manualmente i singoli valori: mantiene la coerenza matematica.
- Le CSS variables generate possono essere sovrascritte per breakpoint diversi (es. via media query) per adattare la scala tipografica a mobile e desktop.
Domande frequenti
Come funziona la scala tipografica modulare?
Parte dalla dimensione base (es. il testo del corpo) e la moltiplica ripetutamente per un rapporto fisso (ratio) per generare i livelli superiori h5, h4, h3, h2, h1. Ogni livello e' il precedente moltiplicato per il ratio, ottenendo una progressione armonica invece di dimensioni scelte a caso.
Quale ratio dovrei scegliere?
Ratio piu' piccoli (Minor Second 1.067, Major Second 1.125) danno una gerarchia sobria adatta a interfacce dense o documentazione tecnica. Ratio piu' grandi (Perfect Fourth 1.333, Golden Ratio 1.618) creano contrasto forte tra i titoli, ideali per landing page ed editoriali.
Perche' il tool converte i px in rem?
Usare unita' rem invece di px per la tipografia rende la scala relativa al font-size della radice del documento, rispettando le impostazioni di accessibilita' del browser dell'utente (zoom, font di sistema) invece di dimensioni fisse assolute.
Che differenza c'e' tra i tre formati di export?
CSS Vars genera un blocco ":root" con custom properties pronte per essere incluse in un foglio di stile globale. Tailwind genera la sezione "fontSize" da incollare in "theme.extend" del file di configurazione. JS Object genera una costante esportabile da usare in componenti CSS-in-JS o design token TypeScript.
Posso usare questa scala anche per il testo del corpo o solo per i titoli?
La scala generata copre i livelli h1-h6, pensati per i titoli. Il testo del corpo resta tipicamente alla dimensione base che hai impostato (o a un livello leggermente inferiore), mentre i livelli generati vanno applicati a titoli e sottotitoli per creare una gerarchia visiva coerente.