Font e leggibilità

Dimensione e interlinea

La tipografia web influenza quanto a lungo qualcuno resta a leggere. Per corpo di testo punta a 16–18px equivalenti (1rem–1.125rem se root è 16px), line-height tra 1.5 e 1.7 e colore con contrasto AA sullo sfondo. Testi troppo piccoli o compatti affaticano su mobile e con zoom al 200%, scenario comune per accessibilità.

Caricare i font

Self-host o CDN: carica solo i pesi usati (400, 600, non tutta la famiglia). Usa font-display: swap per mostrare subito il fallback e sostituire quando il webfont è pronto, evitando testo invisibile (FOIT). Preload solo il file critico above the fold, non ogni variante.

.prose {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 42rem;
  font-family: var(--font-body, system-ui, sans-serif);
}

h1, h2 { font-family: var(--font-heading, inherit); line-height: 1.2; }

Righe di testo

Colonne troppo larghe fanno perdere la riga agli occhi: circa 45–75 caratteri per riga (max-width ~42–65ch). Su layout full-bleed limita la larghezza del blocco prose con max-width e margini auto.

Gerarchia tipografica

Heading più grandi e compatti (line-height ~1.1–1.3), body più arioso. Usa scale coerente (1.25, 1.333) invece di dimensioni random per ogni pagina. Non ridurre sotto 16px testo importante solo per far entrare copy in un box.

Micro-tipografia

Apostrofi e virgolette tipografiche (’ « ») migliorano leggibilità in italiano rispetto ad ASCII grezzo. font-variant-numeric: tabular-nums allinea cifre in tabelle prezzi. Per liste lunghe, max-width sul ul evita righe che attraversano tutto lo schermo. Heading con text-wrap: balance (dove supportato) riduce orphan words su titoli corti.

Non dimenticare lang su citazioni in inglese inline: screen reader pronunciano meglio.

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Font e leggibilità con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Body a 12–14px per «look elegante».
• Interlinea 1.0 su paragrafi lunghi.
• Caricare 8 pesi dello stesso font.
• Testo grigio chiaro su bianco per body copy.
• All-caps su paragrafi interi senza letter-spacing adeguato.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

In breve

• Body 16px+, line-height 1.5+.
• Limita larghezza con ch o rem.
• Subset font, swap, preload selettivo.
• Scala tipografica coerente per heading.