Il mobile è grande adesso. Ma spesso la tipografia è piccola. Quando si tratta di creare grandi caratteri su schermi piccoli, ci sono molte sfide.
Quindi, come puoi sfruttare al massimo la reattività, il design mobile e la tipografia? Il primo passo è davvero capire il tipo e il secondo è pensare a come le persone leggono. Metti insieme le due cose e avrai una mano sulla creazione di un ottimo tipo di dispositivo mobile in pochissimo tempo. È un'abilità che ogni designer ha bisogno di padroneggiare nell'era digitale.
Nozioni di base sulla tipografia mobile e reattiva
A differenza del tipo progettato per la stampa e anche per molti progetti di desktop web design, la tipografia mobile e reattiva spesso non viene misurata utilizzando il sistema di punti tradizionale. Piuttosto che selezionare un carattere tipografico e usarlo in? 14 punti con 15 punti di vantaggio ,? il tipo mobile e reattivo è progettato usando pixel, ems o rems. Queste unità flessibili sono basate sulla percentuale e possono aiutare i progettisti a creare più facilmente il tipo per più dispositivi.
Due delle considerazioni più importanti quando si progetta il tipo per dispositivi mobili sono dimensioni e spazio. Il tipo deve essere abbastanza grande da poter essere letto facilmente e ci dovrebbe essere abbastanza spazio tra le righe in modo che il testo non si senta stretto nel piccolo spazio.
Non esiste una formula magica per quale dimensione o spaziatura usare. Ma in genere il tipo di cellulare dovrebbe essere un po 'più grande in proporzione rispetto a quello sui desktop e includere più interlinea. Mentre molti sostengono che il numero ottimale di caratteri per riga per la stampa e la progettazione del desktop sia compreso tra 60 e 75 caratteri, per i cellulari questo numero dovrebbe essere dimezzato.
Come leggono le persone
La chiave per qualsiasi stile di tipografia, su qualsiasi dispositivo, è la leggibilità. Se l'utente non può leggerlo, il design non funziona.
Questo è particolarmente importante sui dispositivi mobili. E ci sono così tante opzioni mobili, è praticamente impossibile sapere come i tuoi caratteri saranno visualizzati su ogni dispositivo. Quindi lavora davvero per perfezionare il tuo tipo per le larghezze dello schermo del dispositivo più diffuse.
Pensa a come le persone leggono quando pianificano il tuo design mobile. Potrebbe essere necessario regolare le relazioni tra diversi elementi del tipo, come l'intestazione e il testo principale. (Il sito del Fondo Rinascimentale di Chattanooga, in alto, svolge un ottimo lavoro.) Qualsiasi tipo che è troppo grande può consumare rapidamente lo schermo, distraendo i lettori. Digitare quello che è troppo piccolo può essere perso o visto un poco importante.
Considera anche l'allineamento. In generale, le persone leggono da sinistra a destra. Soprattutto su un dispositivo di piccole dimensioni, mantenere gli stili di allineamento semplici per la massima leggibilità.
È tutto a larghezza
Il fattore chiave durante la progettazione del tipo per dispositivi mobili, app o tablet è la larghezza dello schermo. E ricorda, ci sono due ampiezze da considerare - verticale (come la maggior parte delle persone tengono i loro telefoni) e orizzontale.
Il testo troppo grande creerà molte interruzioni nel tipo e se usi la sillabazione, molti trattini. (Va notato che pochi web designer usano i trattini, sono un personaggio raramente trovato nel testo del corpo per il web.) Frequenti interruzioni nel flusso di testo possono causare il blocco del lettore troppo spesso e rendere il messaggio instabile e più difficile comprendere.
Un testo troppo piccolo può causare problemi al lettore e rendere difficile la messa a fuoco del testo. Può anche essere difficile trovare l'inizio e la fine delle righe di testo quando ci sono troppe lettere da digerire contemporaneamente.
Design nello spazio
Quando si parla di schermi piccoli, lo spazio è una considerazione fondamentale. Pensa agli elementi che i tuoi utenti potrebbero incontrare - basso contrasto sullo schermo a causa dell'illuminazione, padding in modo che il testo non urtasse il bordo dello schermo (o una custodia morbida) o da qualche parte gli utenti possano scorrere lo schermo senza fare clic inavvertitamente su collegamento.
Aggiungendo un po 'di spazio al testo, sia tra le linee che ai margini, aiuti gli utenti a interagire meglio con le parole. Una buona spaziatura favorisce anche la leggibilità, specialmente in condizioni scadenti. Come con altre tecniche, la giusta quantità di spaziatura è fondamentale e una sovrabbondanza di spazio bianco può portare via dall'area del contenuto sullo schermo o persino ostacolare la leggibilità.
Un buon punto di partenza è compreso tra il 10 e il 20 percento. Gioca con i numeri come linea guida su quanto spazio extra aggiungere tra le righe di testo. Si può anche prendere in considerazione l'utilizzo della spaziatura tra paragrafi, poiché i grafici possono sembrare più lunghi su schermi più piccoli. Questo spazio aggiuntivo dà ai lettori la percezione che il testo non sia troppo denso e si senta più facile da leggere.
Mantieni i caratteri tipografici semplici
C'è un motivo per cui vedi così tanti caratteri sans serif sui siti web mobili e nelle app. Di solito sono facili da leggere.
Quando si selezionano i caratteri per i blocchi di testo nel mobile design, si pensi a qualcosa di diverso da un logo o da un elemento tipografico: si tratta di qualcosa di semplice, di un peso standard e con una larghezza del tratto abbastanza uniforme. Evita caratteri di novità, stili condensati e forme di lettera con tratti sottili.
Altri progettisti stanno optando per l'utilizzo di un secondo set di caratteri per i siti mobili rispetto alla versione desktop, che può includere una tavolozza di tipi più elaborati. Mentre ci sono pro e contro a questo concetto, può essere una soluzione se si ha il cuore su un certo tipo di carattere speciale per la progettazione desktop.
Fai attenzione anche ai trucchi del tipo. Effetti come ombre o smussature possono sembrare grandi a dimensioni più grandi, ma potrebbero non essere sufficienti o ostacolare la leggibilità su uno schermo largo solo pochi centimetri. Dimentica i trucchi quando lavori sul piano dei tipi per il tuo sito mobile.
Proporzioni mobili e scala
Mentre non esiste una soluzione perfetta, Jason Pamental di H + W Design ha uno dei migliori in circolazione. Ha dettagliato la sua scala moderna misurata per il blog Typecast con CSS e una scala completa di numeri.
L'idea è che ogni diverso tipo di testo in un web design debba essere pensato e ridimensionato separatamente per un'esperienza di web design ottimizzata. Spesso, noi (collettivamente come designer) ridimensioniamo tutto in una volta.Pamental mostra perché questa non è la migliore idea attraverso un semplice esempio, in cui l'intestazione occupa quasi l'interezza dello schermo.
Nessuna conversazione sulla tipografia del web mobile sarebbe completa senza pensare al pezzo di Pamental. Assicurati di leggerlo da solo e vedere come le sue idee potrebbero tradursi nel tuo lavoro.
Consideri Funzionalità
Un'ultima cosa a cui pensare quando si progetta la tipografia mobile è come funziona. Mentre alcuni tipi di siti Web desktop sono progettati per fare clic e collegarsi, la tipografia mobile spesso lo fa ancora di più. Alcuni testi possono consentire agli utenti di effettuare una chiamata, altri tipi contengono un link, altri testi possono consentire agli utenti di acquistare un prodotto o il testo in un'app può far parte di un gioco.
Disegna questo tipo in modo che gli utenti sappiano esattamente cosa faranno. E rendilo abbastanza grande da permettere agli utenti di completare questa azione con facilità. Le caselle di testo attive devono essere abbastanza grandi da essere toccate e separate da altre azioni di testo in modo che accada solo una cosa alla volta. Qualsiasi altra configurazione probabilmente confonderà e frustrerà gli utenti.
Conclusione
Come per qualsiasi progetto di design, le linee guida e i suggerimenti sono solo un punto di partenza. La tipografia mobile è una di quelle aree in cui i designer stanno davvero iniziando a tuffarsi e le tendenze si evolveranno.
Assicurati di combinare e abbinare le idee sopra con le tue per i migliori risultati. (E se hai altri consigli, ci piacerebbe sentirli). Il consiglio n. 1 è di testare, testare, testare. Maggiore è il numero di dispositivi su cui si provano gli stili di testo, l'idea migliore si otterrà da come appare e funziona per gli utenti.
Fonte immagine: Phil Roeder. Nota sulle immagini: le immagini in questo post sono mostrate in vista desktop e anche su un iPhone 5S.