Lunghezza della riga e interlinea: come impostarle in sei passi

Alla fine di questa lettura avrai due numeri da difendere in una design review: la larghezza massima del testo corrente e l'interlinea che le corrisponde. Entrambi scritti in CSS che regge un cambio di font, uno zoom al 200 per cento e un telefono tenuto in verticale.

Partiamo dalla risposta breve. Il testo si legge meglio tra 50 e 75 caratteri per riga, con 66 come valore più citato, e l'interlinea adatta a quella fascia sta tra 1,4 e 1,6 come moltiplicatore senza unità. In tipografia la larghezza della riga si chiama giustezza. Il resto dell'articolo spiega come arrivare a quei numeri senza tirare a indovinare.

La giustezza è il parametro più trascurato nelle interfacce di prodotto. Quasi sempre si imposta un contenitore in pixel o in percentuale e si lascia che il testo cada dove capita. Su un monitor da 27 pollici un paragrafo a tutta larghezza supera i 140 caratteri. L'occhio finisce la riga, torna a sinistra e sbaglia bersaglio. Chi legge rilegge, poi passa a scorrere, poi abbandona la pagina. La rassegna di Baymard sulla letteratura della leggibilità colloca la fascia utile tra 50 e 75 caratteri. Emil Ruder, che lavorava sulla carta decenni prima del browser, si fermava tra 50 e 60.

Cosa serve prima di cominciare

• Il font di produzione, non un segnaposto. La giustezza dipende dalla larghezza dei caratteri che pubblichi davvero.
• Una scala tipografica già decisa. Regolare l'interlinea prima di aver fissato il corpo del testo significa rifare il lavoro due volte.
• Un campione di testo vero: il paragrafo più lungo del prodotto, non il lorem ipsum.
• Gli strumenti di sviluppo del browser e dieci minuti.

Passo 1: conta i caratteri che pubblichi oggi

Apri il paragrafo più lungo del prodotto al breakpoint più largo. Seleziona una riga intera, copiala, incollala in qualsiasi strumento che conti i caratteri. Quel numero è la giustezza attuale. Ripeti a 1280px e a 390px.

Tornano tre numeri, e quello largo di solito sorprende: oltre 100 caratteri su un desktop grande, un valore ragionevole su un portatile, meno di 40 su un telefono. Annotali tutti e tre. Sono lo stato di partenza e servono per la verifica finale.

Passo 2: limita il testo con l'unità ch

.prose p { max-width: 65ch; }

L'unità ch corrisponde alla larghezza della cifra zero nel font corrente. Non è un conteggio di caratteri. Nella maggior parte dei font proporzionali lo zero è più largo della lettera minuscola media, quindi una colonna da 65ch contiene parecchi caratteri in più di 65. Imposta il limite, poi torna al passo 1 e conta di nuovo. Se la riga arriva a 80, scendi a 58ch o 60ch e ricontrolla. Due passaggi sono normali, e il valore finale dipende dal carattere tipografico: per questo copiare il numero da un altro progetto quasi mai funziona.

Limita il paragrafo, non il contenitore. Un tetto di 65ch sul wrapper stringe anche tabelle, blocchi di codice, diagrammi e immagini a piena larghezza, che invece vogliono proprio lo spazio a cui il paragrafo rinuncia. Applica il limite agli elementi di testo e lascia respirare il resto.

Passo 3: scrivi l'interlinea come numero senza unità

Usa un numero, mai un valore in pixel.

body { font-size: 16px; line-height: 1.55; }

Un valore senza unità si eredita come moltiplicatore, quindi ogni elemento figlio lo ricalcola sul proprio corpo. Un valore in pixel si eredita come cifra già calcolata: una didascalia da 13px dentro un blocco da 16px eredita 24px di interlinea e sembra scritta a righe doppie. MDN indica la forma senza unità come pratica consigliata proprio per questo, e in più scala correttamente quando la pagina viene ingrandita.

Poi calibra il numero sulla giustezza, perché le due cose sono una decisione sola. Una riga lunga chiede più spazio verticale, altrimenti l'occhio non ritrova l'inizio di quella dopo. Una riga corta ne chiede meno, altrimenti il paragrafo si sfilaccia in strisce. La fascia che usiamo:

• da 45 a 55 caratteri per riga: da 1,4 a 1,5
• da 55 a 65 caratteri per riga: da 1,5 a 1,6
• da 65 a 75 caratteri per riga: da 1,6 a 1,7

Sotto 1,5 con una giustezza ampia il ritorno a capo dell'occhio comincia a fallire. Il criterio WCAG 1.4.8 sulla presentazione visiva chiede almeno un'interlinea e mezza dentro il paragrafo: da lì viene la soglia di 1,5 per il testo corrente.

Passo 4: ai titoli serve meno interlinea che al testo

I titoli stanno più stretti: tra 1,1 e 1,3. Il motivo è aritmetico. L'interlinea è un multiplo del corpo, quindi un titolo da 40px con valore 1,6 apre 64px fra le sue due righe, abbastanza perché chi legge le percepisca come due elementi separati invece che come una frase sola. A 1,15 lo stesso titolo resta compatto.

