Font per siti web: come scegliere quelli giusti

La tipografia è il 90% del web: prima di colori, animazioni e foto, gli utenti leggono. La scelta dei font impatta percezione del brand, usabilità e conversioni. L’obiettivo non è stupire: è far scorrere i contenuti senza attrito, con gerarchia chiara e tempi di caricamento leggeri.

Leggibilità: la base di ogni scelta

Prediligi famiglie moderne con buona x-height (altezza delle minuscole), pesi equilibrati e disegno pulito su schermi piccoli. Per testi lunghi usa dimensione base tra 16 e 18px e interlinea tra 1,4 e 1,6: l’occhio non “salta” tra le righe. Evita pesi troppo leggeri su sfondi chiari e lettere eccessivamente condensate: stancano in fretta.

• Lunghezza riga ideale: circa 60–75 caratteri per paragrafi blog.
• Allineamento: sinistra per body; centrato solo per titoli brevi o hero.
• Contrasto colore: rispetta WCAG AA (4,5:1 per testo normale).

Voce del brand: cosa comunica ogni famiglia

Il carattere racconta chi sei:

• Sans-serif (Inter, Source Sans, DM Sans): contemporanea, neutra, ottima per UI e testi lunghi.
• Serif (Lora, Merriweather, Fraunces): autorevolezza, editoriale, calore.
• Display: solo titoli, in dosi minime; mai per paragrafi.
• Variable fonts: un file, più assi di peso/larghezza; meno richieste HTTP se configurati bene.

Coerenza > originalità estrema: un sito corporate con font eccentrico in body può sembrare poco affidabile.

Gerarchia tipografica semplice

Due livelli bastano spesso: titoli e testo. Aggiungi un terzo per micro-titoli o callout. Usa 2–3 pesi (Regular, Medium/Semibold, Bold) e scala in rem per proporzioni stabili su mobile.

Esempio scala:

• h1: 2–2,5rem
• h2: 1,5–1,75rem
• body: 1rem (16px)
• small/caption: 0,875rem

Il lettore deve capire a colpo d’occhio dove iniziare e cosa è secondario.

Google Fonts e servizi simili

Google Fonts è la scelta più diffusa: catalogo ampio, integrazione semplice, CDN veloce. Buone pratiche:

• Seleziona solo i pesi usati (es. 400, 600, 700), non l’intera famiglia.
• Preferisci subset latin se non servono altri alfabeti.
• Valuta font-display: swap per evitare testo invisibile durante il caricamento.
• Alternative: Fontshare (gratuito commerciale), Adobe Fonts (con licenza Creative Cloud), self-host per controllo totale.

Self-hosting (file WOFF2 sul tuo server) migliora privacy e controllo cache, a costo di aggiornamenti manuali.

Licenze: cosa verificare prima del go-live

Non tutti i font sono liberi per ogni uso. Controlla sempre:

• Licenza desktop vs web: un font comprato per Photoshop non basta per @font-face sul sito.
• Traffico/pageviews: alcuni foundry (es. alcuni piani commerciali) limitano impressioni.
• Embedding in app/PDF: regole diverse dal sito.
• Google Fonts / Fontshare: in genere open source o SIL Open Font License; comunque leggi la scheda del font.

Per clienti enterprise, conserva screenshot o PDF della licenza nel fascicolo progetto.

Prestazioni: i font pesano se li ignori

I font possono costare più delle immagini se caricati male:

• Formato WOFF2 come standard.
• font-display: swap + fallback di sistema simili (es. system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif).
• Preload solo per il peso critico above the fold (es. Regular 400 del body).
• Evita 5 famiglie e 12 pesi: ogni file aggiunge latenza.

Strumenti: Lighthouse, WebPageTest, pannello Network dei DevTools per vedere KB e waterfall.

Test su mobile e device reali

Il design tipografico si valida su telefoni economici, non solo su monitor 27 pollici:

• Verifica dimensioni minime tap target (44px) su bottoni con testo.
• Controlla overflow orizzontale su titoli lunghi (hyphens, word-break con cautela).
• Prova soletta e modalità risparmio energetico: contrasto e peso devono reggere.
• Leggi un paragrafo reale ad alta voce: se perdi il filo, l’interlinea o la larghezza colonna è sbagliata.

Abbinamenti senza rischio

Combinazioni solide e pronte:

• Inter (testo) + Lora (titoli): modernità e calore editoriale.
• Source Sans 3 sola, 3 pesi: pulita, versatile, zero frizioni.
• Outfit (titoli) + Inter (testi): geometrica ma leggibile.
• DM Sans + DM Serif Display: famiglia coordinata per brand curati.

Regola: massimo due famiglie (tre solo se il display è minimo). Più coerenza, meno peso, manutenzione più semplice.

Accessibilità e micro-tipografia

• Evita paragrafi interamente in maiuscolo; su bottoni aumenta letter-spacing.
• Non usare il colore come unica distinzione tra link e testo.
• Heading in ordine logico (h1 → h2 → h3) per screen reader.

Workflow consigliato in progetto

• Scegli font e pesi in Figma con testi reali del cliente.
• Esporta/specifica CSS con fallback e token (--font-body, --font-heading).
• Misura performance pre e post go-live.
• Dopo 30 giorni, rivedi analytics: tempo on page e scroll depth su pagine testuali.

In sintesi: una sans affidabile per i copy, eventualmente una serif morbida per i titoli, pochi pesi, licenza chiara, caricamento ottimizzato e test mobile. La tipografia non deve farsi notare: deve far lavorare bene i contenuti e la tua identità.