In un'interfaccia la tipografia non è decorazione: è la struttura stessa delle informazioni. Titoli, etichette, valori, note e messaggi di errore sono testo, e il modo in cui sono composti dice all'utente che cosa è importante, che cosa si può cliccare, che cosa può aspettare. Una tipografia confusa produce un'interfaccia confusa, anche con colori e icone perfetti.
Scegliere il carattere
Per le interfacce si usano quasi sempre caratteri senza grazie, progettati per restare nitidi a piccole dimensioni. Alcuni criteri concreti per scegliere:
- lettere ben distinguibili: «Il1», «O0», «rn» e «m» devono essere chiaramente diversi, soprattutto se l'interfaccia mostra codici, password generate o nomi utente;
- altezza della x generosa: un'altezza delle minuscole ampia migliora la lettura a corpi piccoli;
- pesi sufficienti: almeno regolare, medio e grassetto, per costruire la gerarchia senza ricorrere ad altri caratteri;
- cifre adatte: per tabelle e importi servono cifre tabellari, cioè tutte della stessa larghezza, così che le colonne restino allineate;
- copertura linguistica: lettere accentate, simboli di valuta, eventualmente altri alfabeti se il prodotto è internazionale.
I caratteri di sistema, cioè quelli già presenti nel sistema operativo, sono una scelta molto pratica: si caricano subito, sono familiari agli utenti e sono ottimizzati per lo schermo su cui vengono mostrati.
Uno o due caratteri, non di più
Una sola famiglia con diversi pesi basta per la grande maggioranza delle interfacce. Un secondo carattere, per esempio con grazie per i titoli o monospaziato per codici e dati tecnici, può aggiungere personalità o funzione. Oltre i due, il risultato tende a sembrare disordinato e ogni aggiunta pesa sul caricamento.
Una scala tipografica
Invece di scegliere dimensioni a caso per ogni schermata, conviene definire una scala: un insieme limitato di dimensioni da usare ovunque. Molti sistemi partono da un corpo base e moltiplicano per un rapporto costante.
| Livello | Uso | Esempio (base 16 px, rapporto 1,25) |
|---|---|---|
| Didascalia | Note, metadati | 13 px |
| Corpo | Testo, etichette | 16 px |
| Sottotitolo | Titoli di sezione | 20 px |
| Titolo | Titolo di pagina | 25 px |
| Display | Titoli di grande impatto | 31 px |
Cinque o sei livelli sono generalmente sufficienti. Il vantaggio è doppio: coerenza visiva tra le schermate e decisioni più rapide per chi progetta e sviluppa, che non deve più chiedersi se un titolo vada a 21 o a 22 pixel.
In un'interfaccia densa, come un pannello di gestione, il rapporto tra i livelli può essere più contenuto, intorno a 1,125 o 1,2; in un sito editoriale si può usare un contrasto maggiore.
Costruire la gerarchia
La gerarchia visiva si costruisce combinando pochi strumenti:
- dimensione: il modo più evidente, ma da non abusare;
- peso: un grassetto a corpo normale può distinguere un'etichetta senza aumentarne la dimensione;
- colore e tono: un testo secondario in grigio scuro, purché con contrasto sufficiente, si legge come meno importante;
- spazio: un elemento circondato da spazio vuoto attira l'attenzione più di uno stretto tra altri;
- posizione: ciò che sta in alto e a sinistra viene letto prima nelle lingue occidentali.
Un errore comune è usare tutti gli strumenti insieme per ogni elemento importante. Se tutto è grande, grassetto e colorato, nulla spicca. Spesso funziona meglio ridurre l'enfasi degli elementi secondari che aumentare quella dei principali.
Etichette e valori
Nei moduli, nelle schede prodotto e nei pannelli di dati, il rapporto tra etichetta e valore è decisivo. Quando l'utente cerca un dato, il valore è l'informazione principale e l'etichetta è il contesto. Per esempio, in un riepilogo d'ordine «Totale» può essere in corpo piccolo e grigio scuro, mentre «84,50 €» in corpo maggiore e grassetto. Invertire questa relazione, con etichette vistose e valori anonimi, costringe a leggere tutto per trovare ciò che serve.
Testo maiuscolo e corsivo
Il tutto maiuscolo funziona per etichette brevissime, come una parola sopra un gruppo di campi, possibilmente con una leggera spaziatura tra le lettere. Per frasi intere è più lento da leggere, perché le parole perdono la loro forma caratteristica. Il corsivo sullo schermo, a corpi piccoli, può risultare meno nitido: va riservato a enfasi occasionali e citazioni.
Verificare sul dispositivo reale
La tipografia di un'interfaccia va sempre provata sui dispositivi su cui verrà usata. Un corpo che sembra adeguato su un monitor da scrivania può essere minuscolo su un telefono tenuto a distanza di braccio, e la resa dei pesi sottili cambia molto tra uno schermo ad alta densità e uno più economico. Nel mio lavoro preferisco evitare i pesi più leggeri per il testo funzionale: sono eleganti nelle presentazioni, ma diventano fragili nell'uso quotidiano.
In sintesi
- Il carattere giusto per un'interfaccia ha lettere ben distinguibili, pesi sufficienti e cifre tabellari.
- Una o due famiglie bastano; i caratteri di sistema sono un'ottima base.
- Una scala di cinque o sei dimensioni garantisce coerenza e decisioni rapide.
- La gerarchia nasce dal dosaggio di dimensione, peso, tono e spazio, non dalla loro somma.