Qui la scala tipografica ripaga. Se la scala è una serie di gradini, lega un valore di interlinea a ogni gradino invece che a ogni componente. Display 1,1, titoli 1,2, testo 1,55, didascalie 1,4. Una decisione per gradino, valida ovunque.

Passo 5: sistema l'estremo mobile

Su un telefono da 390px il testo a 16px arriva a 35-40 caratteri per riga. Per gli schermi piccoli Baymard indica la fascia 30-50, quindi siamo in regola. Sul mobile il problema è l'opposto del desktop: padding sopra padding porta il conteggio sotto i 30, il testo va a capo ogni quattro parole e il margine destro diventa una sega.

Non rimpicciolire il testo per far entrare più caratteri sul telefono. 16px è il minimo. Sotto quella soglia Safari su iOS ingrandisce la viewport ogni volta che un campo di input riceve il focus, e la pagina salta per un motivo che nessuno attribuisce alla tipografia. Riduci piuttosto il padding orizzontale, oppure abbassa il corpo degli elementi di contorno e lascia stare la prosa.

Passo 6: pulisci il margine irregolare

Due proprietà CSS chiudono il lavoro, e una terza opzione allettante è una trappola.

text-wrap: balance pareggia la larghezza delle righe dentro un blocco breve. Usalo sui titoli e su qualsiasi testo di due o tre righe. Chromium lo limita a sei righe per motivi di prestazioni, quindi non serve per il testo corrente. Il supporto è arrivato alla Baseline nel 2024: Chrome ed Edge dalla 114, Firefox dalla 121, Safari dalla 17.5.

text-wrap: pretty è la controparte per il testo corrente. Ritocca le ultime righe del paragrafo per evitare la parola isolata a fine blocco. WebKit ha rilasciato la sua implementazione in Safari 26, Chrome ed Edge ce l'hanno dalla 117, Firefox resta il buco. Dove manca, il testo va a capo come sempre: aggiungerlo non costa nulla.

La trappola è text-align: justify. Il testo giustificato dà un margine destro pulito e, senza sillabazione e senza un vero motore di sillabazione, apre fiumi di bianco che scendono lungo la colonna. Il criterio WCAG 1.4.8 lo esclude esplicitamente per i blocchi di testo.

Come verificare che funzioni

1. Riconta a tre larghezze. Stesso metodo del passo 1: al breakpoint più largo, a 1280px e a 390px. Tutti e tre devono stare fra 45 e 75 caratteri, e quello mobile fra 30 e 50.
2. Ingrandisci al 200 per cento. Il testo deve ricomporsi senza scorrimento orizzontale. È il quinto requisito del criterio 1.4.8, e una giustezza impostata in ch lo supera da sola, dove una impostata in pixel spesso no.
3. Controlla la distanza fra i paragrafi. Il criterio 1.4.8 chiede uno spazio fra paragrafi pari ad almeno una volta e mezza l'interlinea. Con 16px e interlinea 1,55 l'interlinea vale circa 25px, quindi fra i paragrafi servono circa 38px.
4. Cambia il font. Sostituisci la famiglia del testo con una nettamente più larga o più stretta e ricarica. Se la giustezza resta sullo stesso conteggio di caratteri, il limite in ch sta facendo il suo lavoro.

Una precisazione sullo standard: il criterio 1.4.8 è di livello AAA ed è scritto come "deve esistere un meccanismo", non come comportamento predefinito obbligatorio. Consideralo un obiettivo per le superfici di lettura, non un esame da superare su ogni schermata del prodotto.

Errori frequenti e come si correggono

Le didascalie sembrano a righe doppie. Qualcuno ha messo line-height: 24px su un elemento padre. Il valore già calcolato in pixel viene ereditato dai figli più piccoli. Converti ogni interlinea del progetto in numero senza unità.

La giustezza sparisce in un layout a due colonne. max-width: 65ch sul paragrafo è un massimo, non un minimo. In una colonna stretta il paragrafo scende sotto i 45 caratteri e il ritmo si rompe. Imposta una larghezza minima di colonna, oppure passa a colonna singola prima.

Immagini e tabelle si sono ristrette. Il limite è finito sul contenitore invece che sugli elementi di testo. Spostalo su p, li, blockquote e sui livelli di titolo che ne hanno bisogno.

Un URL o un token sfonda il limite. Le stringhe lunghe senza spazi ignorano la giustezza e generano scorrimento orizzontale. Aggiungi overflow-wrap: break-word al contenitore del testo.

I numeri sono giusti ma si legge male lo stesso. Prima di rimettere mano alla giustezza controlla altre due variabili: il contrasto fra testo e sfondo e lo spazio sopra ogni titolo. Un titolo equidistante fra il paragrafo che lo precede e quello che lo segue si attacca a quello sbagliato.

Per approfondire

Giustezza e interlinea sono lo strato della lettura. Le due decisioni adiacenti sono le dimensioni, di cui parliamo nella scala tipografica per UI di prodotto, e lo spazio attorno al testo, in allineamento ottico nelle interfacce. Se dopo tutti e tre la pagina resta piatta, il problema di solito è la gerarchia e non la tipografia: gerarchia visiva senza colore raccoglie gli strumenti che funzionano quando il colore d'accento non sta facendo niente.