Font per siti web leggibili: come scegliere tipografia e impostazioni
Come scegliere font per siti web leggibili senza sacrificare identità e performance? Il nome del carattere è soltanto una parte. Dimensione, peso, spaziatura, lunghezza della riga, contrasto, dispositivo e qualità del rendering determinano quanto facilmente una persona riesce a leggere e agire.
Un font elegante in una tavola grafica può diventare faticoso in una pagina mobile, in un modulo o con contenuti lunghi. La scelta va quindi provata nell’interfaccia reale, con testi, lingue e stati diversi.
Font leggibile e font accessibile non sono sinonimi perfetti
La leggibilità riguarda la facilità con cui distinguiamo caratteri, parole e righe. L’accessibilità considera anche ridimensionamento, contrasto, zoom, preferenze dell’utente e tecnologie assistive. Un progetto efficace tratta entrambi come requisiti.
Le WCAG 2.2 non impongono una famiglia tipografica, ma definiscono criteri su contrasto, ridimensionamento e spaziatura che l’interfaccia deve sostenere senza perdita di contenuto o funzionalità.
Come scegliere font per siti web leggibili
Parti dai contesti più difficili: smartphone piccolo, luce intensa, testo lungo, modulo con errori, numeri simili, lingua con accenti e utente che aumenta la dimensione. Valuta le forme prima del gusto.
| Criterio | Che cosa osservare | Rischio |
|---|---|---|
| Distinzione | l/I/1, O/0, rn/m e punteggiatura | Errori di lettura in codici e dati |
| Altezza x | Dimensione percepita delle minuscole | Testo piccolo pur con stessi pixel |
| Pesi | Differenza reale tra regular e bold | Gerarchia debole o testo troppo scuro |
| Set caratteri | Accenti, simboli, valute, lingue | Fallback incoerenti e glifi mancanti |
| Numeri | Allineamento e distinguibilità | Tabelle e prezzi difficili da confrontare |
Dimensione del testo e scala tipografica
Per il corpo testo sul web, 16 px è un punto di partenza frequente, non una garanzia. La dimensione percepita dipende dal font, dal dispositivo e dalla densità. Prova 16–18 px nel layout reale e consenti al browser di ridimensionare.
Costruisci una scala limitata per titoli, corpo, note e controlli. Differenzia i livelli con dimensione, peso e spazio, senza affidarti solo al colore. Evita salti eccessivi che occupano lo schermo mobile senza migliorare l’orientamento.
Interlinea e spazio tra paragrafi
Per testi continui, un’interlinea attorno a 1,5 volte la dimensione può essere un buon punto di partenza. Font, larghezza della colonna e lingua possono richiedere correzioni. Titoli grandi hanno spesso bisogno di un rapporto più compatto.
Usa spazio tra paragrafi per rendere visibili i blocchi e non simulare separazioni con righe vuote inserite nel contenuto. Verifica che l’interfaccia regga le personalizzazioni previste dal criterio WCAG sulla text spacing.
Lunghezza della riga
Righe troppo lunghe rendono difficile trovare l’inizio successivo; righe troppo corte spezzano il ritmo. Per testi continui, circa 45–75 caratteri per riga è un intervallo spesso efficace. Non fissare la colonna in pixel rigidi: usa unità relative e una max-width.
Su mobile la larghezza è limitata, quindi margini, dimensione e parole lunghe diventano decisivi. Evita giustificazione piena, che può creare spazi irregolari, soprattutto senza sillabazione controllata.
Contrasto: testo, fondo e stati
Controlla il rapporto di contrasto per corpo, titoli, link, placeholder, testo disabilitato e messaggi. Il grigio chiaro può sembrare elegante su uno schermo da studio e diventare invisibile all’aperto.
Il contrasto non risolve tutto: un peso molto sottile può perdere leggibilità anche con colori teoricamente conformi. Testa font e peso sul sistema operativo e sul browser usati dal pubblico.
Mobile, zoom e orientamento
Verifica pagine a 320 CSS pixel di larghezza e con zoom del testo. Menu, tabelle, pulsanti e moduli devono adattarsi senza sovrapporre o tagliare informazioni. Non bloccare il pinch-to-zoom.
Osserva anche tastiera virtuale e campi: etichette, testo inserito, aiuti ed errori devono restare leggibili quando lo spazio si riduce.
Font di sistema, web font e variable font
I font di sistema riducono richieste e tempi di caricamento, ma cambiano tra piattaforme. I web font offrono maggiore controllo sull’identità, richiedendo file, licenze, subset e strategia di caricamento. I variable font possono combinare più pesi in un file, ma vanno confrontati sul caso reale.
Limita famiglie e pesi. Se un progetto usa due famiglie e sei pesi per ragioni decorative, aumenta costo senza necessariamente migliorare la gerarchia.
Performance e caricamento
Usa formati moderni come WOFF2, precarica solo i file davvero critici e configura font-display in base alla priorità. Un fallback con metriche molto diverse può causare spostamenti del layout quando arriva il font finale.
Le risorse di web.dev approfondiscono caricamento dei font e Core Web Vitals. Misura su rete mobile e cache vuota, non soltanto sul computer di sviluppo.
Fallback e progressive enhancement
Definisci uno stack di fallback con caratteristiche simili. Prova il sito bloccando i font esterni: contenuti, controlli e gerarchie devono restare utilizzabili.
Per ridurre il salto, valuta proprietà CSS che regolano metriche del fallback, ma mantieni il sistema semplice. Una soluzione fragile per ottenere una corrispondenza perfetta può diventare difficile da manutenere.
Gerarchia e semantica
La gerarchia visiva deve corrispondere alla struttura HTML. Non usare un paragrafo enorme al posto di un titolo né scegliere un livello heading per la sua dimensione predefinita. Screen reader, motori di ricerca e utenti da tastiera beneficiano di una struttura corretta.
Link e pulsanti devono essere riconoscibili non solo dal colore. Mantieni stati hover, focus, active e visited coerenti e visibili.
Un test pratico prima di approvare il font
- Crea una pagina con titolo, paragrafo lungo, elenco, tabella, form, errore e pulsanti.
- Inserisci contenuti reali, numeri, accenti e parole lunghe.
- Prova desktop, smartphone e almeno due sistemi operativi.
- Aumenta zoom e spaziatura del testo.
- Simula caricamento lento e font non disponibile.
- Controlla contrasto, focus e stati interattivi.
- Chiedi a persone esterne di trovare informazioni e completare un compito.
Errori frequenti
- Scegliere il carattere solo dal logo o da un’immagine campione.
- Usare corpo piccolo e grigio chiaro per “eleganza”.
- Caricare famiglie e pesi non utilizzati.
- Impostare altezza fissa su blocchi che contengono testo.
- Bloccare zoom o ridimensionamento.
- Ignorare accenti, simboli e lingue del pubblico.
- Affidare la gerarchia soltanto a colore e dimensione.
- Non testare fallback e caricamento lento.
Checklist: font per siti web leggibili
- Caratteri e numeri simili sono distinguibili?
- Corpo, interlinea e lunghezza di riga funzionano su mobile?
- Contrasto e peso restano leggibili in condizioni reali?
- Zoom e spaziatura non rompono il layout?
- Famiglie, pesi e file sono limitati al necessario?
- Fallback e caricamento evitano testo invisibile e grandi spostamenti?
- La gerarchia visiva corrisponde alla semantica?
Se vuoi definire una tipografia digitale coerente con identità, UX e performance, scopri i miei servizi di grafica e sviluppo web oppure richiedi un confronto.