La scelta dei caratteri, la loro dimensione e disposizione, la gestione dei paragrafi non sono questioni di web design? Cosa c’entra la titolazione e l’interlinea con lo sviluppo di un sito? In altri termini, di queste cose non dovrebbe occuparsi un grafico?

Ebbene, se il web design si declina nel più ampio concetto di UX design, allora non sembrerà così strano associare la scelta grafica (o meglio visiva) dei caratteri di un contenuto allo sforzo di riportare tale scelta al meglio su una pagina web. Ciò significa semplicemente che lo sviluppatore deve imparare a collaborare con il grafico, per ottenere la migliore esperienza utente possibile (ma la cosa vale anche al contrario). E perché non iniziare proprio dai fondamentali, ossia dalla definizione della tipografia del sito?

Primo requisito: leggibilità

Un testo (o, più in generale, un contenuto) deve innanzitutto essere leggibile. Ma la leggibilità non riguarda soltanto il riuscire a leggere nel modo più agevole e rapido. No, la leggibilità punta anche al piacere e al desiderio del lettore. Magari il desiderio potrà essere acceso da quanto è scritto, ma il piacere dipenderà in gran parte dal design, cioè dalla scelta e dall’accostamento dei caratteri, dal loro spazio reciproco e dalla disposizione nella pagina.

Contrasto

Un testo di colore bianco su sfondo di colore nero sarà sempre meno leggibile di un testo di colore nero su sfondo di colore bianco, perché il secondo caso ha un contrasto maggiore rispetto al primo. Se poi vengono usati i grigi, il contrasto sarà molto probabilmente insufficiente. Quindi, la scelta della palette di colori di un sito risulta molto importante, se non fondamentale, ma questa è un’altra storia.

Ill test

Per scegliere un carattere tipografico (typeface), cioè una famiglia di caratteri, rispetto ad un altro, specialmente per quanto riguarda i titoli, si può usare un primo test molto semplice. Siccome la leggibilità di un testo dipende molto da quanto si riesce a distinguere tra loro le lettere, scelto un typeface potete testarne la leggibilità scrivendo I (i maiuscola) seguita da due l (l minuscola): Ill.
Se non lo sapete il font (o, brivido, la font) fa riferimento alle variazioni degli stili del carattere. Le varianti grassetto, sottile, regolare, corsivo e così via corrispondono ai vari font raccolti dallo stesso typeface.

Quanti caratteri usare?

Si consiglia di non usare più di due caratteri tipografici: l’uno per i titoli e l’altro per il corpo della pagina. In generale, poi, si potrebbe scegliere un carattere con le grazie per la titolazione (ad es., il Playfair Display o il Times New Roman) e uno senza grazie (ad es., l’Open Sans o l’Arial) per i paragrafi. In realtà, un web designer può sempre decidere di usare quanti caratteri vuole, ma più caratteri (o, meglio, varianti, cioè font) si usano, più il caricamento della pagina si rallenta. Qui è il web developer che deve aiutare il grafico a razionalizzare le proprie scelte, per non appesantire inutilmente il sito (così come accade nel caso dei tagli e delle dimensioni delle immagini).

E nel caso di un solo carattere?

In questo caso, può aiutare l’utilizzo di alcune varianti del carattere per aumentare il contrasto tra titoli e gli altri contenuti. Ad esempio, per i titoli principali si potrebbe usare il bold (grassetto), per i sottotitoli il medium e per i paragrafi il light (si noti il passaggio dal medium al light, saltando il regular).
In alternativa, l’evidenziazione potrebbe essere effettuata tramite la dimensione del carattere, moltiplicando per due: 25px per il corpo della pagina, 50px per i sottotitoli e 100px per i titoli.

Le dimensioni e i dispositivi

Siccome al giorno d’oggi non si può più aggirare il discorso dei vari dispositivi che possono visitare un sito, occorre impostare e provare una dimensione di carattere adatta per ognuno di essi.
Una buona regola potrebbe essere: 16-20px a livello di smartphone, 20-24px a livello di tablet e 22-26px a livello di pc desktop. L’unica raccomandazione è quella di non scendere sotto i 16px (anche Google non gradisce i caratteri troppo piccoli a livello mobile).

L’interlinea, ovvero il “respiro”

Lo spazio tra le lettere è importante, ma ancora di più lo è quello tra le righe del testo. Un paragrafo con righe appiccicate l’una sull’altra risulta poco leggibile. In genere, l’interlinea dovrebbe avere un valore che va tra 1,2 e 1,5 volte la dimensione del carattere base. Quindi, se abbiamo una dimensione del testo di 20px, l’interlinea potrà andare da 24px a 30px. Questa variabilità potrebbe anche dipendere dalla lunghezza dei paragrafi: un testo breve può avere un’interlinea bassa, mentre un testo lungo può avere un’interlinea più alta.
Ovviamente, i titoli, che di solito hanno dimensioni molto più grandi del testo normale, non necessitano di una grande interlinea, basta impostare un valore tra 1 e 1,2 volte la grandezza del testo.
È importante dare anche un giusto spazio tra un paragrafo e l’altro. Solitamente, si può prendere come riferimento il valore dell’interlinea. Tuttavia, è consigliabile mantenere un intervallo compreso tra 0,75 e 1,25 volte la dimensione del testo.

Larghezza e allineamento del testo

Può sembrare irrilevante, ma la larghezza di un testo dovrebbe rimanere tra i 40 (paragrafo corto) e i 70 caratteri (paragrafo lungo) per linea, perché, in realtà, i lettori prediligono queste quantità di testo da leggere. Oltre questi limiti, la lettura diventa difficoltosa o, peggio, noiosa.
Per quanto riguarda l’allineamento del testo, conviene allinearlo al margine sinistro (magari, giustificandolo nel caso di un blocco molto lungo). L’allineamento a destra e quello centrato è meglio usarli a piccole dosi, ricordando che sono i titoli quelli che spesso e volentieri sono posti al centro della pagina per dare loro evidenza e incisività.

Conclusione

Partendo dal principio per cui da una buona collaborazione tra sviluppatore e grafico web nascono progetti efficaci, usabili e riconoscibili, la scelta tipografica rimane ancora la prima e basilare operazione per fornire una identità e un valore a qualsiasi sito si voglia realizzare. Il grafico predispone il lato creativo del design, mentre lo sviluppatore offre le soluzioni tecniche migliori (in termini di risorse e di usabilità).
Coniugare bene questi due aspetti rende lo UX design una realtà proficua per chi ha commissionato il sito e per chi lo utilizza.

Qualche spunto e approfondimento:

Come si legge (Jason Santa Maria)

Basi di tipografia per il tuo prossimo progetto (Mark Max Henckel)

The Beginner’s Guide to Typography in Web Design (Jamie Juviler)

Designing for Readability: A Guide to Web Typography (with Infographic) (Jordan DeVos)

A Five-Minute Guide to Better Typography (Pierrick Calvez)