7 semplici regole per la tipografia mobile
Probabilmente hai sentito che una buona tipografia è invisibile, ma è più preciso dire che una buona tipografia rende l'atto di leggere senza sforzo.
Quando l'occhio viaggia lungo una linea di testo, lo fa in salti, chiamati saccade; non leggi le lettere o anche le parole, leggi le istantanee di parti di parole e il tuo cervello si riempie di ciò che si aspetta di trovare. Se il cervello è sorpreso, rimanda gli occhi indietro per verificare se la sua ipotesi fosse corretta. Una buona tipografia riduce al minimo il lavoro che gli occhi devono fare creando un flusso regolare lungo la linea.
I dispositivi mobili hanno sfide intrinseche per qualsiasi tipografo: lo spazio è limitato e la luce ambientale è spesso scarsa. Tuttavia, apportando semplici modifiche alle tecniche che già utilizziamo per il Web, possiamo migliorare la leggibilità sui dispositivi mobili.
1. Datti spazio
Contrariamente alla credenza popolare, la tipografia non riguarda la disposizione di piccole linee ondulate su uno schermo; la tipografia riguarda principalmente lo spazio dentro e intorno a loro.
La tipografia deve molto meno alle forme delle lettere stesse che allo spazio che incorniciano
Per capirlo, aiuta a capire da dove provengono i caratteri: il buco nel mezzo di una 'o' (e una 'b', 'c', 'p', ecc.) È chiamato "contatore". Quando i caratteri venivano intagliati in metallo per essere utilizzati nelle macchine da stampa originali, quei contatori sono stati creati da un punzone di metallo che è stato scolpito e quindi inserito in un piatto. I primi progettisti di tipi stavano effettivamente lavorando con le forme che non avrebbero stampato. La tipografia deve molto meno alle forme delle lettere stesse che allo spazio che incorniciano.
Quando parliamo di gerarchia, di solito intendiamo
attraverso
e forse a
. Ma c'è una gerarchia aggiuntiva che influisce sul flusso di una linea, o paragrafo, 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 avanti.
Per una leggibilità ottimale sui dispositivi mobili, prestare particolare attenzione alla gerarchia spaziale, il raggruppamento di caratteri in caratteri, linee e paragrafi in stile gestalt è tanto più essenziale nella luce naturale.
2. Prendi la misura
Misura è la lunghezza di una riga di testo. O, più precisamente, è la lunghezza ideale per una riga di testo, poiché è raro che ogni riga si adatti esattamente.
La misura generalmente accettata e ideale per una lettura confortevole è di circa 65 caratteri. La lunghezza fisica della misura dipenderà dal design del carattere tipografico, dal tracking (vedi sotto) e dal testo esatto che stai utilizzando. I primi 65 caratteri di questo articolo, ambientati in PT Serif, sono 26.875 di larghezza, in Open Sans, 28.4375em, in Ubuntu, 27.3125em; se avessi aggiunto il corsivo, le maiuscoletto o una dozzina di altri dettagli tipografici, sarebbe ulteriormente diverso.
È raro che 65 caratteri si estendano fino al bordo di un browser desktop, ma nella maggior parte dei dispositivi mobili 65 caratteri (se visualizzati abbastanza grandi da essere leggibili) si estendono oltre i limiti del browser. Di conseguenza, per i dispositivi mobili sei costretto a ridurre la tua misura.
Non esiste uno standard comunemente accettato per misurare su uno schermo mobile, tuttavia, tradizionalmente, le colonne di testo strette nei giornali o nelle riviste aspirano a 39 caratteri. Poiché questa misura ideale è stata testata per secoli, ci è utile per la tipografia mobile.
3. Allentare, quindi serrare il cavo
In testa c'è lo spazio tra le linee, e quando è impostato troppo stretto, fa saltare la saccade dalla fine di una linea all'inizio della successiva difficile da seguire. Se impostati troppo genericamente, gli spazi tra le parole inizieranno ad allinearsi, creando quelli che in genere vengono definiti fiumi, interrompendo il flusso regolare della linea.
l-r: guida ideale, troppo stretta, troppo larga.
Il solito standard per la leadership è intorno a 1,4em, tuttavia nella mia esperienza è troppo stretto per gli schermi: una delle caratteristiche chiave di un carattere che funziona bene sullo schermo sono i grandi contatori, ei contatori di grandi dimensioni richiedono un piccolo extra per mantenere la gerarchia spaziale .
Invertire questa regola, una misura più breve richiede meno anticipo. Quindi, anche se probabilmente riuscirai a rendere il tuo leader un po 'più flessibile per gli stili desktop, ricordati di restringerlo per gli schermi mobili.
4. Trova il punto debole
Tutti i font hanno almeno un punto debole; una combinazione delle dimensioni a cui si riproducono meglio sullo schermo e il punto in cui l'anti-aliasing applicato nel browser distorce il disegno del carattere tipografico il meno possibile.
Lo sweet spot è solitamente il punto in cui la maggior parte dei tratti si allinea con la griglia di pixel - i font pixel, se li ricordi, hanno funzionato solo quando sono stati ridimensionati al loro punto migliore.
Impostando un carattere sul suo punto debole si ottiene un contrasto maggiore. Il contrasto è particolarmente importante quando si progetta per dispositivi mobili a causa della possibilità di abbagliare i riflessi al di fuori del laboratorio del dispositivo sottilmente illuminato.
Scoprirai che piccoli aggiustamenti alla guida spingeranno e tracceranno le linee da interi pixel. A mio parere, il contrasto ha un ruolo importante per gli schermi mobili, quindi se si deve scendere a compromessi per mantenere le linee su pixel interi, farlo.
L'approccio standard per i progettisti consiste nel disporre il testo utilizzando una griglia di base, ma per i dispositivi mobili è necessario utilizzare invece l'altezza x (l'altezza x è letteralmente l'altezza della 'x' minuscola). Sappiamo dagli studi di leggibilità che il cervello riconosce la parte superiore delle parole, non quella inferiore, quindi per ottenere un maggiore flusso saccade, dobbiamo assicurarci che la parte superiore dei nostri personaggi sia maggiormente allineata ai pixel.
5. Non perdere il tuo straccio
Uno straccio, è il limite di un blocco di testo. La maggior parte di ciò che leggi è allineato a sinistra (almeno per le lingue basate sul latino) risultante in un margine destro irregolare .
Quando i tuoi occhi saltano da un'estremità di una linea all'altra, il cervello è più in grado di giudicare l'angolo e la distanza del prossimo salto, se tutti i salti sono coerenti - pensaci come se percorressi i gradini, è molto più veloce se sono distanziati in modo coerente. Per questo motivo, il bordo sinistro del testo dovrebbe essere piatto, con ogni riga che inizia nello stesso punto (l'esatto contrario è vero per le lingue che leggono da destra a sinistra).
Di conseguenza non dovresti mai centrare allineare più di due o tre righe di testo.
Spesso, il testo è giustificato, il che significa che le parole sulla linea sono equidistanti in modo che non ci siano stracci su entrambi i lati. (Sospetto che il testo giustificato sia di moda perché il design reattivo ha insegnato ai progettisti a pensare in blocchi.) Il testo giustificato porta a uno spazio bianco inconsistente, e nei casi peggiori porta a un paio di parole su una riga, che è seriamente sconcertante. Il problema con un testo giustificato è esacerbato da misure più brevi, pertanto il testo giustificato può essere illeggibile sui dispositivi mobili.
l-r: allineato a sinistra, allineato al centro, giustificato.
Se la pulizia è davvero importante per te, quindi sillabare il testo per ammorbidire lo straccio, ma mai giustificare il testo sul cellulare.
Il testo stropicciato a destra offre un ulteriore vantaggio sui dispositivi mobili: il testo viene spesso letto in situazioni di distrazione e i lettori di solito guardano lontano dal testo - per controllare il nome di una stazione o rispondere a una chiamata. Uno straccio crea una forma casuale lungo la colonna di destra che aiuta l'occhio a riposizionare la sua ultima posizione, con una rilettura minima.
6. Riduci il contrasto
Mentre vogliamo incoraggiare il contrasto tra testo e sfondo, vogliamo ridurlo tra diversi livelli di testo.
Sui dispositivi mobili, il testo è sostanzialmente meno visibile e il contrasto diventa esagerato
La ragione di ciò è che i nostri cervelli giudicano l'importanza in base al contesto. I tuoi titoli potrebbero essere due, o anche tre, moltiplicato per le dimensioni del tuo corpo del testo sul desktop, e ciò funziona perché più testo è sullo schermo. Sui dispositivi mobili, il testo è sostanzialmente meno visibile e il contrasto diventa esagerato.
La maggior parte dei designer usa una sequenza di Fibonacci di qualche tipo per dimensionare il testo. Per i dispositivi mobili, stringere i rapporti per ridurre il contrasto delle dimensioni dei caratteri. Ad esempio, se stai utilizzando la sezione aurea per aumentare la dimensione, moltiplichi per 1,618. Per i dispositivi mobili, prendi la percentuale più piccola e moltiplicala per 1.382.
Gli schermi desktop tollerano scale tipografiche più estreme rispetto agli schermi mobili.
7. Regolare il tracciamento in scala
Quando modifichiamo le dimensioni dei caratteri per i dispositivi mobili, dobbiamo essere consapevoli dei cambiamenti necessari nel monitoraggio.
(Lasciatemi fare questa premessa dicendo che non dovresti regolare la crenatura, mentre il crenatura è la spaziatura di due coppie di lettere in modo che lo spazio tra di loro sia otticamente coerente con lo spazio tra gli altri caratteri. e probabilmente ci sono voluti mesi. Se hai selezionato un font professionale, è stato eseguito correttamente e, se ritieni che non sia stato eseguito correttamente, trova un font diverso.)
Il monitoraggio non è crenatura. Il tracciamento è la spaziatura delle lettere applicata a tutti i caratteri nel carattere. Di solito non devi regolare il tracciamento neanche.
Le eccezioni a tale regola riguardano testo di grandi dimensioni, ad esempio intestazioni e testo di piccole dimensioni, ad esempio note a piè di pagina. Il testo più grande richiede meno tracciamento e il testo più piccolo richiede più tracciamento. Il primo è dovuto al raggruppamento, e quest'ultimo è a vantaggio del contrasto. Se hai apportato modifiche alle intestazioni o se stai utilizzando un tipo di carattere di visualizzazione che di solito ha un tracciamento più stretto, potrebbe essere necessario allentare leggermente il tracciamento mentre lo riduci.
Sommario
La tipografia è un mestiere che i designer trascorrono per tutta la vita, proprio perché ogni testo, ogni carattere e ogni tecnologia porta nuove sfide. Non ci sono regole rigide che funzioneranno sempre in ogni situazione.
Quando si aspira alla leggibilità, ci sono tre principi da tenere a mente: un flusso regolare lungo le linee, una chiara gerarchia spaziale e un contrasto adeguato. Questo è particolarmente vero per il web mobile.
Non c'è una regola che non possa essere annullata dalle prove dei tuoi occhi, ma le linee guida qui serviranno come punto di partenza ideale per un testo ben disposto sui dispositivi mobili.