Scegliere i font per il tuo sito: leggibilità, personalità e velocità

Un buon font per il web è prima di tutto leggibile, poi adatto al tuo brand e infine leggero per la velocità della pagina. I caratteri hanno una personalità — le lettere con grazie spesso sembrano tradizionali e quelle senza grazie arrotondate sembrano cordiali — ma queste impressioni sono più tenui di quanto sembri e la leggibilità vince sempre. Due font, un corpo del testo di almeno 16 pixel e pochi file di font bastano per la maggior parte dei siti aziendali.

Punti chiave

• La leggibilità batte la personalità: scegli un font pulito per il testo e metti il carattere nei titoli.
• Usa al massimo due famiglie di font, e pochi pesi, per un aspetto più calmo e una pagina più veloce.
• Il testo deve essere di almeno 16 pixel con un'interlinea generosa.
• I font sono file che ogni visitatore scarica, quindi influiscono sulla velocità e sulla stabilità del layout.
• Gli stessi font dovrebbero comparire nel sito, nei documenti e nelle presentazioni.

Cosa comunicano i font

I caratteri con grazie (serif), con piccoli tratti alle estremità delle lettere, tendono a sembrare autorevoli ed editoriali. I caratteri senza grazie (sans-serif) sembrano moderni e diretti. Le forme arrotondate sembrano cordiali, e le lettere strette e in grassetto sembrano rumorose. Studi legali e società di consulenza spesso preferiscono titoli con grazie, mentre aziende di software e studi di design scelgono spesso sans-serif geometrici.

Sono tendenze, e un designer esperto può infrangerle di proposito. Considera la personalità un motivo per scegliere tra due font leggibili, non un motivo per accettarne uno difficile da leggere.

Decide la leggibilità

I visitatori scorrono con lo sguardo prima di leggere, e ogni piccolo ostacolo costa attenzione. Per il testo, scegli un font con forme chiare, spaziatura aperta e caratteri ben distinti, così una I maiuscola e una l minuscola non si somigliano. Imposta una dimensione di almeno 16 pixel, un'interlinea di circa 1,5 e righe di lunghezza comoda, all'incirca da 50 a 75 caratteri.

Anche qui conta il contrasto. Il nostro articolo sulla psicologia del colore tratta il rapporto 4,5 a 1 per il testo normale. Tieni inoltre il testo allineato a sinistra, perché il testo giustificato crea spazi irregolari che rendono la lettura più faticosa.

Abbinamenti: fermati a due

Un approccio comune è un font per i titoli e uno per il testo, scelti per contrastare. Un titolo con grazie e un testo senza grazie è un abbinamento classico, come anche il contrario. Usa una sola famiglia con più pesi se vuoi l'opzione più sicura. Più di due famiglie fanno sembrare un sito improvvisato e aggiungono peso al download.

Usa dimensione, peso e spaziatura per creare gerarchia, non font in più.

Font e velocità

Ogni file di font che un visitatore scarica costa tempo. Ogni peso e stile è un file separato, quindi una famiglia caricata in sei pesi significa sei download. Carica solo i pesi che usi, preferisci formati moderni come WOFF2 e ospita i file sul tuo dominio quando la licenza lo consente, evitando così una connessione in più verso terzi.

Il caricamento dei font influisce anche sulla stabilità del layout. Se un font di riserva viene sostituito da quello vero dopo che la pagina è apparsa, il testo può saltare, e questo pesa sul Cumulative Layout Shift. La soglia di Google per un buon punteggio è 0,1 o meno. Impostare il font in modo che mostri subito una riserva e scegliere una riserva con proporzioni simili riduce il salto. La nostra guida alla velocità del sito spiega queste metriche.

Licenze e coerenza

Controlla la licenza prima di usare un font. Molti font sono gratuiti per l'uso web con una licenza aperta, mentre altri richiedono una licenza a pagamento che copra i siti. Conserva i dati della licenza insieme ai file del brand.

Poi usa gli stessi font nel sito, nei documenti, nelle proposte e nelle slide. Se un programma non ha il tuo font, indica un'alternativa simile nella guida del brand. Il nostro articolo sui sistemi di marca spiega perché questa coerenza crea riconoscibilità.

Una ricetta semplice

Scegli un font leggibile per il testo e uno per i titoli, oppure una sola famiglia per entrambi. Imposta il testo a 16 pixel o più con interlinea 1,5, carica solo i pesi che ti servono e prova il risultato su uno smartphone. Se vuoi un secondo parere, il nostro audit gratuito del sito controlla velocità e layout, e una call conoscitiva gratuita di 30 minuti è il momento per parlare di un rinnovo del brand. Guarda i nostri servizi per vedere come costruiamo brand e sito insieme.