Utilizzo dei Font nell’Editor Email di Connectif

Quando si creano email in linea con gli obiettivi di marketing, è importante comprendere come funzionano i font per scegliere quelli che meglio si allineano con il brand e il design, ma anche conoscerne i limiti nell’invio di email coerenti tra i diversi client di posta elettronica.

In questo articolo vengono spiegate le proprietà dei font disponibili nell'Editor Email di Connectif e il loro comportamento nei client di posta elettronica, in modo da poter scegliere quelli più adatti al momento di progettare le tue email con Connectif.

 

1. Proprietà

Molti client di posta elettronica bloccano alcuni font e utilizzano i font di fallback (fallback fonts), quindi, anche se nell'Editor Email di Connectif esistono molte opzioni di font, quando i contatti ricevono le email è probabile che non appaiano esattamente come progettato, perché non tutti i dispositivi e fornitori email hanno accesso agli stessi font.

1.1. Come funzionano i font

  • Esistono due principali modalità con cui un dispositivo può accedere e utilizzare un font: font di sistema (cioè font installati nel dispositivo in uso) e font web (caricati da un server esterno).
  • Esistono alcuni font di sistema di base che sono installati sulla maggior parte dei dispositivi (come Georgia e Verdana), ma possono variare molto tra i dispositivi. Per questo, i font che funzionano sulla maggior parte dei dispositivi sono detti font sicuri per il web (web-safe fonts).
  • Quando si progettano email, è importante considerare i font disponibili, dato che esistono font sicuri per il web e font personalizzati (custom fonts). I font personalizzati sono spesso web fonts (ma non sicuri) e vengono associati a uno o più font di fallback.

1.1.1. Come funzionano i font sicuri per il web

  • I font sicuri per il web sono quelli comunemente installati nella maggior parte dei dispositivi e sistemi operativi.
  • Vengono visualizzati correttamente in quasi tutti i client di posta elettronica, indipendentemente dalla piattaforma o dal dispositivo.
  • Esempi: Arial, Times New Roman, Georgia e Verdana.

Usando font sicuri per il web puoi assicurarti che vengano visualizzati correttamente nella maggior parte dei client di posta elettronica.

 

1.1.2. Come funzionano i font personalizzati

  • I font personalizzati non sono garantiti su tutti i dispositivi e sistemi operativi.
  • Sono font personalizzati che richiedono codice CSS con font di fallback per garantire che, se il font principale non è disponibile, ne venga utilizzato uno simile.
  • È comune aggiungere più font di fallback per garantire una corretta visualizzazione del contenuto.
 

L’uso di questi font personalizzati nelle email può offrire un’estetica più personalizzata e accattivante, ma può causare incoerenze in alcuni client di posta elettronica.

1.2. Come funzionano i font nei diversi client di posta elettronica

  • I client di posta elettronica (come Gmail, Outlook o Apple Mail) interpretano i font in modo diverso.
  • Alcuni client email, in particolare quelli su dispositivi mobili o versioni più vecchie delle app desktop, potrebbero non supportare determinati font personalizzati.
  • Se il client supporta l’uso di <link>, @import o @font-face, i font web possono essere visualizzati correttamente utilizzando HTML e CSS standard.

  • Solo i seguenti client supportano font web tramite servizi come Google Web Fonts:

    • Outlook per Mac.

    • iOS Mail (il client predefinito su iOS).

    • Apple Mail.

    • Android (client predefinito, non Gmail).

    • Samsung Mail (Android 8.0).

    • Thunderbird.

  • Gmail in genere non supporta i font web, tranne Roboto.
 

È importante testare le email su diversi client per garantire una presentazione coerente dei font.

 

2. Come si usano i font in Connectif

2.1. Font disponibili nell'Editor Email di Connectif

Nell'Editor Email di Connectif è disponibile una combinazione di font sicuri per il web e font personalizzati.

Uso dei font nell'Editor Email - 1-min.png

