Introduzione: l’importanza della tipografia nel web design moderno
La tipografia è molto più di una scelta estetica: influenza leggibilità, usabilità, accessibilità, prestazioni e perfino SEO. Un font sbagliato può compromettere l’esperienza utente e penalizzare i Core Web Vitals, mentre una tipografia ottimizzata contribuisce a contenuti chiari, scansionabili e veloci da caricare. Per un approfondimento generale puoi consultare anche “L’Importanza della Tipografia nel Web Design” di CyberAlchimista.
1. Come scegliere il font giusto per un sito web
1.1 Criteri di leggibilità
- x-height generosa e tratti aperti favoriscono la lettura su display ad alta densità.
- Contrasto tra peso del carattere e sfondo: fondamentale per WCAG 2.2 AA.
- Spaziatura (letter-spacing e line-height) adattata alla dimensione del corpo testo (rem o clamp()).
1.2 Gerarchia visiva
Organizza i contenuti con scale modulari (es. 1.250 – 1.333) usando varianti weight e style anziché caricare più famiglie tipografiche. Integra la gerarchia con utility class o token di design; vedi anche la guida “CSS Subgrid: la guida completa” per layout coerenti.
1.3 Personalità del brand
- Font sans-serif geometrici (es. Poppins, Inter) ⇒ modernità e tech-friendly.
- Serif transizionali (es. Merriweather) ⇒ autorevolezza e lunga lettura.
- Display ⇒ usali solo per headline, mai in corpo 14–16 px.
Crea un moodboard tipografico, testandolo con contenuti reali e diverse viewport.
2. Font di sistema vs font custom
| Aspetto | Font di sistema (System) | Font custom (Webfont) |
|---|---|---|
| Performance | Caricamento zero; ottimo per LCP e TTFB | Richiede download; ottimizzabile con WOFF2 & preload |
| Coerenza cross-device | Varia tra OS; possibile text reflow | Aspetto uniforme su tutti i device |
| Brand identity | Limitata alla libreria di sistema | Massima personalizzazione |
| Privacy | Nessun call a CDN esterni | CDN (Google Fonts), auto-hosting consigliato |
| Flessibilità | Poche varianti weight/style | Variable font → 1 file, infinite istanze |
Quando scegliere cosa
- Landing page ad alta priorità di performance? → Font di sistema.
- Brand con linee guida rigide o UI data-heavy? → Font custom, preferibilmente variable.
3. Tecniche di ottimizzazione dei font
3.1 Formati consigliati
- WOFF2: migliore compressione Brotli; supporto 97 % (caniuse.com).
- Variable font (TTF/WOFF2): un singolo file con asse wght e ital riduce richieste HTTP.
- SVG/EOT/TFF: deprecati → evita.
/* Esempio @font-face con variable font self-hosted */
@font-face {
font-family: 'Inter var';
src: url('/fonts/Inter.var.woff2') format('woff2-variations');
font-weight: 100 900; /* intervallo asse wght */
font-display: optional; /* fallback rapido senza FOUT */
}
3.2 Preload, Preconnect e Lazy Load
- Preconnect al dominio del font CDN:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Preload dei pesi critici (pesi per above-the-fold):
<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter-regular.woff2" crossorigin> - Lazy Load dei pesi non essenziali (italic, extra-bold) con font-display: optional o
@mediaquery.
Per la pipeline completa vedi “Checklist SEO tecnica per sviluppatori frontend”.
3.3 Minimizzare FOUT/FOIT
- font-display: swap|optional mostra fallback immediato.
- Critical FOFT (Flash of Faux Text) con font-subset per charset latin e caricamento progressivo.
- CSS
unicode-rangeper suddividere file per script (latin-ext, cyrillic).
4. Best practice
4.1 Numero massimo di font
- Famiglie: max 2 (primary + secondary).
- Varianti: variable font preferito; in alternativa ≤ 4 file (regular, bold, italic, bold-italic).
4.2 Peso dei file
- Obiettivo < 250 KB complessivi (gzip/Brotli).
- Rimozione glifi inutilizzati con GlyphHanger o Google Fonts subset.
4.3 Accessibilità e tipografia
- line-height minimo 1.4 em.
- Contrast ratio ≥ 4.5:1 corpo, 3:1 headings → verifica con Lighthouse.
- Evita all-caps in testi lunghi; interferisce con interfacce di lettura assistita.
- Gestisci stato focus con
outline-offsete colori visibili; approfondisci su “Come usare aria-label e aria-hidden per migliorare l’accessibilità”.
Conclusione
Una tipografia curata combina scelte estetiche, prestazioni e accessibilità. Con i formati moderni (WOFF2, variable font), tecniche di preload e un numero ridotto di file, puoi migliorare LCP, ridurre FOUT e offrire un’esperienza coerente su tutti i device.
Vuoi spingere ancora oltre le performance? Dai un’occhiata alla guida “Ottimizzare le immagini con picture e srcset: guida pratica per performance web”.
