Non perderti una notizia!

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Sì, voglio ricevere aggiornamenti sulla formazione e sugli eventi di MailUp.
Ricevi aggiornamenti
su Messenger
10 min
  • 22

Sarà successo a tutti, prima o poi: ci si innamora di un font, lo si inserisce nelle proprie comunicazioni, salvo poi accorgersi che nelle email recapitate è svanito, sostituito da un banalissimo Arial o (peggio ancora) Times New Roman.

Questo avviene di norma perché il font prescelto non è tra quelli standard per il web e non è quindi supportato dal device su cui si visualizza il messaggio. In questo post analizzeremo quali sono i font adatti all’utilizzo sul web, come aggirare i limiti che si presentano e quali sono le best practice per le campagne email.

Quali i sono i font standard per il web?

La parte testuale è, a tutti gli effetti, uno dei componenti di maggior importanza all’interno di una email. Lo stile, la disposizione e la grafica di tale testo costituiscono la sua veste tipografica, un elemento in grado di cambiare radicalmente l’aspetto di un messaggio se utilizzato al meglio. Il guaio è che la resa grafica dei font varia enormemente a seconda del device di fruizione e del client che apre il messaggio. 

Si definiscono font standard per il web quei pochi che sono supportati da tutti i sistemi operativi e appaiono quindi correttamente in qualunque ambiente/modalità/device di visualizzazione. I font standard sono i seguenti:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Dal momento che garantiscono una visualizzazione ottimale, questi font sono la scelta più sicura per le campagne email. Lo svantaggio è che, essendo in numero ridotto, limitano non poco il potenziale creativo dei messaggi. Per fortuna, però, esistono molti modi per aggirare questo limite.

Un bravo email designer, innanzitutto, sa sfruttare al massimo il potenziale tipografico dei font bilanciando testo, immagini, spaziature e altri elementi grafici. È inoltre possibile utilizzare font diversi da quelli standard limitando al contempo gli svantaggi derivanti dal mancato supporto. Un’opzione è utilizzare delle serie di caratteri – come i Google Web Fonts – che vengono scaricati dal browser contestualmente all’apertura del messaggio.

Implementando un CSS specifico, inoltre, è possibile far sì che il sistema sappia con quale font rimpiazzare il carattere che non visualizza correttamente: una sorta di font “di riserva” (in inglese font stack) che permette di controllare il danno della mancata visualizzazione.

L’editor BEE di MailUp include una funzione intelligente pensata proprio per risparmiare a chi compone l’email la costruzione di un foglio CSS: nel momento della scelta del font, BEE includerà automaticamente una lista di caratteri di riserva (a questo link le specifiche).

font email bee mailup

Ecco tre fattori da tenere a mente nello scegliere e definire i font per le tue campagne email.

Il font giusto per il corpo della mail

font graziato bastone mailup

Con un articolo che ha fatto notizia, Bloomberg ha bocciato definitivamente l’utilizzo di Arial ed Helvetica nelle email, definendoli “non ideali” per questo utilizzo. La ragione sta nel disegno troppo uniforme di alcune lettere – come p, b, q, d – che risultano difficili da distinguere l’una dall’altra.

“È sempre meglio usare un font in cui la forma delle lettere non sia ambigua”, consiglia il tipografo Gerry Leonidas nell’articolo. Meglio i graziati quindi, le cui terminazioni aiutano a dare un’identità univoca a ciascun carattere. L’immagine in alto riassume la differenza tra font con grazie o graziati (detti serif in inglese) e senza grazie o bastoni (sans serif).

Le migliori alternative ad Arial ed Helvetica? Georgia e Verdana. Quando leggiamo le email, l’occhio di norma scansiona velocemente un paio di paragrafi al massimo. Una spaziatura significativa e costante tra le lettere aiuta la lettura veloce, mentre la presenza delle grazie facilita il riconoscimento dei caratteri da parte dell’occhio, specialmente in presenza di blocchi di testo lunghi e compatti. 

Un buon esempio di graziato in azione è offerto dalla newsletter di Enrica Crivello (Marketing con un Cuore), che sceglie il Georgia per alleggerire le sue email interamente testuali, il cui unico vezzo è l’alternanza cromatica tra grigio antracite e rosa. 

crivello font email mailup

Se i blocchi di testo sono brevi e alternati a numerose immagini, invece, va bene anche utilizzare un font senza grazie. IFTT, ad esempio, sceglie l’Helvetica per il corpo del messaggio e l’Arial per la call to action. Il risultato è chiaro, leggibile e piacevole.

iftt font email mailup

In conclusione: in linea generale è bene scegliere un font graziato se le email prevedono blocchi di testo medio-lunghi. In particolare, i caratteri come Verdana e Georgia facilitano la lettura veloce del testo da parte dell’utente. Se i messaggi contengono solo blocchi di testo brevi e compatti, tuttavia, un font sans serif può funzionare altrettanto bene, se non meglio.

Il font giusto per i titoli

I titoli servono a definire la struttura di un messaggio, scandendo le sezioni di testo e i diversi moduli di contenuto. Hanno inoltre la funzione di facilitare la lettura della mail e di velocizzarne la comprensione. Esistono diversi modi per sfruttare la formattazione dei titoli per migliorare la leggibilità delle email.

a) Stesso font, ma in dimensioni/colori/stili diversi

Utilizzare lo stesso font per titoli e corpo conferisce semplicità e chiarezza alle email. L’importante è differenziare le diverse parti del testo usando elementi come spaziature, dimensioni e formattazioni (grassetto, maiuscole, etc). Questa strategia può servire a rafforzare l’identità grafica del brand e a garantire una visualizzazione uniforme delle email su tutti i device/client. 

Il consiglio è di (almeno) raddoppiare il corpo carattere dei titoli rispetto al corpo dell’email, spaziandoli bene per migliorare la leggibilità. Ecco l’esempio di Skyscanner, che utilizza l’Arial in tutti i punti della mail:

skyscanner font email mailup

b) Alternanza di font differenti

Per ottenere un effetto a contrasto molto raffinato è possibile alternare un font bastone nel corpo della mail con un graziato nei titoli. Questo tipo di combinazione è da sempre consigliata nel mondo della tipografia perché praticamente impossibile da sbagliare. Il segreto è evitare di utilizzare due font “forti”, dalla personalità decisa, ma preferire l’alternanza tra un carattere ornato e protagonista con uno più sobrio e discreto.

Ecco le possibili combinazioni. Abbina un graziato standard…

  • Courier
  • Georgia
  • Times New Roman

… con un bastone standard:

  • Arial
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet
  • Verdana

Anche quando i font utilizzati sono diversi, i titoli dovrebbero avere una dimensione almeno doppia rispetto al corpo del testo. Puoi anche giocare con colori e formattazioni per sottolineare il contrasto. Ti portiamo due esempi molto puliti ed efficaci: la newsletter di Medium e una DEM di Kusmi Tea. Entrambi utilizzano un font con grazie per i titoli dei post e un font senza per il corpo del testo, con in più, nel caso di Kusmi Tea, un ulteriore tocco di vivacità dato dai colori.

medium font email mailup

kusmi tea font email maiilup

c) Font non standard? Inseriscilo in grafica

L’identità visiva di un brand, spesso, passa per font proprietari o loghi che di standard o web safe non hanno proprio nulla. Può essere importante mantenere questi tratti distintivi nelle email, e allora la soluzione è semplice: utilizza font standard per i blocchi di testo, e inserisci il font non standard nelle immagini, come sceglie di fare Vueling.

vueling font email mailup

In questo modo si aggirano potenziali difficoltà di visualizzazione del font da parte dei client, ma si apre la via ai problemi che a volte accompagnano la visualizzazione delle immagini, che possono risultare disabilitate e quindi “bucate” presso alcuni client. È comunque un rischio che vale la pena correre.