Attualmente, questi sono i font sicuri per il web disponibili nell'Editor Email:

  • Sans-serif:
    • Arial
    • Arial Black
    • Arial Narrow
    • Arial Rounded MT Bold
    • Avant Garde
    • Calibri
    • Candara
    • Century Gothic
    • Franklin Gothic Medium
    • Futura
    • Geneva
    • Gill Sans
    • Helvetica
    • Impact
    • Lucida Grande
    • OptimaSegoe UI
    • Tahoma
    • Trebuchet MS
    • Verdana
  • Serif:
    • Big Caslon
    • Bodoni MT
    • Book Antiqua
    • Calisto MT
    • Cambria
    • Didot
    • Garamond
    • Georgia
    • Goudy Old Style
    • Hoefler Text
    • Lucida Bright
    • Palatino
    • Perpetua
    • Rockwell
    • Rockwell Extra Bold
    • Baskerville
    • Times New Roman
  • Monospaced:
    • Consolas
    • Courier New
    • Lucida Console
    • Lucida Sans Typewriter
    • Monaco
    • Andale Mono
  • Fantasy:
    • Copperplate
    • Papyrus
  • Script:
    • Brush Script MT

A questi font si aggiungono i seguenti font personalizzati, con i rispettivi font di fallback:

/* Bitter */
font-family: 'Bitter', Georgia, Times, 'Times New Roman', serif;

/* Comic Sans MS */
font-family: 'Comic Sans MS', 'Comic Neue', cursive;

/* Droid Serif */
font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif;

/* Inter */
font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Montserrat */
font-family: 'Montserrat', 'Trebuchet MS', Tahoma, sans-serif;

/* MS Serif */
font-family: 'Microsoft Sans Serif', Georgia, serif;

/* New York */
font-family: 'New York Line', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Open Sans */
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Palatino Linotype */
font-family: 'Palatino Linotype', Palatino, 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

/* Poppins */
font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Roboto */
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans

 

2.2. Come vengono serviti i font personalizzati in Connectif

Se scegli di mostrare un testo con un font personalizzato in un’email di Connectif, solo i contatti che utilizzano client di posta con questi font installati potranno visualizzarli. Gli altri vedranno il font di fallback.

  

Se desideri servire il font affinché il dispositivo lo scarichi e lo utilizzi, dovrai includerlo nei CSS dell’email. Connectif non lo fa automaticamente.

 

2.3. Raccomandazioni e buone pratiche per l’uso dei font nelle email

Di seguito sono riepilogate le raccomandazioni per la creazione di email e l’uso dei font disponibili in Connectif:

  • Usa font sicuri per il web ogni volta che è possibile: Per garantire la massima compatibilità su tutti i dispositivi e client email, dai priorità ai font sicuri per il web.
 

Il modo migliore per assicurarti che le tue email appaiano in modo coerente su tutti i dispositivi è usare un font sicuro per il web.

  • Fai test su diversi client: Prima di inviare una campagna email, esegui test su vari client e dispositivi per verificare che i font si visualizzino correttamente in ogni caso.
  • Ottimizza per dispositivi mobili: Molte email vengono aperte da smartphone, quindi è fondamentale che i font siano leggibili su schermi piccoli. I font sans-serif come Arial e Helvetica funzionano bene in questi casi.
  • Contrasto e leggibilità: Assicurati che i font scelti abbiano un contrasto adeguato con lo sfondo dell’email per mantenere una leggibilità ottimale.

 

 

 Complimenti!
Hai completato la lezione.

  

Hai ancora dubbi?
Ricorda che puoi contattare i nostri specialisti di Connectif. Per farlo, ti basta aprire un ticket di supporto cliccando sul pulsante blu “Aiuto” nella tua dashboard.

 


Continua a imparare!

Per sfruttare tutto il potenziale del tuo account su Connectif, ti consigliamo di continuare con i seguenti articoli: