Perché la Scelta del Font Non È Un Dettaglio
La tipografia è una decisione tecnica prima ancora che estetica. Quando scegli un font per il web, non stai scegliendo solo come le lettere “sembreranno” — stai scegliendo come leggeranno i tuoi contenuti su uno smartphone mentre il sole batte sullo schermo, su un tablet di 10 anni fa, su un monitor 4K di un ufficio.
È la differenza tra un sito che la gente legge e uno che la gente abbandona dopo tre secondi.
Il fatto è questo: un font bellissimo in Figma può trasformarsi in un disastro di leggibilità su browser diversi se non sai cosa stai facendo. Servono regole specifiche per scegliere correttamente.
Leggibilità vs. Legittimità: Non Sono La Stessa Cosa
La leggibilità è quello che succede quando leggi una parola. Dipende dalla forma delle lettere individuali — come una “a” minuscola si distingue da una “o”, quanto spazio c’è dentro la “e”. È una cosa fisica, misurabile.
La legittimità è quella che percepisci quando leggi un intero paragrafo. È la distanza tra le righe, lo spazio tra le parole, il peso del font. Un font può essere perfettamente leggibile carattere per carattere ma diventare impossibile da leggere in blocchi di testo lunghi se lo spazio tra le righe è sbagliato.
Sul web, devi ottimizzare entrambi. E no, non puoi copiare le impostazioni da un font di stampa e aspettarti che funzionino.
Le Tre Regole Che Ogni Font Deve Rispettare
Distinzione Chiara Tra Caratteri Simili
L’1 maiuscola, la l minuscola e la I maiuscola devono essere visibilmente diverse. Stessa cosa per la O e lo 0. Non è vanità — è il fondamento della leggibilità. Un font senza questa caratteristica creerà confusione, soprattutto in contesti dove la precisione conta (liste di codici, indirizzi email, nomi utente).
Spazi Interni Aperti
La “a”, la “e”, la “g” — questi caratteri hanno spazi interni. Più sono aperti, più leggibile il font, specialmente a dimensioni piccole (come i 14px di un paragrafo di testo). Font con spazi interni stretti diventano puntini illeggibili su schermi normali.
Coerenza di Peso Visivo
Quando guardi un font, tutti i caratteri dovrebbero “pesare” allo stesso modo. Se la “m” è visibilmente più scura della “i”, il tuo testo avrà “buchi” che rendono la lettura difficile. È un problema che vedi spesso nei font display usati come body text.
Come Testare un Font Prima di Usarlo
Non puoi fidarti di come un font appare in una demo. Devi testarlo nel contesto reale del tuo progetto. Ecco come farlo correttamente:
Primo: Scarica il font e usalo in una pagina HTML reale con il tuo CSS. Non in Figma, non in una preview online. Nel browser vero.
Secondo: Leggi paragrafi lunghi (almeno 200-300 parole). Non basta una singola riga di titolo. Il tuo corpo testo deve rimanere leggibile per blocchi interi.
Terzo: Testalo su almeno tre dispositivi diversi — un desktop, un tablet, uno smartphone. Le dimensioni cambiano. Quello che funziona a 16px su desktop potrebbe diventare illeggibile a 14px su mobile.
Quarto: Prova il font sia in tema scuro che in tema chiaro. Non tutti i font hanno lo stesso contrasto su background diversi.
Font Consigliati Che Funzionano Davvero
Se sei indeciso, questi font hanno anni di storia sul web e sanno fare il loro lavoro senza sorprese:
Inter
Disegnato specificamente per il web. Spazi interni aperti, distinzione chiara tra caratteri simili, mantiene la leggibilità anche a 12px. Gratis via Google Fonts.
Lora
Un serif che funziona su web. Ha quella eleganza che manca ai serif generici, ma senza sacrificare la leggibilità. Perfetto per blog e articoli lunghi.
IBM Plex Sans
Creato per IBM, pensato per leggibilità in contesti aziendali. Supporta un sacco di lingue (incluso l’italiano) e mantiene coerenza visiva su tutti i pesi.
La vera lezione? Non è il nome del font che importa. Importa che tu capisca perché un font funziona. Una volta che sai cosa cercare, puoi trovare il font giusto per il tuo progetto — che sia un nome famoso o un font locale che nessun altro conosce. La differenza tra un sito che legge bene e uno che non legge affatto non è magia. È scienza.