Se è previsto del contenuto testuale particolarmente rilevante all’interno dell’immagine, è bene riportarlo anche in un blocco di testo per assicurarsi che non vada perso qualora l’immagine risulti “bucata”. Così fa, ad esempio, LOVEThESIGN con il codice del buono sconto:

lovethesign font email mailup

In conclusione: sottolinea la brand identity in testa al messaggio, inserendo il logo e un titolo in font proprietario, salvo poi passare a un font standard meno rischioso nel resto della email.

E i link?

Uno dei benefici di inserire tante immagini nelle email è il poter associare a ciascuna un link cliccabile. In questo modo, in qualunque punto della mail l’utente si trovi, sarà sempre portato alla pagina di destinazione per poter continuare l’acquisto o la navigazione.

Se però la scelta di layout va nella direzione di una mail meno grafica e più testuale, è possibile comunque linkare il testo in modo discreto, funzionale ed efficace. Il testo linkato non deve per forza avere quella brutta formattazione blu sottolineata: è consigliato invece giocare solo con i colori (usando ad esempio quelli del brand) oppure solo con la sottolineatura, mantenendo lo stesso colore del testo non linkato.

L’alternativa radicale? Non differenziare i link in alcun modo, e in questo modo linkare tutto. Il risultato sarà più semplice e con meno distrazioni, e allo stesso tempo più efficace nel portare traffico al sito di destinazione. Ecco l’esempio di Intimissimi, che rende cliccabili anche tutte le aree bianche del messaggio:

intimissimi font email mailup

In conclusione: l’importante è sperimentare. Prova diverse combinazioni di font e di colori finché non trovi quella che più si adatta allo stile del tuo brand e alla sua identità visiva. Ricorda solo che è preferibile avere link semplici e poco evidenti.

Le best practice per scegliere il font giusto per le tue email

  1. Per il corpo della mail utilizza sempre un font standard per il web. Se il messaggio contiene blocchi di testo consistenti, preferisci un font graziato.
  2. Poni attenzione alla formattazione dei titoli, in modo che risaltino. Gioca con le dimensioni e prova un font bastone.
  3. Porta traffico al sito linkando tanto ma in modo poco evidente, senza distrarre dalla fruizione del messaggio.
  4. Vuoi saperne di più e approfondire le best practice sull’email design? Scarica la guida!

guida email design mailup

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

Email di buon compleanno: il modo più semplice per quadruplicare i tassi di conversione

Una delle tipologie di email automatiche più frequenti, più semplici e più efficaci è l'email di buon compleanno. In questo blog post scopriamo come strutturarla, ...

Continua a leggere

Come creare una CTA bulletproof per le email

Il bottone di call-to-action è la chiave per portare il lettore a compiere l'azione desiderata nell'email. In questo tutorial pratico impariamo a progettare una CTA ...

Continua a leggere

SMTP: che cos’è e come può aiutare la tua strategia di Email Marketing

Da semplice protocollo a server integrabile in qualsiasi sistema esterno, per inviare email transazionali personalizzate e con elevati tassi di recapito. Scopri l’evoluzione dell’SMTP in ...

Continua a leggere

Controllo Deliverability: miglioriamo la consapevolezza e l’impiego dell’autenticazione delle email

Sei davvero chi dici di essere? Non posso verificarlo. Quindi sposto la tua email nella cartella spam. Ecco cosa succede a molte campagne email. Questo è uno dei ...

Continua a leggere

Email transazionali per il Non Profit: uno strumento utile a costi ridotti

Nel mondo Non Profit, come in tanti altri settori, spesso le email transazionali vengono trascurate, prestando poca attenzione al copy e alla grafica. Questo ne vanifica il ...

Continua a leggere

Come scrivere un’email di conferma iscrizione che lasci il segno

Quando considerata esclusivamente 'di servizio', l'email di conferma iscrizione viene spesso relegata a un messaggio scarno, impersonale, troppo debole. È invece importante utilizzare anche questo momento ...

Continua a leggere