28 aprile 2020

I font migliori per le email: consigli e trucchi per l’uso

Oksana Zhylka
Oksana Zhylka Guest Writer
Sommario
  1. Come scegliere il font giusto per un’email?
  2. Scegliere un font Serif o Sans Serif?
  3. Dimensione del font
  4. Spaziatura
  5. Link e pulsanti
  6. Testo nei banner
  7. Colori
  8. Tag HTML per la formattazione del testo
  9. Migliori prassi per l’implementazione dei font adatti al web 
  10. Per concludere
1.
Come scegliere il font giusto per un’email?

Una delle scelte cruciali quando si crea un’email è quella del tipo di carattere. Spessore, altezza, larghezza, colore, forma, spaziatura... È tutto importante? Sì, ma la cosa più importante è che sia facile da leggere, tutte le altre sono caratteristiche minori.

Guarda il nostro breve video sui font, le loro varie categorie, i font adatti al web, e come aggiungere font festivi su Stripo. E la cosa più importante – come scegliere il font giusto per i tuoi modelli di email:

Hai due opzioni quando si tratta di scegliere il miglior font per le email nel 2018. La prima consiste nello scegliere un font adatto al web, ossia un font standard, incluso in modo predefinito nella maggioranza dei sistemi operativi, e usato dalla gran parte dei client di posta elettronica.

Di seguito trovi una lista di 10 font adatti al web che puoi usare con la certezza assoluta che saranno visualizzati da tutti i destinatari esattamente come li vedi tu:

1. Arial
Creato nel 1982, è incluso con tutte le versioni di Microsoft, a partire da Windows 3, e con Apple Mac OS X. Supportato da tutti i client di posta elettronica. Grazie ai tagli diagonali ha un aspetto meno meccanico di quello degli altri font senza grazie.

2. Helvetica
Un carattere sans-serif, ossia “senza grazie”, uno dei tipi di font più usati, con lettere arrotondate e maiuscole larghe. Creato nel 1957

3. Times New Roman
Un font dotato di lettere minuscole alte, leggermente compresse, tratti discendenti e ascendenti brevi. Commissionato dal quotidiano “The Times” nel 1931.

4. Verdana
Creato per essere leggibile su schermi a bassa risoluzione, è un font con caratteri minuscoli alti e larghi.

5. Courier / Courier New
Ideato nel 1955, è simile a Times New Roman, ma a spaziatura fissa. Courier New ha punti e virgole più pesanti rispetto al Courier originale. Courier è il font normalmente usato per i copioni dell’industria cinematografica.

6. Tahoma
Simile a Verdana, ma con lettere più sottili, contatori piccoli e spaziatura stretta. Usato come font predefinito in Windows 95, 2000, e XP.

7. Georgia
Ha lettere minuscole alte, linee più spesse della media, e caratteri numerici che si adattano bene alle lettere dato che sono molto simili come dimensioni. 

8. Palatino
Creato originariamente per le intestazioni, le pubblicità e le pubblicazioni a stampa. Più largo degli altri font tradizionali con grazie.

9. Trebuchet MS
Ha tratti discendenti accorciati per alcune lettere, in grassetto le lettere sono più spigolose e meno arrotondate, mentre ha punti arrotondati per le minuscole. Rilasciato nel 1996.

10. Geneva
Una versione ridisegnata di Helvetica, si distingue soprattutto per la presenza di alcune legature di base. 

L’altra opzione è quella di includere un font preso dal web, ma questo implica il rischio che il font non venga visualizzato in modo corretto perché il client di posta elettronica non lo supporta. In questo caso il client passerà a un font predefinito.

Ecco un elenco di font predefiniti per alcuni dei client email più diffusi:

  • iCloud Mail usa Helvetica come carattere predefinito.
  • Gmail usa Arial.
  • Microsoft Outlook nelle sue versioni più vecchie spesso usa Calibri.
  • Outlook 2007/2010/2013 usa Times New Roman come font predefinito.

Come scegliere il font giusto per un’email?

Se nella scelta del font ti basi solo sulle tue preferenze personali, corri il rischio di usare un font che piace solo a te e a nessun altro, e magari agli occhi degli utenti il messaggio può apparire troppo vecchio stile o di difficile fruizione.

Usare troppi font insieme è quantomeno sconsigliabile, nel peggior dei casi diventa fastidioso. Limitati a uno o due tipi di carattere per email. Sarebbe ideale usarne uno solo in due dimensioni diverse: una più grande per l’intestazione e una più piccola per il resto.

In realtà ci sono solo due opzioni nella scelta di un font. Puoi sceglierne uno sicuramente adatto al web e avere la certezza che sarà visualizzato nello stesso modo da tutti, oppure usarne uno personalizzato scaricato dal web e sperare che sia supportato da tutti i client di posta elettronica, cosa quasi impossibile dato che Gmail, Yahoo Mail e Outlook 2007/10/13/16 non supportano questi font. Probabilmente solo gli utenti con iPhone e iPad potranno visualizzarli. Quindi non ti consigliamo di usare font presi dal web per non compromettere la fruibilità delle email.

I testi che scrivi con i font devono essere innanzitutto leggibili. In italiano non distinguiamo tra readability e legibility, ma in inglese rappresentano due concetti leggermente diversi. Readability si riferisce alla leggibilità più in termini di formattazione e di paragrafi, mentre con legibility intendiamo la leggibilità in termini di velocità e facilità di lettura, quindi è dettata da quanto sono visibili, chiari e distinti i caratteri che compongono il font.

Un esperimento sulla leggibilità-readability dei font è stato condotto nel 2010 da Norbert Schwarz e Hyunjin Song, con risultati straordinari. Un font decorativo viene letto in quasi il doppio del tempo rispetto a un font predefinito facile da leggere. Guarda che differenza in termini di minuti tra lo stesso testo con due font diversi (8,2 minuti stimati contro 15,1 minuti stimati):

email font experiment, clear fonts are better to read

Scegliere un font Serif o Sans Serif?

Un’altra scelta che dobbiamo fare è tra font serif (con grazie) e sans serif (senza grazie). Cosa significano questi termini e quali sono le differenze?

difference between serif and sans serif fonts

I font serif sono quei font che hanno un piccolo tratto decorativo alla fine di ogni linea, ossia le “grazie”. I font serif più diffusi sono Times New Roman e Georgia.

I font sans serif, o senza grazie, sono appunto quelli privi di questi tratti decorativi. I font sans serif più diffusi sono Arial, Trebuchet MS, e Helvetica.

Nelle nostre ricerche abbiamo trovato varie fonti che dichiaravano che i caratteri serif sono i più adatti per le email, ma crediamo si tratti di voci infondate. Se ci basiamo sul presupposto che le email vengono visualizzate solo da dispositivi elettronici, che siano desktop o mobile, i font migliori sono quelli senza grazie, dato che i caratteri sans serif sono più facili da leggere su uno schermo.

Una cosa interessante che abbiamo notato è che l’articolo sul blog di email design di Beefree in cui viene consigliato l’uso di caratteri con grazie per le email ricche di testo, è esso stesso scritto con un font senza grazie:

sans serif is better for screens

Perché non usare un font serif se apprezzano tanto i caratteri del genere? Questo sembra provare che i caratteri sans serif siano migliori, dato che ciò che vale per le pagine web vale anche per le email. Usa font serif solo per intestazioni e altri titoli, se necessario.

Dimensione del font

Se cambi il font, assicurati che quello che hai scelto non appaia più piccolo del precedente. Spesso dei font diversi hanno caratteri dall’altezza diversa, quindi la stessa dimensione di 14px apparirà diversa in base al font scelto.

La dimensione migliore da usare per le email è di 14 px o superiore per gli utenti desktop, 16 px o superiore per gli utenti da dispositivi mobile. Se usi un modello di email responsive, assicurati che la dimensione dei caratteri aumenti automaticamente nella versione per mobile.  

Ho creato un modello di email usando Stripo, tramite il quale possiamo paragonare gli stessi font a dimensioni diverse. Ecco i risultati:

how to choose a font for emai and to find the best font size? fonts sizes comparison examples

Insomma, i font da 16px di dimensione hanno un aspetto fantastico, ideale sia per i dispositivi desktop che per quelli mobile.

Spaziatura

È cruciale prestare attenzione allo spazio tra i vari paragrafi, e anche allo spazio che il tuo font crea tra una riga e l’altra. L’altezza di riga più usata varia dai 22 ai 24 pixel. In altre parole, l’altezza ideale sembra essere 1,5em, corrispondente a 24 pixel.

È importante fare attenzione anche allo spazio tra i caratteri, anche se non è possibile pronunciarsi del tutto a favore di una spaziatura espansa o ridotta.

Georgia e Times New Roman hanno spazi troppo piccoli tra le parole, e questo ha un forte impatto sulla leggibilità. Font come Courier e Courier New hanno distanze tra caratteri molto migliori, ed è forse per questo motivo che sono stati tanto popolari nel 2017. 

