← Tutti gli articoli

Tutorial

Regola dimensione e spaziatura dei font per una lettura confortevole

17 maggio 2026 · di JustZix Team

Molti siti stipano testo minuscolo in colonne da bordo a bordo. Leggerli è faticoso. Con JustZix puoi associare una regola CSS che ridimensiona il testo, apre l'interlinea e limita la larghezza della colonna — trasformando qualsiasi muro di testo in qualcosa di riposante.

Aumenta la dimensione di base del font

I browser calcolano ogni dimensione relativa dalla dimensione del font radice. Aumenta quell'unico valore e gran parte della pagina si ridimensiona con esso.

html {
  font-size: 18px !important;
}

Se un sito usa dimensioni in pixel fisse ovunque, il trucco della radice non lo raggiungerà. Allora mira direttamente al testo del corpo.

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

Dai respiro alle righe

L'interlinea è il singolo maggior fattore di comfort. La maggior parte dei siti la imposta troppo stretta. Un valore tra 1,6 e 1,8 è il punto ottimale per il testo del corpo.

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

Limita la larghezza della colonna

Le righe che si estendono su un monitor largo sono estenuanti da scorrere. La misura ideale è all'incirca da 65 a 75 caratteri. Vincola il contenuto principale e centralo.

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

L'unità ch misura la larghezza in larghezze di carattere, quindi la colonna si adatta a qualunque font tu stia usando. Abbina questo a una sostituzione di font e la pagina si trasforma.

Allenta la spaziatura tra lettere e paragrafi

Un tocco di spaziatura extra tra i paragrafi e un'idea di spaziatura tra le lettere rende più tranquillo il testo denso.

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

Un cursore di ridimensionamento con JavaScript

Vuoi regolare la dimensione in tempo reale invece di modificare il CSS? Una minuscola regola JavaScript aggiunge lo zoom da tastiera solo per il testo.

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

Tieni premuto Alt e premi il tasto più o meno per ridimensionare. JustZix esegue questo script sulle pagine che scegli, quindi la scorciatoia esiste solo dove la vuoi.

Lista di controllo

• Inizia con la dimensione del font radice; ripiega sui selettori diretti se il sito usa pixel fissi.
• Punta a un'interlinea 1,6–1,8 e a una colonna intorno a 70ch.
• Non spaziare troppo — troppa spaziatura tra le lettere danneggia la leggibilità tanto quanto troppo poca.
• Combina con una sostituzione di font per il miglioramento maggiore.

Continua con il nostro articolo su come sostituire i font dei siti web, sfoglia gli esempi pronti all'uso per ricette istantanee, oppure scarica JustZix per applicare oggi la tua prima regola di lettura.