Share
Prendiamo sul serio la tipografia mobile; sappiamo tutti che il mobile è enorme e possiamo anche convenire che la tipografia è molto importante in un progetto. La tipografia è un elemento di design fondamentale; personalmente, preferisco iniziare con la creazione di qualsiasi disegno perché aiuta a impostare un buon palcoscenico per il resto del design. Quindi parliamo di come possiamo rendere la nostra tipografia mobile il meglio che può essere.
Durante la progettazione di dispositivi mobili, probabilmente il nostro più grande nemico è la dimensione fisica dello schermo. Alcuni smartphone sono super piccoli, come il vecchio, ma ancora ampiamente utilizzato iPhone 4 / 4S. Secondo l'UNITÀ, il 15,9% delle persone usa ancora questo modello antiquato. Negli Stati Uniti questa cifra si traduce in quasi 24 milioni di persone. Sì, sono un sacco di persone con schermi piccoli e minuscoli. Poi abbiamo anche schermi più grandi come il nuovo iPhone 6 Plus, Galaxy Note 4 o Nexus 6. Il fatto che ci sia una così grande gamma di dimensioni dello schermo è una restrizione in sé, perché ciò che sembra buono su un iPhone 4 non sarà sempre guarda bene su iPhone 6 Plus.
Potresti voler analizzare le tue analisi e vedere qual è il dispositivo più popolare del tuo sito, iniziare ad adattarlo ad esso. Tuttavia, è generalmente accettato che un approccio indipendente dal dispositivo ti servirà meglio a lungo termine.
Dai un'occhiata all'immagine qui sopra per vedere come i rendering di testo uguali su ogni dispositivo. Non potevo nemmeno montare completamente "Titolo 1" su iPhone 5S, dimostrando che la tipografia reattiva inizia con le dimensioni dello schermo in mente.
Alcuni altri ostacoli nella progettazione di uno smartphone includono l'illuminazione nell'ambiente dell'utente e la vicinanza con il telefono al loro viso.
Iniziamo con il latte. Mentre usiamo i nostri telefoni con le nostre mani, tendiamo a tenerli a portata di mano o anche più vicino al nostro viso. Ciò significa che il tipo può essere più piccolo su un telefono perché la distanza tra lo schermo e i nostri occhi è inferiore a quella di un laptop o di un monitor desktop.
Avere la possibilità di ridurre la dimensione del font significa anche che possiamo includere più testo nella stessa quantità di spazio, dandoci delle "misure" più rassicuranti. A sua volta, questo aiuta ad alleviare le dimensioni dello schermo più piccole, ma solo leggermente. Puoi vederlo in azione nell'immagine qui sotto.
Tipo più piccolo per schermi più piccoliLe persone usano i loro smartphone tutto il tempo, ovunque. In metropolitana, nel parco, sui loro divani o letti. La tua app o il tuo sito web potrebbero essere utilizzati in vari ambienti con illuminazione diversa, il che significa che devi anche essere consapevole del contrasto. La lettura nel parco è possibile, anche con luce solare diretta, se il contrasto del testo è abbastanza alto rispetto allo sfondo. In questo scenario, anche avere un testo più grande aiuta. È meno necessario concentrarsi sul contrasto se la lettura viene eseguita su una metropolitana, dove l'illuminazione non si abbaglia più così tanto, o di notte nel proprio letto.
Gizmodo ha pubblicato un articolo dettagliato su quale dispositivo mobile (compresi tablet e smartphone) domina all'aperto. Hanno eseguito un confronto dei loro colori in relazione a varie opzioni di luce solare. Si scopre che Samsung Galaxy S ha sovraperformato l'iPhone 4 alla luce solare indiretta, che è la peggiore delle peggiori luci all'aperto. Controlla l'articolo completo se stai cercando ulteriori dettagli su questo.
Il mio punto è semplice, ci sono così tante parti in movimento quando si tratta di progettare per la leggibilità su un dispositivo mobile. Conosci i tuoi utenti in modo che tu possa determinare al meglio come dovrebbe essere la loro esperienza di lettura, iniziare con i loro tipi di telefono e terminare con il loro ambiente.
Ci sono un sacco di tutorial là fuori che ti aiutano a determinare i pixel specifici che il tuo testo dovrebbe essere basato su rapporti dorati o semplicemente a guardare gli sguardi. Calcolare una buona scala tipografica per il desktop è semplice. In realtà è piuttosto facile farlo anche per i dispositivi mobili. Typecast contiene un articolo meraviglioso sul modo in cui potresti trovare le misure per la tua tipografia mobile e desktop: Una scala più moderna per la tipografia Web. L'articolo spiega chiaramente perché la tipografia deve essere reattiva. Ma voglio essere più dettagliato del semplice affermare che "le persone tendono a leggere diversamente sui dispositivi mobili" - è molto più di questo!
Vedi, il cellulare è il minimo fisso medium con cui abbiamo avuto a che fare come designer. Come ho già detto, le persone leggono sui loro telefoni ovunque, in ambienti in continuo cambiamento. Per ottimizzare al meglio la loro esperienza di lettura, abbiamo bisogno di capire la psicologia di ciò che di fatto rende una buona esperienza di lettura.
Mi piacerebbe pensare che progettare la migliore esperienza di lettura per dispositivi mobili inizi con il corpo del testo perfetto. Qualunque font tu scelga, devi assicurarti che sia abbastanza flessibile da resistere a diverse dimensioni dello schermo con le stesse dimensioni e comunque avere un bell'aspetto. Se scegli Helvetica Neue per la tua famiglia di font dovresti assicurarti che abbia un bell'aspetto su un iPhone 4s in 16px così come su un telefono Nokia e un telefono Galaxy.
Considerare anche il peso del font quando si seleziona un font, in quanto alcuni telefoni mostreranno un testo normale, in grassetto o chiaro in modo diverso agli altri.
Proprio così, i titoli sono altrettanto importanti! Hai più libertà creativa con le intestazioni in quanto possono sacrificare una certa leggibilità per l'impatto, ma considera anche la loro scala. Un titolo, come dimostrato nella prima immagine con le dimensioni dello schermo mobile, è molto più probabile che diventi illeggibile a causa del sovradimensionamento su uno schermo piccolo. Una voce di grandi dimensioni è anche uno spreco di spazio, in quanto si potrebbe impedire agli utenti di ottenere la carne del contenuto.
Un'altra cosa da tenere a mente quando si perfeziona il testo del corpo è il ritmo verticale. Il ritmo verticale è un termine che si riferisce alla spaziatura verticale e allineamento della tipografia e di altri elementi sulla pagina. Il termine ritmo significa uno schema ripetitivo. Un buon ritmo verticale assicura l'esperienza di lettura è facile perché consente un layout equilibrato che guida facilmente gli occhi del lettore.
Tratto da http://modulargrid.orgSe la linea di base è allentata o stretta, la sua coerenza è la cosa più importante. Ma è importante rendersi conto che la linea di base sui dispositivi mobili può riflettere le ridotte dimensioni dello schermo. Non aver paura di stringere le cose, soprattutto se hai ridotto la dimensione del carattere, ma individua un ritmo verticale confortevole per garantire che la lettura sia agevole per il tuo lettore.
Se hai bisogno di aiuto per iniziare a capire le migliori misure per il tuo ritmo verticale, Andre Morton ha un generatore di ritmo verticale sul suo blog.
Ci sono alcune regole pratiche che vorrei condividere con te quando si tratta di progettare la tipografia in generale, ma ciò vale soprattutto per la tipografia reattiva e mobile.
Non dovresti mai dover regolare la crenatura per siti Web o app di qualsiasi tipo. È un processo difficile e altamente inaffidabile per il web! I caratteri di qualità avranno ben capito il kern e, se il font che hai scelto non ha un buon kerning, lo butti fuori.
Quando non c'è uno straccio chiaro sul lato destro o sinistro del tuo testo, allora potrebbe anche essere giustificato (e il testo non dovrebbe mai essere giustificato sul web). Uno straccio povero causerà buchi e rotture spalancate negli spazi bianchi; è più facile leggere e scansionare il testo quando c'è uno straccio chiaro. Come si interrompe il testo a diverse dimensioni dello schermo? Una correzione può essere una regolazione molto semplice che toglie alcuni pixel dall'elemento che contiene il testo o ne aggiunge un po '.
Non c'è nulla di più ingannevole come cercare di toccare una piccola area su un telefono e non essere in grado di farlo perché è troppo piccolo o peggio, toccando qualcos'altro. Forse il miglior consiglio qui è di averne il minor numero possibile! Quando c'è solo un collegamento in linea è più facile toccarlo, perché non c'è nient'altro da aprire accidentalmente. Quindi, assicurati che il link sia chiaro. Questo può essere fatto in vari modi, come rendere i collegamenti in grassetto o appoggiarsi allo schema di sottolineatura standard. A volte basta cambiare il colore non sarà sufficiente se il contrasto è troppo basso (ricorda come abbiamo parlato dei colori degli schermi e dei problemi di illuminazione?)
Infine, assicurati che i collegamenti in linea abbiano un'area di tocco superiore a quella percepita. Questo può essere ottenuto applicando display: blocco in linea; per ancorare elementi, ma assicurarsi che nessuno imbottitura o extra altezza della linea si applica non distorce il testo principale.
Progettare la tipografia per dispositivi mobili ha molte parti mobili di cui dovresti essere a conoscenza. Spero che questo post ti abbia fornito alcune informazioni su come migliorare i tuoi progetti per dispositivi mobili. Fateci sapere i vostri consigli e trucchi nei commenti!
Accentsconagua