Usa gli spazi tra gli elementi delle email. Se in un’email c’è un’immagine, assicurati di inserire degli spazi prima e dopo: così facendo migliorerai molto la leggibilità. Naturalmente è meglio allineare al centro elementi grafici come le immagini.

Ecco un esempio di mancanza di attenzione agli spazi:

bad email font and spacing, paragraphs

È possibile avere un’email con più di 1500 parole in un singolo paragrafo? Ovviamente è meglio peccare per difetto che per eccesso in questo caso. 

Ecco un altro esempio:

grey is worse than black for reading, email design, text color

Questo caso è ancora peggiore, dato che c’è anche un font grigio. Tra il colore e le dimensioni troppo piccole del font, la leggibilità ne risente molto. Per non parlare degli spazi, che in effetti ci sono, ma non possono aiutarci quando le frasi e i paragrafi sono così lunghi.

Link e pulsanti

Non usare un font separato per mettere in evidenza i link. Il testo di ancoraggio del link dovrebbe spiegare dove porta il collegamento, ed essere inserito in modo organico nel resto del testo. Non usare “qui” o “link” come testo di ancoraggio, sono parole troppo corte e vaghe perché possano risvegliare l’interesse dei lettori.

I pulsanti sono come i link, ma hanno uno stile più interattivo. È meglio usare entrambi nelle email. Inserisci un link testuale a un articolo da leggere, usa invece un pulsante per rinviare gli utenti a provare un tuo prodotto. 

Una delle tecniche migliori consiste nel far sì che i link siano dello stesso colore del logo. Guarda che bell’effetto otteniamo così facendo:

color identity, the best fonts for logo, text and links

Non ci sono regole precise sul colore da usare per i pulsanti, ma è meglio basarsi sulla psicologia dei colori, cercando di non rovinare il design complessivo con colori troppo sfarzosi.

I due font più adatti ai pulsanti sono Georgia e Verdana. Georgia è un font perfetto anche per intestazioni e titoli. È splendido! L’unica cosa da controllare prima di inviare l’email è come il colore del testo si abbini a quello del pulsante, stando attenti che sia abbastanza visibile da poter esser letto senza difficoltà. Verifica anche che il testo sia ben posizionato sul pulsante e che non fuoriesca dai bordi. 

Ecco un esempio di pulsante usato bene:

the best font for email banner and button design

Ed ecco un esempio in cui c’è un eccesso di link e pulsanti:

too many links and buttons in email design

Testo nei banner

C’è un caso in cui possiamo usare font di qualsiasi tipo, anche decorativi o creati a mano, diversi dal font principale. Parliamo del testo contenuto in un banner, che è quindi parte di un’immagine. 

La priorità nella creazione di un banner è sottolineare l’identità del tuo brand. Puoi usare qualsiasi font per farlo, ma è meglio sceglierne uno leggibile. Non mettere troppo testo sul banner, riserva lo spazio per parole introduttive che risveglino l’interesse degli utenti e li motivino a guardare il resto dell’email.

Ecco due ottimi esempi. Nel primo troviamo font chiari e semplici:

clear font for email banner, the best fonts for emails

Questo banner invece usa un font più decorativo:

decorative font on email banner, the best email fonts

Spetta a te scegliere quale stile usare per ottenere un’email dal design interessante.

Colori

L’unica regola da seguire nell’uso dei colori è quella di sottolineare l’identità di brand. Se però vuoi usare tanti colori per il testo, forse è meglio evitare, dato che il testo potrebbe diventare illeggibile. 

Di solito servono solo 3 colori in un’email: uno per mettere in evidenza il titolo, uno per il resto del testo e uno (il blu) per rendere visibili i link. Nient’altro! Puoi anche ridurre a due colori se mantieni l’intestazione dello stesso colore e la metti in evidenza cambiando il font o la dimensione del testo.

Se vuoi sottolineare una frase o una parola usa il grassetto, usare un colore diverso può causare confusione. I designer di email di solito usano il nero o il grigio scuro per i contenuti che creano, dato che sono i colori migliori per la leggibilità. L’unica eccezione è quando c’è uno sfondo nero: in questo caso è meglio usare il bianco come colore del testo. Evita il grigio chiaro perché può essere poco visibile in base alle diverse impostazioni di contrasto.

Tag HTML per la formattazione del testo

Di solito, i font adatti al web sono dichiarati in CSS, non in semplice HTML, ma esistono varie tag HTML per formattare il testo. Spero che tutti le conoscano già, ma può essere utile ribadirle:

  • Per il grassetto:
    <strong> </strong> o <b> </b>
  • Per creare un elenco puntato nelle email usa questa struttura:
    <ul>
        <li>primo punto</li>
        <li>secondo punto</li>
        <li>terzo punto</li>
    </ul>
  • Per il corsivo, un altro modo per enfatizzare:
    <i> </i> o <em> <em>
  • Per inserire un testo dello stesso font ma di dimensioni minori:
    <small> </small>
  • Per evidenziare un testo in giallo (colore predefinito):
    <mark> </mark>
  • Per indicare che un testo è stato cancellato ma non rimpiazzato:
    <del> </del>
  • Per definire inizio e fine di un paragrafo:
    <p> </p>

Migliori prassi per l’implementazione dei font adatti al web 

In base ai molti test condotti dal team di marketing di eSputnik, i font migliori da usare nelle email sono Arial e Tahoma. Arial è il font più indicato per chi deve impostare campagne di marketing via email. Tahoma è perfetto per le email con molti contenuti e per i testi piccoli.

Usando l’editor di Stripo abbiamo creato un modello di email con lo stesso testo in diversi font e con la stessa dimensione, 18px. Con l’editor di Stripo non ci sono Palatino e Geneva ma ci sono caratteri custom come Roboto e Open Sans, presenti nella gran parte dei sistemi operativi (in ogni caso, se li usi, è meglio impostare un font di ripiego).

Ecco i risultati di questo test, così puoi paragonare i vari font e scegliere quello più adatto alle tue esigenze:

the best font for email, web safe fonts comparison

Non perdere tempo alla ricerca del font migliore per Gmail, per Outlook o per un altro client di posta elettronica. I client rimpiazzano i font non supportati con quelli di ripiego, e come abbiamo detto in precedenza, Gmail usa Arial, Outlook usa Times New Roman e Mac OS X usa Helvetica.

Per concludere

Nonostante tutte le indicazioni che abbiamo dato, dobbiamo dire che non esiste un singolo font perfetto per tutte le esigenze di un’email professionale, che sia sempre perfettamente leggibile e bello da vedere. Dovrai sempre fare una scelta, e ogni font ha un suo lato negativo:

  • Georgia e Times New Roman sono troppo stretti;
  • Courier New è largo, forse fin troppo per le email;
  • Arial è più leggero di Helvetica;
  • È praticamente impossibile distinguere Verdana da Tahoma.

Riteniamo che questi ultimi due font siano i migliori per le email commerciali, e anche se non hanno un bell’aspetto quando vengono stampati sono quelli che sceglieremmo per i nostri modelli di email. Quale font preferisci? Faccelo sapere commentando su Facebook, e condividi l’articolo se ti è piaciuto.

Questo articolo è stato utile?
Tell us your thoughts
Grazie per il tuo feedback!
17 commenti
Mykyta Hryhorovych 2 anni fa
Test
screensh14ot-3
Nikolai Nikandrov 3 anni fa
fhdfhfhfghfghfghfgh
karina pyak 4 anni fa
asf
karina pyak 4 anni fa
Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para le
Karyna Piak 4 anni fa
test
Igor Greshner 4 anni fa
Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.
Hanna Kuznietsova 4 anni fa
Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing
Khairom Munawwar Baharom 5 anni fa
Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)
Hanna Kuznietsova 5 anni fa
Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.
Martin Schenk 5 anni fa
Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.
Hanna Kuznietsova 5 anni fa
Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück
rohit dubey 5 anni fa
Thanks for sharing this amazing content. This is really helpful for us.
Hanna Kuznietsova 5 anni fa
Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!
Marcia Bosscher 6 anni fa
What font are you using for this post? I like it!
Hanna Kuznietsova 6 anni fa
Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day
Myron Gould 6 anni fa
I found this article to be a very helpful refresher. Thank you!
Hanna Kuznietsova 6 anni fa
Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!
Editor Stripo
Semplifica il processo di realizzazione delle email.
Plugin Stripo
Integra l'editor drag-n-drop di Stripo nella tua applicazione web
Ordina un modello personalizzato
Il nostro team può progettarlo e programmarlo per te. Ti basta compilare il brief, e ti risponderemo al più presto.

Editor Stripo

Per i team di email marketing e i creatori di email individuali.

Plugin Stripo

Per i prodotti che potrebbero beneficiare di un generatore di email white-label integrato.