Una guida pratica alla leggibilità del testo nel web moderno

Perché la maggior parte dei siti web è più difficile da leggere di quanto dovrebbe

Nel 2026, il sito web medio viene pubblicato con una famiglia di font personalizzata, colori di brand scelti con cura e un design system che definisce la spaziatura fino al singolo pixel. Eppure il testo principale — ciò che la maggior parte dei visitatori è venuta effettivamente a leggere — spesso è impostato a 14px in un grigio a basso contrasto, con un carattere ottimizzato per i titoli, non per i paragrafi.

Questa non è una critica ai designer. È un promemoria: la leggibilità è una disciplina distinta dal visual design, e le due cose non sempre coincidono. Un carattere che appare nitido in una hero section può risultare estenuante sulla lunghezza di un paragrafo. Una palette di colori che rende bene in fotografia può non superare i controlli di contrasto. Un layout che funziona su un monitor da 27 pollici può collassare in una colonna stretta su mobile.

La buona notizia: un testo leggibile non richiede una laurea in tipografia. Richiede attenzione a una manciata di variabili che hanno un impatto sproporzionato.

Dimensione del font: più grande di quanto pensi

L’errore di leggibilità più comune sul web è un testo principale troppo piccolo. I designer spesso impostano il body copy a 14px o 15px perché “sembra pulito” su desktop, poi dimenticano che una parte significativa dei lettori usa il telefono, spesso in condizioni di luce non ideali.

Una base pratica per il testo principale nel 2026:

• Desktop: minimo 18px, preferibilmente 20px
• Mobile: minimo 16px, preferibilmente 18px

Questi numeri sembrano grandi se sei abituato a caratteri più piccoli, ma riflettono il modo in cui le persone leggono davvero sugli schermi. Un testo più grande riduce l’affaticamento visivo, migliora la comprensione e rende i contenuti accessibili ai lettori con lievi problemi di vista che non hanno modificato le impostazioni del browser.

Se il tuo design system impone un testo più piccolo, provalo su un telefono alla luce del sole. Se devi strizzare gli occhi, è troppo piccolo.

Interlinea: dai al testo spazio per respirare

L’interlinea (leading) è lo spazio verticale tra le righe di testo. Se è troppo stretta, le righe si confondono tra loro. Se è troppo ampia, l’occhio perde il filo tra una riga e l’altra.

Per il testo principale, un’interlinea compresa tra 1.5 e 1.7 funziona per la maggior parte dei caratteri. I titoli possono essere più compatti (da 1.1 a 1.3), ma il body copy ha bisogno di respiro.

Il CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Questo è uno dei miglioramenti di leggibilità più semplici. Se il tuo testo principale oggi è impostato su line-height: 1.2 o usa un valore fisso in pixel, cambialo oggi stesso.

Lunghezza della riga: più corta di quanto pensi

La lunghezza ottimale della riga per il testo principale è di 45-75 caratteri per riga, circa 8-12 parole. Righe più lunghe di 90 caratteri rendono difficile per l’occhio tornare all’inizio della riga successiva. Righe più corte di 40 caratteri creano un’esperienza di lettura frammentata e irregolare.

La maggior parte dei siti web sbaglia lasciando che il testo occupi l’intera larghezza del viewport, soprattutto su desktop. Un monitor largo 1920px può contenere oltre 150 caratteri per riga, il che è estenuante da leggere.

La soluzione è impostare una max-width sul contenitore del testo:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

L’unità ch è poco usata ma perfetta per questo: scala con la dimensione del font e corrisponde grosso modo alla larghezza di un carattere.

Contrasto: non è semplice come nero su bianco

WCAG 2.1 specifica un rapporto di contrasto minimo di 4.5:1 per il testo principale (livello AA) e 7:1 per un’accessibilità avanzata (livello AAA). La maggior parte dei siti web soddisfa questo requisito sulla carta, ma fallisce nella pratica perché usa testo grigio chiaro su sfondo bianco.

Casi comuni:

• #666666 su #FFFFFF (4.54:1, passa appena)
• #777777 su #FFFFFF (4.47:1, non passa)
• Qualsiasi tonalità più chiara di #767676 su bianco (non passa)

