Tipografia per il mobile: una guida di riferimento per i designer

Ormai da qualche anno il numero di accessi alla Rete via mobile ha superato quella effettuata tramite desktop pc.

Questo fatto implica inevitabilmente un ripensamento dei modi in cui le piattaforme e i siti web sono concepiti per l’uso da smartphone e tablet.

Le tecniche di responsive web design negli ultimi anni sono diventate uno standard. Ma c’è un aspetto che spesso viene poco considerato dai designer, ovvero come approcciare la tipografia per il mobile.

Qui puoi trovare una piccola guida su come creare e gestire gli elementi tipografici in funzione di un’interfaccia utente ad elevata usabilità per dispositivi mobile.

Ma perchè la tipografia per il mobile è tanto importante?

tipografia mobileI motivi sono sostanzialmente due: attirare gli utenti e rendere loro più semplice la consultazione dei contenuti.

Attirare gli utenti significa catturare la loro attenzione ed evitare che dopo pochi secondi possano andare alla ricerca di altre fonti.

Questo è un rischio molto forte in Rete, mentre è molto più “gestibile” offline. Su mobile tale rischio è ancora più forte.

Quindi la scelta del font è fondamentale sia dal punto di vista stilistico sia in termini di leggibilità, considerando che la lettura su schermo è molto più stancante.

Fatta questa dovuta premessa cerchiamo di capire quali sono le caratteristiche che sono rischieste a un buon font tipografico per interfaccia mobile.

Caratteristiche di un buon font per il mobile

Il primo fattore da considerare è ovviamente la dimensione del font.

La tipografia per il mobile, infatti, non può non tener conto delle ridotte dimensione dei dispositivi.

In tal senso diversi studi hanno dimostrato che 16px è la dimensione “giusta” per il body, mentre per quel che riguarda titoli e intestazioni è preferibile adottare una dimensione leggermente più grande e caratteri maiuscoli, con lettering normale e non “condensato”.

Tutto questo favorirebbe la leggibilità del testo.

Secondo elemento che entra in gioco: il colore.

Il colore è molto importante nel web design; il colore “giusto” può convertire un maggior numero di utenti rispetto a una scelta cromatica non ponderata.

Quel che conta nel caso della tipografia per il mobile in particolare è il contrasto del font con lo sfondo e gli altri elementi grafici.

Le Web Content Accessibility Guidelines indicano il livello ottimale di contrasto da ottenere anche in base alle dimensioni del font.

Vi consigliamo di leggerle con attenzione.

Anche la larghezza del testo e il numero di font per riga influenzano la leggibilità del testo.

Al fine di garantire un livello di lettura ottimale si consiglia di utilizzare al massimo 40 caratteri per riga.

Testi con frasi brevi, non solo concettualmente ma anche visivamente, sono più facile da leggere.

Un altro fattore da considerare è il leading ovvero lo spazio tra le righe e, correlata, anche la quantità di testo.

Premesso che il livello di attenzione su mobile è molto più basso rispetto a quello su desktop, è evidente che meno sono le volte che l’utente deve “swippare” verso il basso minore è rischio che si stanchi.

Per questo è consigliabile diminuire leggermente il leading e se occorre ripensare a un testo ad hoc, più sintetico, solo per il mobile.

Quelli appena elencati sono solo 4 fattori che incidono direttamente sulla scelta della tipografia per il mobile. Teneteli sempre bene a mente…