Il progetto di un sito web parte dalla definizione degli obiettivi e dall’analisi del pubblico al quale si rivolge. Quando poi si arriva ai dettagli, può accadere che un elemento importante come la scelta del carattere tipografico venga sottovalutata, a favore di altri elementi come i contenuti e le immagini.
Invece, bisogna tener presente che la rappresentazione visiva dei caratteri incide sulla comunicazione, rafforza il tono di voce e amplifica il brand.
Criteri di scelta dei font
Siamo coerenti con il tono di voce
I caratteri tipografici che andremo a utilizzare devono essere coerenti con il tono di voce che intendiamo utilizzare nella nostra comunicazione.
Esistono caratteri tipografici sofisticati, di moda, che suscitano emozioni, avventurosi, che ispirano fiducia e sicurezza, dobbiamo valutare quali sono quelli maggiormente adatti.
Se non abbiamo idee creative, possiamo consultare case study importanti, pubblicati e descritti dal sito FontsInUse.
Stabiliamo i gradi di importanza
Per i contenuti da pubblicare sul sito web, dobbiamo scegliere caratteri tipografici da utilizzare per il testo e per i titoli (o intestazioni). Esiste una gerarchia dei titoli, quello principale di livello 1, e quelli secondari che iniziano dal livello 2 e si nidificano con i livelli successivi fino al sesto livello.
Per comprendere meglio, possiamo immaginare una pagina web ricca di contenuti come se fosse un piccolo libro. L’intestazione di primo livello possiamo immaginarla come il titolo del libro, le intestazioni di secondo livello i capitoli principali del libro, quelle di terzo livello i sotto-capitoli. E poi c’è il testo del libro.
La nostra pagina web avrà quindi un titolo principale, potrebbe poi avere intestazioni a partire dal secondo livello. Dobbiamo quindi scegliere il carattere tipografico da utilizzare per ogni livello di intestazione e per il testo.
Si può utilizzare un unico carattere tipografico per tutto, oppure differenziare la scelta tra le intestazioni e il testo, o ancora scegliere un carattere tipografico per la sola intestazione principale, uno per gli altri livelli di intestazione e uno per il testo.
Di norma per un sito web è bene non scegliere più di 3 caratteri tipografici diversi.
Caratteristiche tipografiche per il web
Prima di esaminare quali sono le scelte migliori per i vari livelli di intestazione e per il testo, parliamo delle caratteristiche tipografiche, che di fatto guideranno le nostre scelte:
- Leggibilità: è una misura che indica quanto facile sia leggere un testo scritto in un determinato carattere tipografico. E’ un dato oggettivo, che si calcola dal rapporto tra l’occhiello (x) e il corpo (y) del carattere tipografico, come indicato in figura. Se il rapporto x/y è pari a 0,6 o superiore, il carattere tipografico in esame lo possiamo considerare facilmente leggibile.
- Tipi di carattere tipografico:
- Serif: si riconoscono perché alla fine dei tratti hanno dei piccoli abbellimenti, che li rendono classici ed eleganti (es. Roboto, Noto serif).
- Sans serif: opposti ai Serif, mancano degli abbellimenti, sono puliti, modermi, lineari (es. Helvetica, Open sans).
- Handwriting: cercano di riprodurre la scrittura a mano libera (es. Pacifico, Parisienne, Rochester)
- Display: sono caratteri tipografici di forte impatto, importanti, suggestivi (es. Carter One, Lemon, Fascinate Inline)
- Fruibilità: si ottiene applicando una serie di linee guida che permettono di migliorare l’esperienza utente, rendono più gratificante leggere i contenuti di una pagina web. Vediamo le principali:
- allineamento a sinistra: migliora la lettura, consiste nell’allineare le righe di testo sul lato sinistro e lasciarle libere sul lato destro;
- interlinea: consiste nell’aumentare la distanza tra due righe consecutive di testo (valore ottimale 150%)
- spazi vuoti: lasciare ai lati del testo e tra i paragrafi uno spazio vuoto permette di affrontare meglio la lettura
Come scegliere il font per il titolo principale di una pagina web
Si tratta di un’unica intestazione che appare all’inizio della pagina web, e ne rappresenta il titolo principale.
Dovremo scegliere una dimensione adeguata (54 pixel) e un carattere tipografico importante e coerente con il nostro tono di voce. Per le intestazioni, specie quelle di primo livello, non è necessario scegliere per forza un’alta leggibilità, perché la grande dimensione facilità la lettura, e poi il titolo principale di una pagina web non è lungo.
L’intestazione di primo livello spesso può utilizzare un carattere tipografico differente dalle altre intestazioni, grazie alla sua natura di titolo principale e unico di ogni pagina web.
Come scegliere i font dei titoli di livello inferiore
Se vogliamo differenziare i titoli di livello inferiore rispetto al titolo pagina, non solo per il fatto che sono più piccoli, allora possiamo scegliere per loro un carattere tipografico diverso.
Le intestazione più piccole possono suggerire la scelta di caratteri tipografici maggiormente leggibili rispetto a quella di primo livello.
Le dimensioni suggerite per queste intestazioni sono di 40 pixel per il livello 2, di 32 pixel per il livello 3, e ancora inferiori per gli altri livelli, che arrivano nel web fino al livello 6, e che tuttavia sono raramente utilizzati.
Come scegliere il font per il testo di una pagina web
Questo carattere tipografico sarà utilizzato per la maggior parte del contenuto testuale del sito web. Stiamo quindi parlando di sintesi, paragrafi, citazioni, articoli, descrizione di prodotti e così via.
In questo caso l’elevata leggibilità è d’obbligo, sia perché la dimensione del carattere non sarà grande, di solito da 14 a 20 pixel, e per il fatto che il testo da leggere sarà molto.
La difficoltà di lettura non sarebbe tollerata a lungo dal lettore, infatti i font troppo decorati sono più difficili da leggere se applicati su lunghi tratti di testo.
Le considerazioni fatte, per le intestazioni e per il testo, devono valere per tutti i tipi di dispositivo, desktop, tablet e mobile.
