La tipografia è il principale strumento di comunicazione del design web. Determina leggibilità, gerarchia informativa e personalità del brand. Un errore tipografico — font troppo piccolo, contrasto insufficiente, interlinea sbagliata — può distruggere l'esperienza utente indipendentemente da quanto bello sia il resto del design. Nei progetti che seguiamo, la tipografia è la prima cosa che sistemiamo nelle analisi di UX perché è spesso la prima causa di bounce rate elevato nei siti italiani.
Gerarchia tipografica: i 5 livelli
- Display (H1): 48-96px, peso bold, max 1-2 parole/riga su desktop
- Heading (H2): 32-48px, peso semibold, titoli di sezione
- Subheading (H3): 20-28px, struttura del contenuto interno
- Body: 16-18px, interlinea 1.5-1.7, max 70-80 caratteri per riga
- Caption/label: 12-14px, uppercase con letter-spacing per leggibilità
La gerarchia tipografica funziona per contrasto: ogni livello deve essere percettivamente distinto dal precedente. Se il tuo H2 è 22px e il body è 16px, la differenza è troppo piccola per creare una gerarchia chiara. La regola del "fattore scala": ogni livello dovrebbe avere una dimensione circa 1.25-1.67 volte quella del livello successivo (la "scala aurea" e la "scala perfetta quarta" sono due opzioni diffuse). Scale tipografiche predefinite come quelle di Type Scale (typescale.com) possono accelerare questa decisione.
Contrast ratio: l'accessibilità come vincolo di design
Le linee guida WCAG 2.1 AA richiedono un contrast ratio minimo di 4.5:1 per testo normale (sotto i 18px) e 3:1 per testo grande (sopra i 18px bold o 24px). Il grigio chiaro su bianco (#999 su #fff = 2.85:1) è un fail frequente. Usa strumenti come WebAIM Contrast Checker o il plugin Figma "Contrast" durante la fase di design. I design token di colore devono documentare i ratio per ogni coppia testo/background. Questo non è solo un requisito legale per alcuni settori — è una questione di rispetto verso i tuoi utenti.
Un aspetto meno discusso è il contrasto in condizioni ambientali difficili: schermo all'aperto in pieno sole, schermo con riflessi, utente con ridotta acuità visiva temporanea (stanchezza, luce insufficiente). In queste condizioni i ratio WCAG AA di 4.5:1 sono il minimo — idealmente si punta a 7:1 (standard AAA) per il testo del corpo. Dalla nostra esperienza nei progetti e-commerce italiani, aumentare il contrasto del testo del prodotto riduce il tempo di lettura e aumenta il tasso di aggiunta al carrello, perché l'utente arriva alla decisione con meno fatica cognitiva.
Font pairing: principi professionali
La combinazione di font è un'arte con regole precise. La strategia più sicura è abbinare un serif per i titoli a un sans-serif per il corpo (es. Playfair Display + Inter), o due sans-serif con personalità diverse (Syne + DM Sans). Limita sempre a 2-3 family per sito. Evita: font "grafici" per il corpo testo, più di 3 pesi diversi nella stessa sezione, dimensioni che variano meno di 4pt tra livelli di gerarchia. La regola del "contrasto di personalità": il testo display deve avere una personalità forte, il corpo deve essere quasi neutro per non interferire con la lettura.
Le Google Fonts restano la soluzione più rapida per la maggior parte dei progetti, ma per brand premium consigliamo font con licenza completa da foundry come Klim, Commercial Type, o Fonts In Use. La differenza tecnica è che le Google Fonts vengono caricate da server di Google (con implicazioni privacy GDPR in Europa — la soluzione è ospitare i font in self-hosting), mentre i font acquistati da foundry vengono ospitati direttamente sul tuo server. Per performance, il self-hosting di font con `font-display: swap` e preload è sempre la scelta migliore indipendentemente dalla fonte.
Fluid typography con CSS clamp()
La fluid typography usa `clamp(min, preferred, max)` per scalare le dimensioni dei font fluidamente tra breakpoint. Esempio: `font-size: clamp(2rem, 5vw, 4rem)` per un heading che va da 32px su mobile a 64px su desktop senza breakpoint rigidi. Questo approccio, combinato con i design token in Figma, garantisce che il layout si adatti perfettamente a qualsiasi viewport. Strumenti come Utopia (utopia.fyi) generano automaticamente le coppie di valori clamp() per un'intera scala tipografica, partendo da due set di valori (minimo e massimo).
La fluid typography risolve un problema reale: con i breakpoint tradizionali (`@media (min-width: 768px)`) ci sono salti bruschi nelle dimensioni dei font che a determinate larghezze di schermo producono layout disordinati. Con `clamp()` la transizione è continua. Lo applichiamo sistematicamente nei nostri progetti di realizzazione siti web e lo combiniamo con fluid spacing per le spaziature tra sezioni.
Leggibilità: le variabili che i designer dimenticano
- Line-height (interlinea): 1.4-1.6 per il corpo (non px fissi — valori relativi per adattarsi alla dimensione del font)
- Line-length (misura): 45-75 caratteri per riga ottimale per la lettura (usa `max-width: 70ch` per il contenuto)
- Letter-spacing: 0 o leggermente positivo per il corpo, negativo per heading grandi (migliora la coesione visiva)
- Word-spacing: raramente modificato, ma un lieve aumento migliora la leggibilità per utenti dislessici
- Text-rendering: `optimizeLegibility` per titoli, `geometricPrecision` per testi piccoli
- Hyphens: `hyphens: auto` per colonne di testo giustificato (evita "fiumi" bianchi)
Il nostro processo tipografico
In ogni progetto di realizzazione siti web e branding, la definizione della scala tipografica è uno dei primi deliverable del designer. La scala viene definita in Figma come design token (usando variabili di testo per font family, size, weight, line-height, letter-spacing) e poi esportata come CSS custom properties. Questo garantisce che la tipografia sia coerente in tutto il sito e facilmente aggiornabile in futuro. Per discutere le esigenze tipografiche del tuo progetto, visita la nostra pagina contatti.
