Il tuo eCommerce non decolla?
Scopri la Performance Academy: i corsi formativi gratuiti
per migliorare i risultati del tuo negozio online

Una guida alla tipografia responsiva

Una guida alla tipografia responsiva

Oggi, a causa, anzi, grazie ai costanti progressi tecnologici, gli utenti richiedono e pretendono la migliore esperienza digitale possibile, questo perché come sappiamo il rischio di abbandono del sito web, o come nel nostro caso degli e-Commerce è elevato.

Durane questi anni lavorando a diversi progetti, questa necessità è passata principalmente attraverso il Responsive Web Design, l’attenzione a questo tema per cui è ai massimi storici poiché gli utenti tendono a utilizzare una varietà di dispositivi con schermi di dimensioni diverse per accedere a Internet e ai negozi elettronici. Ciò rende molto importante che il nostro store sia visualizzabile in modo ottimale su qualsiasi dispositivo venga fruito.

Un’aspetto spesso dimenticato: la tipografia

La stragrande maggioranza degli articoli che troviamo sul web trattano di Responsive Web Design e sono focalizzati su due aree principali: layout e griglie fluide, immagini, box e video che si adattano al loro contenitore.
Un argomento poco trattato invece è quello della tipografia responsiva.
Per la maggior parte dei siti, se non tutti, il testo, inteso come il “contenuto”, rappresenta l’elemento chiave attraverso il quale guidare l’utente verso l’acquisto dei prodotti.
Un’informazione visualizzata troppo piccola, troppo grande, o “male” farà desistere e renderà pessima la customer journey dei nostri potenziali clienti.

La buona notizia è che la tipografia responsive non è impossibile o tremendamente difficile da apprendere. Serve certamente attenzione, comprensione dell’argomento, sottovalutare il problema è una pessima scelta strategica.

La scala tipografica per il tuo progetto

Non esiste un numero magico quando si tratta di selezionare la dimensione dei caratteri da utilizzare.Mi sono imbattuto in diversi articoli e spesso la scala tipografica viene descritta dalla necessità di adattare la tipografia a seconda dei diversi mezzi sul quale viene visualizzato.
Quando si considera un computer desktop o un laptop la distanza tra il lettore e lo schermo è relativamente maggiore, quindi, la dimensione del corpo del testo deve essere elevata rispetto agli smartphone che i lettori tendono a tenere relativamente vicino al proprio volto, quindi in questi casi una dimensione del carattere relativamente più piccola è funzionale al nostro scopo.

Come attuare la tipografia responsiva? Css e Mediaqueries.

CSS

La maggior parte dei designer è abituato ancora ad utilizzare i pixel per le dimensioni del testo altri hanno imparato ad usare un altro standard di misura gli “em“. Usare gli “em” è una scelta già più funzionale, in quanto permettono agli utenti di ridimensionare il font nel browser. Però gli “em” hanno un grosso svantaggio, sono “relativi”, cioè dipendono, dall’elemento html che li contiene e questo vuol dire che il loro uso è un po’ più complicato rispetto a quello dei pixel.
Calcolare la dimensione di font infatti risulta macchinoso e disomogeneo, quando nello stesso sito sono presenti diversi elementi di cui tenere traccia.

I “rem” offrono una valida alternativa agli “em”. Essi si comportano alla stessa maniera degli “em”, ad eccezione di una differenza fondamentale: i “rem” sono relativi alla dimensione del font assegnato tag <html> che apre la pagina web piuttosto che ad ogni loro elemento contenitore. Questa differenza sostanziale agevola non di poco il corretto ridimensionamento del font.
Facciamo un esempio pratico

EM
html{font-size:10px}
body{font-size:16px}
body div{font-size:2em} --> Corrisponde a 32px
body div p{font-size:2em} --> Corrisponde a 32x2=64px
REM
html{font-size:10px}
body{font-size:16px}
body div{font-size:2rem} --> Corrisponde a 20px
body div p{font-size:2rem} --> Corrisponde a 20px

Come puoi notare la dimensione “rem” in questo caso facilità il compito del progettista che deve tenere a mente solo la dimensione del font del tag html.

MEDIAQUERIES

Attraverso le  mediaqueries possiamo andare ad identificare i diversi dispositivi per la loro dimensione, attraverso semplici linee di codice Css, possiamo ingrandire o diminuire la dimensione del font raggiungendo la massima ottimizzazione.

@media (max-width: 640px) { 
body {font-size:1.3rem;} 
} 
@media (min-width: 641px) { 
body {font-size:1.2rem;}
} 
@media (min-width:960px) { 
body {font-size:1.4rem;} 
} 
@media (min-width:1100px) { 
body {font-size:1.6rem;}
}

Conclusioni

Se in tema di Responsive Web Design ci si concentra maggiormente sui layout, la tipografia non è argomento da sottovalutare o trascurare. Dedicare tempo alla tipografia, in fase di progettazione di un sito, è molto importante, alla pari di tutti gli altri elementi. Mantenere alta la leggibilità dei contenuti è una componente vitale per la fidelizzazione dell’utente e per i nuovi visitatori.
Il tuo store è ottimizzato? Scrivici qui sotto sapremo darti ottimi consigli.

Invia commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Diamo i numeri!
home_icon_utenti
570

milioni di mail
I volumi annui delle nostre campagne email marketing.
home_icon_campagne
7.000

sviluppatori
La community che ha utilizzato tecnologia MW.
home_icon_fatturato
18

anni di attività
Un indicatore di esperienza e affidabilità.
home_icon_lead
15
persone + 20 collaboratori esterni
Un team completo di professionisti specializzati.
home_icon_crescita
1000 +

clienti
Le aziende che ci hanno dato fiducia.
Scarica “Mobile Commerce in Italia”

Inserisci nome e indirizzo mail per scaricare subito e gratuitamente il documento.

Ho letto e accettato l’informativa sulla privacy.
* Questa informazione è necessaria, grazie.

×
Scarica “e-Commerce Launch Checklist”

Inserisci nome e indirizzo mail per scaricare subito e gratuitamente il documento.

Ho letto e accettato l’informativa sulla privacy.
* Questa informazione è necessaria, grazie.

×
Scarica “Nuova Presentazione Merlin Wizard”

Inserisci nome e indirizzo mail per scaricare subito e gratuitamente il documento.

Ho letto e accettato l’informativa sulla privacy.
* Questa informazione è necessaria, grazie.

×