Se il tuo design system definisce "text-secondary" come un grigio chiaro, testalo. Il WebAIM contrast checker è il modo più rapido per verificarlo.

La dark mode complica ulteriormente la situazione. Il testo bianco puro su nero puro crea aloni (un effetto luminoso) più difficili da leggere rispetto a un bianco leggermente attenuato su grigio scuro. Un approccio migliore:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Scelta del carattere: i font predefiniti sono migliori di quanto pensi

I web font personalizzati sono ovunque, ma comportano compromessi. Aggiungono latenza, aumentano il peso della pagina e possono bloccare il rendering se non vengono caricati con attenzione. Per il testo principale, i font di sistema sono spesso la scelta migliore.

Uno stack robusto di font di sistema nel 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Questo ti dà San Francisco su macOS/iOS, Segoe UI su Windows e Roboto su Android: tutti caratteri molto leggibili, progettati professionalmente e caricati istantaneamente.

Se usi un font personalizzato per il testo principale, scegline uno progettato per la lettura lunga, non per il display. Evita:

• Pesi ultra-light o ultra-bold per il body copy
• Varianti condensed o extended
• Font con x-height bassa (l’altezza delle lettere minuscole)

Testa il carattere scelto sulla lunghezza di un paragrafo prima di adottarlo.

Tipografia responsive: scale fluide

Le dimensioni fisse dei font non scalano bene tra dispositivi. Un font del testo principale da 20px, comodo su desktop, può sembrare eccessivo su mobile.

La tipografia fluida usa clamp() per scalare la dimensione del font in modo continuo tra un minimo e un massimo:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Questo scala da 16px sugli schermi piccoli a 20px sugli schermi grandi, con un’interpolazione fluida nel mezzo. È più sofisticato dei breakpoint nelle media query e si adatta a qualsiasi larghezza del viewport.

Per una scala tipografica completa (titoli, corpo, testo piccolo), strumenti come Utopia generano scale fluide basate sui tuoi vincoli.

Spaziatura dei paragrafi e allineamento del testo

Due piccoli dettagli che contano:

1. Spaziatura dei paragrafi: aggiungi spazio tra i paragrafi (margin-block-end: 1em) oppure usa un rientro della prima riga (text-indent: 1.5em), ma non entrambi. La maggior parte dei contenuti web usa la spaziatura.

1. Allineamento del testo: l’allineamento a sinistra (o a destra per le lingue RTL) è quasi sempre più leggibile del testo giustificato, che crea spaziature irregolari tra le parole a meno che non sia attiva la sillabazione. Il testo principale centrato è difficile da leggere e dovrebbe essere riservato a passaggi brevi.

Testare la leggibilità nella pratica

La leggibilità non è puramente oggettiva, ma puoi testarla:

• Leggi i tuoi contenuti sul telefono in diverse condizioni di luce
• Esegui un audit di accessibilità Lighthouse per individuare problemi di contrasto e dimensione del font (vedi come leggere un report Lighthouse senza farsi prendere dal panico per una guida)
• Chiedi a una persona con più di 50 anni di leggere una pagina senza modificare le impostazioni
• Controlla nelle analytics il bounce rate delle pagine ricche di testo: se le persone escono rapidamente, la leggibilità potrebbe essere un fattore

Se i tuoi contenuti sono difficili da leggere, le persone non li leggeranno. È così semplice.

Come si presenta nella pratica

Uno stile leggibile per il testo principale nel 2026 potrebbe essere così:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Questo copre dimensione del font, interlinea, lunghezza della riga, contrasto e scalabilità responsive in circa una dozzina di righe di CSS. Non è entusiasmante, ma funziona.

Quando infrangere le regole

Queste linee guida si applicano al testo principale: i paragrafi che le persone leggono per informarsi. Titoli, didascalie, etichette UI e testi di marketing hanno vincoli diversi e possono piegare queste regole.

Ma se qualcuno arriva sul tuo sito per leggere un articolo, una pagina di documentazione o una descrizione di prodotto, un testo leggibile non è opzionale. È l’aspettativa di base.