La tipografia di un sito si nota solo quando è sbagliata

Nessun cliente ha mai chiesto di cambiare il font di un sito perché era brutto. Chiedono altre cose: che il testo è faticoso, che sul telefono si legge male, che la pagina “sembra vecchia”. Quasi sempre sono sintomi della stessa causa, ed è la tipografia.

È anche una delle poche parti del design che si può verificare con dei numeri invece che con un’opinione, ed è il motivo per cui vale la pena parlarne senza girarci intorno.

Le tre misure che decidono se un testo si legge

La dimensione. Sedici pixel è il minimo per il testo di lettura, e sul telefono spesso serve qualcosa in più. Sotto quella soglia il testo non è “elegante”, è solo più difficile da leggere, e la conseguenza è che viene saltato. Vale anche per i testi secondari, le didascalie e le note legali, che sono i punti in cui si scende per abitudine.

L’interlinea. Lo spazio verticale fra le righe dovrebbe stare intorno a una volta e mezza la dimensione del carattere. Troppo poco e le righe si attaccano, troppo e il paragrafo si sfalda in strisce separate. È il parametro che cambia di più la sensazione di fatica, ed è quello che quasi nessuno tocca.

La lunghezza della riga. Fra i sessanta e i settantacinque caratteri, spazi inclusi. Righe più lunghe fanno perdere il segno quando si va a capo, righe troppo corte spezzano la lettura. Su schermi grandi questo significa che il testo non deve occupare tutta la larghezza della pagina: serve un limite, e non è una scelta estetica.

Queste tre misure si controllano in due minuti su qualsiasi sito, comprese le pagine che ti piacciono e che vorresti imitare.

Quanti font servono davvero

Uno. Al massimo due, uno per i titoli e uno per il testo, e solo se hanno un motivo per essere diversi.

Il punto non è il gusto, è il peso. Ogni famiglia di caratteri va scaricata, e ogni variante di spessore o di stile è un file in più. In un audit di prestazioni su un e-commerce abbiamo trovato tre famiglie diverse per 222 KB complessivi, tutte effettivamente usate da qualche parte nel sito. Consolidarne una sola valeva circa un secondo di caricamento in meno sulla pagina principale, che è tantissimo per un intervento che non cambia una riga di contenuto.

La regola pratica è: carica solo le varianti che usi davvero. Se il sito usa il regolare e il grassetto, gli altri sei spessori della famiglia sono peso scaricato per niente.

Il momento in cui il testo appare

C’è un dettaglio tecnico che si vede a occhio nudo e che quasi nessuno collega alla tipografia: il salto della pagina durante il caricamento.

Succede quando il browser mostra prima un font di sistema e poi lo sostituisce con quello vero: i due hanno larghezze diverse, il testo si ridispone e tutto quello che sta sotto si sposta. Chi stava leggendo perde il segno, chi stava per toccare un pulsante lo manca.

Si evita in due modi, che vanno usati insieme: ospitare i font sul proprio dominio invece di chiamarli da un servizio esterno, e dichiarare al browser come comportarsi durante l’attesa, scegliendo un font di ripiego con proporzioni simili. È lavoro da mezz’ora che si sente su ogni pagina del sito.

Cosa guardare quando si sceglie

Prima di innamorarsi di un carattere, tre controlli veloci.

Le forme ambigue. Scrivi in quel font la sequenza con I maiuscola, l minuscola e 1: in molti caratteri geometrici sono identiche. Poi guarda zero e O maiuscola. Se non si distinguono, ogni codice, targa o numero d’ordine sul tuo sito diventerà una fonte di errori.

I numeri. Se il sito mostra prezzi, tabelle o quantità, servono numeri della stessa larghezza, altrimenti le colonne ballano. È un dettaglio che si nota solo quando manca.

La lingua. Verifica che ci siano gli accenti italiani, la È maiuscola compresa, che in diversi caratteri gratuiti manca o è disegnata male. Se il sito è anche in altre lingue, il controllo va esteso a quelle.

La gerarchia, che è il vero lavoro

Scegliere il carattere è la parte facile. Quella che cambia la resa di un sito è decidere quante dimensioni di testo esistono e cosa significa ognuna.

Ne bastano cinque: il titolo della pagina, i titoli di sezione, i sottotitoli, il testo di lettura e il testo piccolo per note e didascalie. Cinque valori fissi, usati sempre allo stesso modo, con una regola chiara su quale spessore va con quale dimensione.

Il problema nasce quando ogni sezione del sito viene disegnata in un momento diverso: nascono sette dimensioni leggermente diverse, tre pesi usati a caso, e il risultato è un sito che sembra approssimativo senza che si capisca perché. Chi guarda non sa dire cosa non va, ma lo percepisce.

C’è un test veloce per verificarlo: apri una pagina, socchiudi gli occhi e guarda cosa emerge. Se emergono tre livelli distinti, la gerarchia funziona. Se è tutto uguale, o se emerge la cosa sbagliata, il problema non è il font che hai scelto.

Gli errori che troviamo più spesso

Il testo grigio chiaro su fondo bianco, che è la scelta estetica più comune e la più penalizzante: il contrasto scende sotto la soglia leggibile e a farne le spese sono soprattutto i testi secondari.

I titoli tutti maiuscoli oltre le poche parole: rallentano la lettura perché tolgono il profilo delle parole, e su mobile occupano il doppio dello spazio.

Il testo sopra le fotografie senza una protezione, che funziona sull’immagine scelta in fase di design e smette di funzionare alla prima immagine caricata dal cliente.

E il font scelto guardandolo in un titolo di sessanta pixel, senza mai vederlo in un paragrafo di testo vero: è il modo più comune per ritrovarsi con un sito bello nelle anteprime e faticoso da leggere.

Cosa portarsi a casa

• Sedici pixel di dimensione, interlinea intorno a una volta e mezza, righe fra i sessanta e i settantacinque caratteri. Tre numeri, verificabili.
• Un font, al massimo due. Ogni famiglia in più è peso che paghi su ogni pagina.
• Carica solo gli spessori che usi davvero.
• Il salto del testo durante il caricamento è un problema di font, e si risolve.
• Prova sempre un carattere in un paragrafo vero, non solo in un titolo grande.
• Se il sito mostra codici o prezzi, controlla che numeri e lettere ambigue si distinguano.

Domande frequenti

Se stai definendo l’identità visiva del tuo progetto, la scelta dei caratteri è uno dei pezzi che restano per anni: ne parliamo nelle pagine typography e brand e visual identity. Se invece il tema è la resa del sito nel suo insieme, si parte da siti web.

Se vuoi che ne parliamo, scrivici.