← Tutti gli articoli

Tutorial

La larghezza perfetta della colonna di lettura

17 maggio 2026 · di JustZix Team

Se un singolo cambiamento potesse migliorare ogni articolo che leggi, sarebbe la larghezza della colonna. I tipografi la chiamano la misura, e azzeccarla è la differenza tra una lettura senza sforzo e un costante affaticamento degli occhi.

La regola dei 66 caratteri

Decenni di pratica tipografica indicano all'incirca da 50 a 75 caratteri per riga, con 66 come punto ottimale. Troppo corta e gli occhi saltano di continuo; troppo lunga e il ritorno dalla fine di una riga all'inizio della successiva diventa inaffidabile. La maggior parte dei siti web allunga il testo da bordo a bordo sui monitor larghi, arrivando ben oltre i 120 caratteri — molto fuori dall'intervallo confortevole.

Misurare in unità ch

Il CSS ti dà un'unità costruita esattamente per questo lavoro. L'unità ch equivale alla larghezza di avanzamento del glifo 0 nel font corrente. Una max-width di 66ch quindi segue automaticamente la tua scelta di font:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

Poiché ch è relativa al font, la stessa regola mantiene una buona misura sia che il sito usi un sans condensato sia un serif largo.

Tieni larghi gli elementi larghi

Limitare la colonna dell'articolo non dovrebbe intrappolare immagini e codice al suo interno. Lascia che figli specifici escano a piena larghezza mentre il testo resta stretto:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

Il margine negativo ricentra un figlio a piena larghezza rispetto alla stretta colonna di testo. Regola i numeri a piacere — l'obiettivo sono media che respirano mentre la prosa resta disciplinata.

Padding reattivo

Su un telefono, una max-width rigida è irrilevante ma il padding ai bordi conta. Combina entrambi così la regola funziona ovunque:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

La clamp() dà agli schermi piccoli un margine confortevole e a quelli grandi uno generoso, senza una sola media query.

Abbinare larghezza e ritmo

La larghezza funziona meglio insieme a una spaziatura verticale generosa. Una colonna stretta con interlinea fitta sembra comunque stretta. Aggiungi questo blocco complementare:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Applicala come regola JustZix

Crea una regola, imposta un pattern URL ampio come *://*/* se la vuoi ovunque, oppure limitala a una pubblicazione specifica. Incolla i blocchi di larghezza e ritmo nel pannello CSS e salva. Visita qualche articolo e regola il valore ch finché le righe non sembrano naturali — la maggior parte delle persone si assesta tra 60ch e 72ch.

Una misura corretta è invisibile: smetti semplicemente di notare il layout e inizi ad assorbire le parole. Esplora i nostri esempi pronti all'uso per preset messi a punto, leggi la guida complementare su come creare una modalità lettura completa, e scarica JustZix per iniziare a misurare.