Il primo cliente con cui ho davvero capito quanto pesi la tipografia mi aveva consegnato un sito che era "brutto, ma non so dirti perché". Era un sito ordinato, con foto belle, colori coerenti. Però respingeva. Ci ho lavorato sopra senza toccare nient'altro: solo font, dimensioni, interlinea, scala. Il sito è diventato bello. Lui era convinto che avessi cambiato tutto.

Perché conta più di tutto

Un sito web è, al 95%, testo. Anche quelli pieni di foto. Anche quelli con video in homepage. Persino i siti più "visuali" che vedi premiati su Awwwards: contano le parole, i titoli, i tagline, le micro-copy, le label dei bottoni, gli alt text. Tutto è testo, e tutto passa attraverso la tipografia.

Questo significa che la scelta dei font, delle dimensioni, dei pesi, degli interspazi non è una decorazione: è la materia prima del progetto. Sbagliarla equivale a costruire una casa con i mattoni storti, tutto il resto seguirà.

Il colore lo noti per primo. La tipografia la senti.

Due famiglie, massimo tre

La regola che applico in quasi tutti i progetti: un serif per i titoli, un sans-serif per il body, eventualmente un terzo font monospace per i dettagli (numeri, codici, etichette piccole). Tre famiglie, scelte per contrasto e non per somiglianza.

Sul sito che stai leggendo ad esempio:

L'errore comune è scegliere font troppo simili. Due grotesque diversi danno un risultato sciatto: sembrano lo stesso font malriuscito. Sceglili apertamente diversi: serif vs sans, condensato vs largo, contemporaneo vs classico.

Una scala tipografica, non una collezione di dimensioni

Il secondo errore tipico: usare dimensioni a caso. 14px per il body, 22px per quel titolo, 18px per quell'altro, 28px per quell'altro ancora. Risultato: caos visivo.

La soluzione è una scala tipografica: 5–7 dimensioni totali, scelte con un rapporto matematico (per esempio il rapporto aureo, 1.618, o un più sobrio 1.25). Ogni testo del sito deve essere una di quelle dimensioni, niente eccezioni.

Un esempio di scala che uso spesso (in rem, base 16px):

--text-xs: 0.75rem /* 12px, micro-label */
--text-sm: 0.875rem /* 14px, caption */
--text-base: 1rem /* 16px, body */
--text-lg: 1.25rem /* 20px, lead paragraph */
--text-xl: 2rem /* 32px, h3 */
--text-2xl: 3.5rem /* 56px, h2 */
--text-3xl: 6.5rem /* 104px, h1 */

Una scala ti dà gerarchia visiva: l'occhio capisce subito cosa è importante. E ti vincola a usare meno dimensioni: meno scelte, più coerenza.

Spazio bianco e interlinea

Una buona tipografia non è solo "quale font", è anche, e soprattutto, "quanto spazio intorno". Le tre dimensioni che faccio sempre un passo in più rispetto al default:

Tipografia di contesto, non di moda

L'ultimo punto è il più importante. I font non sono neutri: portano carico culturale, storico, emotivo. Cormorant Garamond non ha lo stesso "sapore" di Helvetica, anche se entrambi possono comunicare professionalità.

Per uno studio legale userò un serif classico, Garamond, Sabon, Caslon. Per una startup tech, un grotesque contemporaneo, Inter, Manrope, Söhne. Per una pasticceria artigianale qualcosa che suggerisca lavoro a mano, Fraunces, Recoleta, EB Garamond. Per un brand di scarpe sportive, un sans condensato e atletico, Druk, Migra, Right Grotesk.

Il font deve parlare la lingua del progetto. Una tipografia generica può "funzionare", ma una tipografia specifica trasforma il sito in qualcosa di memorabile.

Se devo dare un consiglio per chi sta scegliendo un font oggi: passa più tempo a sceglierne due bene che a setupparne sei male. Tutto il resto seguirà.

Ti aiuto a scegliere la tipografia giusta per il tuo progetto? Scrivimi, possiamo iniziare con due proposte di accoppiate font.