Girando un po’ nei vari blog di design che seguo mi sono imbattuto in un interessante articolo che spiega quali dovrebbero essere le regole da usare per la tipografia sui dispositivi mobile.
Queste linee guida che saranno sicuramente da tenere conto quando si realizza un sito web responsive.
1. Datevi spazio
Contenuti
Contrariamente alla credenza popolare, la tipografia non riguarda la disposizione delle piccole linee ondulate su uno schermo; la tipografia è in gran parte lo spazio dentro e intorno a loro.
Quando si parla di gerarchia, di solito intendiamo “h1” fino al “p”, ed eventualmente a “h6”. Ma c’è una gerarchia aggiuntiva che influenza il flusso di una linea, o punto, e questa è la gerarchia spaziale: lo spazio tra le lettere è inferiore allo spazio tra le parole, lo spazio tra le parole è inferiore allo spazio tra le linee, e così via.
Per una leggibilità ottimale sul cellulare, bisogna prestare particolare attenzione alla gerarchia spaziale.
2. Lughezza della riga
Precisamente è la lunghezza ideale che dovrebbe avere una riga di testo. La misura ideale per una lettura ottimale è di 65 caratteri, la lunghezza fisica della riga dipenderà dal disegno del carattere. Una riga con PT Serif sarà più amipia rispetto a una con Open Sans.
È raro che 65 caratteri raggiungano il bordo di un browser desktop, ma nella maggior parte dei dispositivi mobili 65 caratteri superano il confine del browser. Di conseguenza, per i dispositivi mobili si è costretti a ridurre la tua misura.
Non c’è un numero di caratteri preciso per il mobile, tuttavia quotidiani e magazine utilizzano 39 caratteri per riga.
3. Aumentare o diminuire l’interlinea
L’interlinea o leading è lo spazio tra le righe, se impostato troppo basso renderà il salto da una riga all’altra difficile da seguire. Al contrario se impostato troppo alto il flusso di lettura tra le righe verrà interrotto.
4. Trovare il punto debole
Tutti i caratteri hanno almeno un punto debole; una combinazione di dimensioni in cui si riproducono meglio sullo schermo, e il punto in cui l’anti-aliasing applicato nel browser distorce il disegno del carattere il meno possibile.
L’approccio standard è quello di utilizzare una griglia di base, ma per il mobile abbiamo bisogno di usare la x-height (la x-height è letteralmente l’altezza della minuscola ‘x’). Sappiamo da studi di leggibilità che il cervello riconosce la parte superiore di parole, non il sotto, per ottenere un maggiore flusso, dobbiamo fare in modo che la parte superiore dei nostri caratteri siano più strettamente allineati ai pixel.
5. Non cambiare il tuo allineamento
La maggior parte di ciò che si legge è allineato a sinistra (almeno per le lingue latine) con un conseguente bordo frastagliato destra.
Quando i tuoi occhi saltano da una estremità di una riga alla successiva, se tutti i salti sono uguali, il cervello sarà in grado di giudicare l’angolo e la distanza alla riga successiva. Per questo motivo, il bordo sinistro del testo deve essere piatto, con ogni riga che inizia nello stesso punto (l’esatto contrario è vero per le lingue che si leggono da destra a sinistra).
Di conseguenza non si dovrebbe mai allineare un testo al centro per più di due o tre righe.
Spesso, il testo viene giustificato, il che significa che le parole sulla linea sono equidistanti l’una dall’altra. I testi giustificati sono diventati di perché il responsive design ha insegnato i progettisti a pensare in blocchi. Testo giustificato si traduce in spazi incoerenti, e nel peggiore dei casi porta ad un paio di parole su una singola riga. Testo in modo giustificato può essere illeggibile sul cellulare.
6. Ridurre il contrasto
Mentre vogliamo aumentare il contrasto tra testo e sfondo, vogliamo diminuirlo tra i vari elementi.
La ragione di questo è che il nostro cervello da importanza in base al contesto. I nostri titoli possono essere due, o anche tre volte la dimensione del corpo del testo sul desktop, che però funziona perché c’è molto testo sullo schermo. Nel cellulare, sostanzialmente è visibile meno testo, quindi questo contrasto è esagerato.
7. Regolare la crenatura (traking – kerning)
In ambito tipografico, la crenatura è l’incremento di distanza tipica fra lettere.
Quando impostiamo le dimensioni dei font per il mobile, dobbiamo essere consapevoli dei cambiamenti necessari alla crenatura. Di solito però non dovremmo regolarla.
Le eccezzioni a questa regola sono per i testi di grandi dimensioni, come le intestazioni o a testi di piccole dimensioni, come ad esempio le note. Testo più grande richiede meno crenatura (kerning) mentre testo più piccolo ne richiede di più (traking).
Se hai fatto modifiche a titoli, o se si sta utilizzando un carattere che ha una crenatura più stretta, potrebbe essere necessario modificare la crenatura.
In conclusione
Non c’è nessuna regola assoluta, ma queste linee guida vi serviranno come punto di partenza per ben strutturate il testo sui dispositivi mobili.
