# Scala tipografica: dimensioni imparentate, con i rapporti

[Canonical HTML page](https://gradiently.design/it/guide/typographic-scale)

Scegli le dimensioni dei font a occhio e vanno alla deriva: 18, 22, 23, 30, 31. Una scala tipografica sostituisce quelle ipotesi con una dimensione di base e un rapporto, così ogni misura sembra della stessa famiglia.

## The short version

- 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().

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](https://gradiently.design/it/guide/visual-hierarchy).

## 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.

| Nome | Rapporto | Sensazione | Adatto a |
| --- | --- | --- | --- |
| Seconda minore | 1.067 | Appena diverso | Tabelle di dati dense, schermi piccoli |
| Seconda maggiore | 1.125 | Delicato | App e dashboard |
| Terza minore | 1,2 | Calmo e chiaro | Interfacce, documentazione, lettura lunga |
| Terza maggiore | 1,25 | Equilibrato | Siti web e blog, un’impostazione sicura |
| Quarta giusta | 1.333 | Sicuro | Pagine di marketing, editoria |
| Quarta aumentata | 1.414 | Forte | Landing page, presentazioni |
| Quinta giusta | 1,5 | Audace | Poster, post social, grandi titoli |
| Rapporto aureo | 1.618 | Drammatico | Caratteri display con pochi livelli |

Rapporti comuni dal piccolo al grande. Nel dubbio, parti da 1,25 per il web e 1,5 per i post social.

## 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.

| Passo | 1,2 | 1,25 | 1.333 | 1,5 |
| --- | --- | --- | --- | --- |
| Piccolo (passo −1) | 13 | 13 | 12 | 11 |
| Testo (base) | 16 | 16 | 16 | 16 |
| Passo 1 | 19 | 20 | 21 | 24 |
| Passo 2 | 23 | 25 | 28 | 36 |
| Passo 3 | 28 | 31 | 38 | 54 |
| Passo 4 | 33 | 39 | 51 | 81 |
| Passo 5 | 40 | 49 | 67 | 122 |

Valori arrotondati ai pixel interi. Il passo sotto la base è la base divisa per il rapporto, usato per didascalie ed etichette.

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](https://gradiently.design/it/guide/font-size-for-social-media).

Un post social verticale con una grande statistica che dice checkout 3 volte più rapido sopra un testo di supporto più piccolo

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 verticale di carosello intitolata Prima di pubblicare con una breve checklist sotto

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](https://gradiently.design/it/guide/text-hierarchy-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()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): un minimo per i telefoni, un massimo per gli schermi larghi e un valore fluido in mezzo.

```css
/* 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); }
```

Cambia `--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](https://gradiently.design/it/guide/brand-typography-system) li riunisce, e [tracking e kerning](https://gradiently.design/it/guide/tracking-vs-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.

## FAQ

### 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.