In breve
- Una scala tipografica è un breve insieme di dimensioni del font ottenute moltiplicando più volte una base per lo stesso rapporto.
- Rapporti piccoli come 1,2 si adattano a interfacce dense, mentre rapporti grandi come 1,5 si adattano a poster, post social e landing page.
- Con una base di 16 px e un rapporto di 1,25, la scala va 16, 20, 25, 31, 39 e 49 px.
- La maggior parte dei design ha bisogno di sole cinque o sei dimensioni, e arrotondare i risultati ai pixel interi va bene.
- In CSS, una scala tipografica è più facile da mantenere come proprietà personalizzate, rese fluide con clamp().
In questa pagina
Una scala tipografica è un insieme di dimensioni del font costruito da una dimensione di base e un rapporto. Parti dalla dimensione del testo corrente, diciamo 16 px, e la moltiplichi per il rapporto per ottenere la dimensione successiva, poi moltiplichi di nuovo per la successiva. Con un rapporto di 1,25 ottieni 16, 20, 25, 31, 39 e 49 px. Poiché ogni passo cresce nella stessa proporzione, le dimensioni sembrano imparentate, e scegliere la misura di un titolo smette di essere un’ipotesi.
Perché una scala tipografica rende le dimensioni imparentate
L’occhio legge la dimensione come proporzione, non come pixel. Il salto da 16 a 20 sembra uguale al salto da 39 a 49, perché entrambi sono un quarto più grandi. Le dimensioni scelte a occhio tendono ad ammassarsi in certi punti e a lasciare vuoti in altri, così due titoli finiscono quasi della stessa misura e sembrano un errore. Una scala dà a ogni livello un passo chiaro e coerente, ed è la spina dorsale della gerarchia visiva.
I rapporti più comuni delle scale tipografiche a confronto
Molti rapporti diffusi prendono il nome da intervalli musicali, e una scala costruita così si chiama spesso scala modulare. Il nome conta meno dell’ampiezza del passo: più è grande il rapporto, più drammatica è la differenza tra i livelli e meno livelli stanno in una pagina.
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Rapporto
Sensazione
Adatto a
Valori di una scala tipografica in pixel
Ecco la stessa base di 16 px fatta passare per quattro rapporti. Nota quanto in fretta salgono i rapporti grandi: al passo 4, una scala 1,5 è già a 81 px, mentre una scala 1,2 è a 33 px.
1,2
1,25
1.333
1,5
1,2
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
Arrotondare va bene. Nessuno vede la differenza tra 31,25 e 31 px, e i numeri interi sono più facili da ricordare e da allineare su una griglia.
Come costruire la tua scala tipografica
- 1
Scegli la dimensione di base
È il tuo testo corrente. Da 16 a 18 px va bene per la maggior parte dei siti; su una tela social da 1080 px parti da 40 px.
- 2
Scegli un rapporto in base al contenuto
Molto testo e molti livelli di titolo vogliono un rapporto piccolo. Poche parole e un grande titolo ne vogliono uno grande.
- 3
Genera cinque o sei passi
Moltiplica per salire ai titoli e dividi una volta per il testo piccolo. La maggior parte dei design non usa mai più di sei dimensioni.
- 4
Arrotonda e dai un nome
Arrotonda ai pixel interi e nomina i passi per ruolo, come didascalia, testo, titolo e display, non per numero.
- 5
Imposta l’interlinea per passo
Le dimensioni maggiori vogliono un’interlinea più stretta. Testo intorno a 1,5, titoli intorno a 1,2, caratteri display vicino a 1.0.
- 6
Prova con parole vere
Imposta un titolo, un sottotitolo e un paragrafo veri. Se due passi sembrano troppo simili, salta uno o alza il rapporto.
Una scala tipografica per i post social
I post social richiedono un rapporto più grande delle pagine web, perché una tela da 1080 px si riduce a un terzo della sua larghezza sul telefono e i livelli di testo sono solo due o tre. Una base di 40 px con rapporto 1,5 dà 40, 60, 90 e 135 px, che si allinea bene con le misure di dimensione del font per i post Instagram.
Un post con una statistica ha bisogno di tre livelli chiari: la cifra, il dettaglio e l’etichetta. Su una scala 1,5 sono 135, 60 e 40 px.
Una slide di elenco usa i passi più bassi della stessa scala, quindi sta comodamente accanto alla slide con la statistica in un unico carosello.
Usare una sola scala su ogni slide di un carosello è ciò che fa sembrare un insieme progettato e non assemblato. Le stesse dimensioni negli stessi ruoli, slide dopo slide. Impaginazione del testo per i post social mostra come disporle.
Come scrivere una scala tipografica in CSS
Salva la scala come proprietà personalizzate così ogni componente la usa. Puoi concatenare le moltiplicazioni con calc(), oppure scrivere i valori arrotondati. Per una scala che cresce con lo schermo, dai a ogni passo un intervallo clamp(): un minimo per i telefoni, un massimo per gli schermi larghi e un valore fluido in mezzo.
/* A 1.25 scale from a 1rem (16px) base */
:root {
--ratio: 1.25;
--step-0: 1rem;
--step--1: calc(var(--step-0) / var(--ratio));
--step-1: calc(var(--step-0) * var(--ratio));
--step-2: calc(var(--step-1) * var(--ratio));
--step-3: calc(var(--step-2) * var(--ratio));
--step-4: calc(var(--step-3) * var(--ratio));
--step-5: calc(var(--step-4) * var(--ratio));
}
/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }--ratio una volta e ogni passo si aggiorna. Tieni rem nel minimo di ogni clamp così il testo rispetta ancora l’impostazione della dimensione del font del lettore.Da evitare
- Dieci dimensioni quando ne bastano cinque
- Due titoli distanti 2 px
- Lo stesso rapporto per una dashboard e per un poster
- Dimensioni fisse in pixel che ignorano le impostazioni del font del lettore
Da fare
- Cinque o sei passi, ciascuno con un ruolo nominato
- Saltare un passo se due livelli si somigliano
- Rapporto piccolo per schermi densi, grande per poche parole
- Dimensioni in rem, fluide con clamp()
Una scala è una parte di un insieme più ampio di decisioni su font, spaziatura e ruoli. Sistema tipografico li riunisce, e tracking e kerning tratta i valori di spaziatura da abbinare a ogni passo. Se progetti contenuti social, il kit del brand di Gradiently contiene i tuoi font per titoli e testo e il Designer li applica a ogni nuova dimensione, il che rende facile mantenere una scala che hai definito una volta sola.
Le domande più frequenti
Cos’è una scala tipografica?
Un insieme di dimensioni del font ottenute moltiplicando più volte una base per lo stesso rapporto, così ogni misura è in proporzione con le altre.
Qual è il miglior rapporto per una scala tipografica?
Non ce n’è uno solo. 1,2 o 1,25 si adattano a siti e app con molto testo; 1,5 o più si adatta a poster e post social con poche parole.
Quante dimensioni di font deve usare un design?
Di solito cinque o sei: una piccola, il testo, due o tre livelli di titolo e una dimensione display.
Devo arrotondare i valori di una scala tipografica?
Sì. Arrotondare ai pixel interi non fa differenza visibile e rende la scala più facile da usare e ricordare.
Come rendo responsiva una scala tipografica in CSS?
Usa clamp() per ogni passo, con un minimo in rem, un valore intermedio fluido in unità del viewport e un massimo per gli schermi larghi.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo