Flash

La tipografia nel Mobile Design: aspetti importanti ed esempi

Ciò che rende la tipografia mobile speciale è la natura restrittiva degli schermi, sono piccoli e situati in aree luminose. Sono tre i componenti che aiutano a creare una buona tipografia mobile: la grande dimensione, contrasto e spaziatura.

Leggibilità
E’ definita come la quantità di sforzo che un utente deve mettere in o per leggere e comprendere un testo. Questo è un problema molto importante che non deve essere sottovalutato.

Dimensione
Se un utente non può leggere quello che sta visualizzando il motivo è  che illegibile. Per far comprendere il messaggio è necessario utilizzare una dimensione che sia più grande di un tipico sito web.

Contrasto
Proprio come un testo blu su uno sfondo rosso è un errore nel web design, la stessa regola vale sui dispositivi mobile. Tuttavia quando si progetta per un dispositivo mobile bisogna tenere presente che la visibilità è molto più bassa perché i fruitori non sono seduti in una stanza davanti ad un pc.  Questo è il motivo per cui si dovrebbe usare un buon contrasto di colore per aiutare l’utente.

Spaziatura
La distanza tra lettere, parole e righe di testo è anche una parte importante per creare una buona leggibilità. Non importa quanto grande siano le lettere se sono schiacciatei insieme.

Ecco alcuni esempi di mobile disegn reperiti su Dribbble.

Blog: buona combinazione di colori e di tipografia di grande dimensione.

Bamboo Responsive:  tipografia leggera, pulita e molto leggibile.

Mobile Landing Page: Il contrasto è perfetto. Le lettere sono abbastanza scure per distinguersi anche nel più soleggiato ed illuminato ambiente.

Portfolio Responsive

Cellulare Blog: anche se il testo non è troppo grande, lo fa risaltare grazie ad un colore più scuro su uno sfondo chiaro.

Webbot Theme

Dashboard Widget: il contratto tra il testo bianco su colori vivaci e testo nero su sfondo bianco funziona.

Mooday

Mobile Version: la spaziatura potrebbe essere eccessiva, ma è perfetta per aiutare a distinguere i links tra loro.

Mobile version: anche se queste lettere sono sottili, la loro dimensioni compensa ed aiuta ad essere visibili e leggibili.

Landing Page

Neue Klok Grotesk: si può vedere chiaramente la gerarchia e la dimensione dei caratteri indica ciò che è più importante.

Breathing Room

Tour Dates Mobile View: vi è ampio spazio tra gli elementi tipografici, la spaziatura e contrasto è molto buona.

Mobile NKOTB

Hackerspace Krakow mobile: la tipografia è molto pulita grazie al san-serif.

via

Potrebbero interessarti anche: