19 Competenze tipografiche che ogni designer dovrebbe conoscere

Oltre il 90% di tutte le informazioni web è costituito da testo. Sebbene i progettisti impieghino molto tempo a decidere la grafica, l'interfaccia e lo stile della pagina, è necessario un uguale periodo di tempo per scegliere la tipografia perfetta. Soprattutto quando si tratta di dispositivi mobili, la tipografia del Web mobile richiede un'attenzione particolare poiché presenta 2 sfide principali: spazio disponibile e dimensioni tipografiche. Questo articolo trasmetterà 19 suggerimenti tipografici necessari per sbloccare un'interfaccia utente impressionante per il tuo design web mobile con una ricca esperienza utente.

Dai un po 'di spazio

La tipografia mobile non consiste nell'organizzare le lettere sullo schermo, ma nell'organizzarle in modo da renderle leggibili agli utenti. Utilizzare correttamente lo spazio bianco e dare uno spazio adeguato tra lettere, righe e paragrafi in modo che l'utente possa leggere correttamente il contenuto senza la necessità di ingrandire.

Suggerimento bonus: crenatura

La crenatura non faceva parte di questo elenco fino a quando non ho capito quanto potesse essere importante dal punto di vista della progettazione dell'interfaccia utente. Quindi sappiamo dal primo suggerimento che è necessario fornire spazio, ma Kerning lo prende di livello. La crenatura è l'arte di regolare lo spazio fornito tra i personaggi per far risaltare il contenuto e allo stesso tempo facile da leggere. Esistono 3 tipi di crenatura, si può optare per.

Sebbene visibile nell'immagine sopra, c'è molto altro da sapere sulla differenza tra questi vari tipi di crenatura. Curioso? Leggilo da questo blog, "Kerning: Don Cramp Your Style".

Dimensione carattere appropriata

Puoi mantenere i caratteri del desktop a una dimensione di 14px ma quando lo stesso viene fatto su dispositivo mobile, il risultato potrebbe risultare in contenuti più piccoli o più grandi a seconda della risoluzione del dispositivo. Controllare la dimensione del carattere in tutte le risoluzioni e utilizzare le query multimediali in modo che la tipografia risultante del Web mobile sia leggibile su tutti i dispositivi portatili di diverse risoluzioni.

Utilizzare le unità di misura appropriate

Per le dimensioni del carattere del Web mobile, la tipografia non utilizza i punti (pt). Usa invece ems o rems. Questo è preferito dalla maggior parte dei progettisti poiché queste unità rendono il contenuto scalabile poiché si basano su percentuale e non su dimensioni statiche.

Scegli colori contrastanti

Un migliore contrasto garantisce una migliore leggibilità. Mentre pensi al colore della tipografia web mobile, pensa al confronto tra chiaro e scuro. Se lo sfondo della pagina è di colore scuro, utilizzare caratteri di colore chiaro. Ad esempio caratteri bianchi su sfondo nero e viceversa.

Garantire una migliore leggibilità

Ci sono molti caratteri gratuiti ed eccitanti disponibili oggi, ma se hai intenzione di usarli nei tuoi contenuti, dovresti controllare ogni singolo alfabeto per assicurarti che la famiglia di caratteri e le dimensioni che stai usando rendano leggibili quei contenuti. Non ha senso usare quei caratteri fantastici se il lettore non è in grado di capire il tuo contenuto.

Allineare correttamente i testi

L'allineamento è un fattore importante quando si tratta di tipografia Web mobile. Al cervello umano piace leggere il testo in blocchi sul piccolo schermo. Di solito, i testi sono allineati a sinistra, il che significa che c'è un bordo frastagliato sul lato destro del blocco. Regolarlo correttamente e assicurarsi che se si sta utilizzando un allineamento "giustificato", non si ottiene uno spazio bianco non coerente.

Imposta il comando

La tipografia nel web mobile richiede un vantaggio costante (lo spazio tra le linee). Quando è troppo piccolo, in un contenuto di grandi dimensioni, è difficile seguire la fine di una riga e l'inizio della successiva. Se troppo grande, genera spazi bianchi non necessari. Assicurarsi di non interrompere il flusso regolare di una linea.

Trova il tuo punto debole

Tutti i caratteri hanno un punto debole. La combinazione di dimensione del carattere e iniziale in cui garantiscono la migliore leggibilità e una minore distorsione causata dall'antialiasing predefinito del browser. Sperimenta il carattere tipografico che stai utilizzando e trova quel punto debole.

Utilizzo degli spazi bianchi

Gli spazi bianchi sono spesso utilizzabili. In caso di CTA o collegamenti cliccabili, utilizzare uno spazio bianco in modo che possano essere distinti e cliccati usando l'indice o il pollice. Poiché l'utente non utilizza un mouse come in un desktop, il pollice o l'indice è considerato il cursore, che ha uno spessore di circa un millimetro. Pensaci e utilizza gli spazi bianchi in modo efficace.

Prendi in considerazione la larghezza dello schermo

Durante la progettazione della tipografia sul Web mobile, devi pensare a come le persone leggono i testi. Di solito, ci sono 2 tipi di larghezza in un dispositivo mobile, verticale e orizzontale. Pertanto, durante la progettazione della tipografia, prendere in considerazione entrambe le larghezze e impostare l'allineamento e la spaziatura di conseguenza.

Rendi la tua tipografia distintiva

La tipografia della tua pagina web mobile dovrebbe avere una caratteristica distinta, sia nell'aspetto che nel colore o in effetti aggiuntivi. Soprattutto, nei contenuti che desideri siano letti dagli utenti, scegli attentamente i caratteri tipografici per i titoli che li distinguono dagli altri.

Controlla ridimensionamento e proporzioni

Controlla i contenuti in diversi dispositivi mobili di diverse risoluzioni. Inoltre, ingrandisci e rimpicciolisci per assicurarti che la tipografia web mobile si ridimensioni e si adatti all'intera larghezza dello schermo. La reattività dei tuoi contenuti è un must e devi testarli e scrivere media query nel caso in cui si verifichino interruzioni per una determinata risoluzione.

Prendi in considerazione la funzionalità

Esistono molti elementi di testo in un sito Web mobile che consente all'utente di eseguire determinate azioni, come inviare un messaggio o effettuare una chiamata. La tipografia del Web mobile deve essere progettata attentamente per garantire che gli utenti comprendano che un testo specifico è in realtà un CTA o esegue una determinata funzionalità.

Il testo della pagina è pesante?

Se la tua pagina è pesante in termini di testo, come un blog o un articolo di notizie, è necessaria pochissima interazione. Lo scopo principale dell'utente è leggere, assicurarsi che la tipografia del Web mobile sia progettata di conseguenza.

L'interazione della pagina è pesante?

Se la tua pagina comporta più azioni al passaggio del mouse e clic insieme a digitazione, modifica ecc., Modifica i testi di conseguenza. Assicurati che la dimensione del carattere non sia inferiore a 18 px in modo che gli utenti possano capire che si suppone che si verifichi qualche azione una volta che fanno clic o passano il mouse sul testo.

Web design reattivo

Come accennato in precedenza, i pixel dovrebbero essere evitati durante la tipografia del web mobile. Hanno uno standard di dimensioni fisse. Usa invece em o rem. Sono basati su percentuale e scalabili. Quando i contenuti vengono visualizzati su un dispositivo mobile con una risoluzione diversa, regolano le loro dimensioni di conseguenza. Ricorda, il contenuto del testo della tua pagina web reattiva dovrebbe essere scalabile e regolare le loro dimensioni automaticamente in base alla larghezza dello schermo. È possibile utilizzare LambdaTest per eseguire i test reattivi. Con un solo clic, puoi verificare la reattività del tuo sito su oltre 44 dispositivi mobili con risoluzioni diverse.

Associazione di più caratteri

Durante la progettazione della tipografia del Web mobile, è possibile combinare caratteri diversi per intestazione e paragrafo, etichette, ecc. Ma assicurarsi che corrispondano tra loro. Mescolare l'algerino per la voce e il fumetto senza MS per un paragrafo è una cattiva idea.

Peso carattere: pesante o leggero?

I caratteri mobili sono relativamente più piccoli rispetto ai desktop. Bisogna fare attenzione a renderli leggibili o cliccabili quando coinvolgono la loro funzionalità. La chiave per decidere il peso del carattere sta sperimentando. Sebbene attualmente, la tipografia audace e di grandi dimensioni per il Web mobile sia una tendenza, è necessario utilizzare più pesi di carattere e testare l'applicazione su risoluzioni diverse per garantire che non vi siano interruzioni da nessuna parte.

Tieni presente lo sfondo

Se lo sfondo è statico e monocromatico, come accennato in precedenza, è possibile utilizzare i colori dei caratteri con il contrasto opposto. Ma quando uno sfondo è un'immagine o un video, la scelta ideale sarebbe quella di sperimentare colori diversi e verificare quale si adatta correttamente e rendere leggibile il contenuto.

La tipografia è un mestiere delicato. I designer spesso passano una vita ad affinare le loro capacità tipografiche. Con ogni nuovo carattere tipografico che introduce una nuova sfida, siamo sicuri che i suggerimenti di tipografia mobile sopra menzionati saranno utili la prossima volta che si progetta una nuova pagina Web mobile. Inoltre, tieni presente di eseguire test di compatibilità tra browser per assicurarti che i caratteri tipografici o gli stili che stai utilizzando funzionino correttamente in tutti i browser. LambdaTest può essere utilizzato per eseguire test di compatibilità tra browser su più di 2000 browser diversi e le loro versioni. Assicurati che il carattere tipografico sia supportato su tutti i browser richiesti e presenti ai tuoi utenti la ricca esperienza utente che meritano.

Originariamente pubblicato su LambdaTest

Originariamente scritto da Arnab Roy Chowdhury

Ulteriori letture ...

Se ti piace il post, batti le mani e aiuta anche gli altri a trovarlo.