Generatore di Scala Tipografica
Crea una scala tipografica modulare partendo da una dimensione base e un rapporto — anteprima dal vivo, tabella px/rem e variabili CSS pronte da copiare.
598 visualizzazioni
Perché una scala modulare
Invece di scegliere le dimensioni dei titoli a occhio, una scala modulare moltiplica una dimensione base per un rapporto fisso a ogni livello: una base di 16 px con un rapporto di 1,25 (terza maggiore) dà 20, 25, 31,3, 39,1, 48,8... Le dimensioni si relazionano come intervalli musicali, e l'intera gerarchia resta coerente — cambia la base o il rapporto e tutto si riaccorda insieme.
Rapporti comuni: 1,125 (seconda maggiore — interfacce dense), 1,25 (terza maggiore — la scelta sicura di default), 1,333 (quarta giusta — editoriale), 1,618 (sezione aurea — drammatica, richiede pochi livelli). Le variabili CSS generate si incollano direttamente nel foglio di stile; i valori rem presuppongono una radice di 16 px.
Domande Frequenti
Quale rapporto dovrei scegliere?
Il lavoro su prodotto/UI di solito si colloca tra 1,125 e 1,25 (i titoli non sono molto più grandi del corpo del testo); le pagine di marketing ed editoriali reggono bene 1,333-1,618. Se l'h1 sembra "urlare", abbassa il rapporto di un gradino invece di regolare una singola dimensione a mano.
Perché la scala scende sotto la base?
I livelli negativi (base ÷ rapporto) danno didascalie e testi minuti che appartengono allo stesso sistema — 12,8 px in una scala 16/1,25 invece di un arbitrario 13.
Dovrei usare px o rem?
rem nel CSS: gli utenti che aumentano la dimensione del font del browser ottengono una scala proporzionalmente più grande. La colonna px serve per i mockup negli strumenti di design.
Strumenti Simili
Segnala un Problema
Generatore di Scala Tipografica