# Interlinea e lunghezza della riga per un testo leggibile

[Canonical HTML page](https://gradiently.design/it/guide/line-height-and-line-length)

Gran parte dei testi faticosi da leggere ha il font giusto e la spaziatura sbagliata. Due impostazioni risolvono quasi tutto: quanto è alta ogni riga e quanto è lunga.

## The short version

- L’interlinea è la distanza verticale tra una riga di testo e la successiva, e la lunghezza della riga è il numero di caratteri che stanno su una riga.
- Il testo corrente di solito si legge meglio con un’interlinea pari a circa 1,4 fino a 1,6 volte la dimensione del font e una riga di circa 45 fino a 75 caratteri.
- I titoli vogliono un’interlinea più stretta del testo corrente, spesso da 1,05 a 1,25, perché il testo grande ha già molto spazio tra le righe.
- Più la riga è lunga, più interlinea le serve, così l’occhio trova l’inizio della riga successiva senza scivolare.
- In CSS, imposta l’interlinea senza unità, come `line-height: 1.5`, e limita la lunghezza della riga con `max-width` in unità `ch`.

L’**interlinea** è la distanza tra la linea di base di una riga di testo e quella della riga successiva, e la lunghezza della riga (che i tipografi chiamano *giustezza*) è il numero di caratteri che stanno su una riga. Per il testo corrente, un’interlinea di circa 1,4 fino a 1,6 volte la dimensione del font e una riga di circa 45 fino a 75 caratteri sono i valori che si leggono comodamente con la maggior parte dei font. I titoli vogliono meno interlinea, spesso da 1,05 a 1.25. Queste due impostazioni fanno per la leggibilità più di quasi qualsiasi scelta di font.

Questa guida spiega perché questi valori funzionano, come le due impostazioni si influenzano a vicenda e come impostarle per pagine web, slide e post social. Fa parte della guida più ampia alle [basi della tipografia](https://gradiently.design/it/guide/typography-basics), accanto alla [spaziatura tra le lettere](https://gradiently.design/it/guide/letter-spacing).

## Cosa controllano davvero interlinea e lunghezza della riga

Leggere è una serie di salti. L’occhio coglie qualche parola, salta lungo la riga, poi fa un lungo ritorno verso sinistra per trovare la riga successiva. La lunghezza della riga decide quanto è lungo quel viaggio. L’interlinea decide quanto è facile atterrare sulla riga giusta alla fine del ritorno.

Troppo stretta, e le righe si ammassano: i discendenti toccano gli ascendenti e il ritorno atterra sulla riga sbagliata. Troppo larga, e il paragrafo si sfalda in strisce. Le righe troppo lunghe fanno perdere l’occhio sulla via del ritorno; quelle troppo corte rendono la lettura spezzettata.

| Impostazione | Troppo poco | Comodo | Troppo |
| --- | --- | --- | --- |
| Interlinea del testo | Sotto 1,2: righe ammassate che si scontrano | Da 1,4 a 1,6 | Sopra 2: il paragrafo si separa in strisce |
| Interlinea dei titoli | Sotto 1: le lettere di due righe si toccano | Da 1,05 a 1,25 | Sopra 1,4: un titolo su due righe sembra due titoli |
| Lunghezza della riga del testo | Sotto circa 40 caratteri: spezzettato | Da 45 a 75 caratteri | Sopra circa 90 caratteri: l’occhio perde il segno |

Valori di partenza per il testo latino. L’altezza della x del tuo font e la dimensione a cui lo usi li spostano un po’ in un senso o nell’altro.

## Come scegliere l’interlinea del testo corrente

Parti da 1,5 e regola a occhio. Tre fattori spingono il valore in su o in giù.

- **Altezza della x.** I font con un’altezza della x elevata (minuscole grandi rispetto alle maiuscole) sembrano più fitti, quindi vogliono più interlinea. I font con un’altezza della x ridotta possono stare più stretti.
- **Lunghezza della riga.** Le righe lunghe vogliono più interlinea, così il ritorno ha un bersaglio più ampio. Le righe corte, come in una colonna stretta o sullo schermo di un telefono, possono usarne un po’ meno.
- **Peso e colore.** Il testo in bold e il testo chiaro su fondo scuro sembrano entrambi più pesanti sulla pagina, quindi traggono vantaggio da un po’ più di spazio tra le righe.

Le indicazioni sull’accessibilità vanno nella stessa direzione. Il [criterio di successo sulla spaziatura del testo](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) del W3C chiede che i contenuti continuino a funzionare quando chi legge porta l’interlinea a 1,5 volte la dimensione del font, quindi qualsiasi layout costruito attorno a 1,5 supera già quella parte del test. Non fissare mai l’altezza di un riquadro di testo in modo così stretto che un’interlinea maggiore tagli le parole.

### Da evitare

- Una sola interlinea per tutte le dimensioni del design
- Testo corrente a 1,2 perché sembra ordinato in un mockup
- Titoli a 1,5, così un titolo su due righe si sfalda
- Riquadri di testo ad altezza fissa che tagliano quando la spaziatura cresce

### Da fare

- Interlinea più stretta man mano che il testo cresce
- Testo corrente intorno a 1,5, regolato sul font
- Titoli tra 1,05 e 1,25
- Riquadri che crescono con il loro testo

## L’interlinea per titoli e testo grande

L’interlinea è un rapporto, quindi lo spazio che crea cresce con la dimensione del font. A 16 px, un’interlinea di 1,5 aggiunge 8 px di spazio. A 72 px, lo stesso rapporto aggiunge 36 px, molto più di quanto serva a un titolo. Ecco perché il testo grande sembra largo con le impostazioni del testo corrente e va stretto man mano che cresce.

Una scala pratica: testo corrente a 1,5, sottotitoli a circa 1,3, titoli da 1,1 a 1,2 e righe display molto grandi da 1,0 a 1.05. Controlla le impostazioni più strette per le collisioni: un discendente sulla prima riga (g, y, p) può urtare un accento o un ascendente sulla seconda. Se succede, apri un po’ l’interlinea invece di spostare le singole righe.

Un post verticale con un titolo su due righe composto con interlinea stretta su un gradiente caldo

Un titolo su due righe composto stretto, intorno a 1,1, resta unito come un solo pensiero.

Un post verticale con un titolo e un paragrafo di testo corrente con un’interlinea più generosa

Il testo di supporto sotto ha più spazio, perché si legge riga per riga.

## Quanto dovrebbe essere lunga una riga di testo

L’intervallo consolidato della tipografia libraria è da 45 a 75 caratteri per riga, contando lettere, spazi e punteggiatura, con qualcosa intorno a 60 fino a 70 che risulta il più naturale per la lettura continua. Su un sito web di solito significa una colonna di testo larga tra circa 560 e 720 px con un font da 16 a 18 px, ma dipende dal font, quindi misura in caratteri e non in pixel.

Per verificarlo, conta i caratteri di una riga tipica. Se superi spesso gli 80 circa, la colonna è troppo larga; se stai sotto i 40 circa, è troppo stretta, con margini frastagliati e parole corte rimaste isolate.

- Troppo larga: 110 caratteri: 1100 × 180
- Comoda: 65 caratteri: 650 × 260
- Troppo stretta: 30 caratteri: 300 × 480

Lo stesso paragrafo con tre giustezze. La colonna comoda è larga circa due terzi di quella larga ed è molto più facile da seguire.

> **Schermi larghi non significano testi larghi** Su un monitor grande, aggiungi spazio attorno alla colonna o una seconda colonna per immagini e note. Stirare il testo corrente per riempire lo schermo è la causa più comune delle pagine faticose da leggere.

## Impostare interlinea e lunghezza della riga in CSS

Due abitudini coprono quasi tutto. Scrivi l’interlinea come numero senza unità, così ogni elemento la calcola dalla propria dimensione del font, e limita la lunghezza della riga con l’unità `ch`, basata sulla larghezza del carattere zero nel font corrente. La pagina MDN su [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) spiega perché i valori senza unità si ereditano in modo più sicuro di pixel o em.

```css
:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}
```

Interlinee senza unità che si stringono man mano che il testo cresce, e una giustezza in caratteri. `ch` si basa su un solo glifo, quindi controlla un paragrafo reale e ritocca il valore se il tuo font è largo.

## Interlinea e lunghezza della riga nei post e nelle slide

Post social e slide si leggono in pochi secondi, spesso su un telefono, quindi le regole cambiano. Le righe sono corte per natura e sono poche. Tieni i titoli stretti, intorno a 1,05 fino a 1,2, e limita ogni riga di supporto a una o due righe brevi intorno a 1.3. Se un post ha bisogno di un paragrafo con l’interlinea del testo corrente, probabilmente ha bisogno invece di meno parole.

Su un post da 1080 per 1350, un titolo da tre a sei parole per riga si legge bene alle dimensioni di un telefono. Su una slide da 1920 per 1080 vale lo stesso principio, ma da un capo all’altro di una stanza: righe corte, titoli stretti, margini generosi. Le guide sui [font per i social media](https://gradiently.design/it/guide/fonts-for-social-media) e sugli [sfondi per presentazioni](https://gradiently.design/it/guide/presentation-backgrounds) coprono l’aspetto delle dimensioni.

Un post social verticale che elenca tre voci su righe brevi su uno sfondo sfumato morbido

Un post a elenco tiene ogni voce su una sola riga breve, così l’interlinea deve solo tenere insieme l’elenco.

Il testo su uno sfondo movimentato ha bisogno di un po’ più di tutto: più interlinea, una dimensione maggiore e un’area più calma dietro. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega il metodo completo.

## Una checklist rapida per una spaziatura leggibile

1. **Imposta prima il testo corrente** Scegli la dimensione, un’interlinea intorno a 1,5 e una giustezza da 60 a 70 caratteri. Regola tutto il resto a partire da qui.
2. **Stringi man mano che il testo cresce** Riduci l’interlinea passo passo dai sottotitoli ai titoli, e controlla le righe più strette per le collisioni.
3. **Misura in caratteri** Conta una riga reale. Se esce dall’intervallo da 45 a 75, correggi il contenitore, non la dimensione del font.
4. **Lascia che chi legge possa cambiarla** Evita i riquadri di testo ad altezza fissa, così un testo più grande o una spaziatura più ampia non taglia mai le tue parole.

## FAQ

### Qual è una buona interlinea per il testo corrente?

Circa da 1,4 a 1,6 volte la dimensione del font per la maggior parte dei font e degli schermi. Parti da 1,5 e regola in base all’altezza della x del font e alla lunghezza delle righe.

### Qual è la lunghezza ideale della riga per leggere?

Circa da 45 a 75 caratteri per riga, spazi compresi, con circa 60 fino a 70 che risultano i più naturali per le letture lunghe. In CSS, un `max-width` di circa 60ch fino a 70ch è un buon inizio.

### Interlinea e leading sono la stessa cosa?

Quasi. Leading viene dalla composizione a caratteri mobili, quando tra le righe si aggiungevano strisce di piombo. Negli strumenti digitali l’interlinea è l’intera distanza da una linea di base alla successiva, ed è ciò che oggi quasi tutti intendono con leading.

### Perché i titoli vogliono un’interlinea più piccola del testo corrente?

L’interlinea è un rapporto rispetto alla dimensione del font, quindi alle dimensioni grandi lo stesso rapporto aggiunge molto più spazio. I titoli di solito rendono meglio tra 1,05 e 1.25.