L'uso esteso di web font nelle pagine web è oramai assodato: dopo i primi timidi approcci della fine degli anni '90 (una volta tanto il primo a supportare la direttiva @font-face è stato il vituperato Internet Explorer), dal 2008, e soprattutto con l'avvento della libreria gratuita di Google Font nel 2010, il web ha cambiato faccia, lasciando campo libero alla web-typography, come vero fondamento del web-design.

Chiaramente il passaggio dal web all'email non è stato automatico, e non è ancora lontano dal potersi considerare completato. Vediamo quali sono le opportunità che un email designer ha a disposizione quando si tratta di scegliere font per titoli e testi di una missiva.

Uso di caratteri web safe

I caratteri web-safe sono una serie di font presenti in tutti i computer e quindi visualizzati sicuramente con effetto simile, se non identico.

I font sono: Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Times New Roman, Trebuchet MS, Verdana.

Pro: usando questi font siamo sicuri dell'effetto finale dell'email, a dispetto del client o del sistema utilizzato

Contro: scelta estremamente limitata e "standard" dei caratteri.

Uso di testo trasformato in immagine

Molto spesso, specie per i titoli e i loghi, per conservare l'aspetto utilizzato su altri media, si ha l'abitudine di trasformare il testo in una immagine.

Pro: la resa è perfetta e indipendente dal device

Contro: non tutti i client caricano automaticamente le immagini, per cui immettere informazioni fondamentali nelle immagini può rivelarsi controproducente. Inoltre è un metodo applicabile solo per le titolazioni, in quanto includere intere porzioni di testo in immagini potrebbe portare seri problemi dal punto di vista dei filtri antispam, oltre a compromettere la leggibilità su dispositivi mobile.

Uso dei webfont

Pro: aumento sensibile delle possibilità di design in aderenza al resto dell'immagine coordinata. Look and feel più moderno.

Contro: attualmente i webfont sono supportati da pochi client di posta elettronica e webmail (Mail di MacOsX, Iphone, Ipad, Thunderbird, Libero.it webmail, mentre la app mobile di Libero.it no), per cui è opportuno predisporre dei font standard di fallback, con la consapevolezza che non tutti vedranno l'email nello stesso modo.

Il consiglio fondamentale che diamo sempre è quello di valutare bene il proprio target e agire di conseguenza; se nella nostra lista sono presenti un numero considerevole di utilizzatori di iPhone/Mac è probabile che valga la pena cercare di rendere più ricche e belle le nostre newsletter utilizzando i webfont, ma se scriviamo principalmente ad un pubblico aziendale che usa Outlook, lo sforzo fatto sarà inutile e correremo anzi il rischio di ottenere l'effetto opposto, se non lavoriamo accuratamente nella scelta dei font di fallback.

Cosa sono i WebFont?

I web font sono font ospitati su un server e scaricati all'occorrenza dal client di posta elettronica per essere poi applicati al testo. Come detto prima non tutti i client sono in grado di mostrarli correttamente e proprio per questo è importante prevedere una "catena di fallback", una serie di font standard sostitutivi.

Come si impostano i font di fallback?

Il codice di inclusione di un webfont, preso per esempio da Google Font, sarà molto simile a questo

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />

Per richiamare il font selezionato è sufficiente specificare il seguente codice CSS (in questo caso inline, come consigliabile in generale per le email)

<td style="font-family: 'Open Sans', Arial, sans-serif">Testo</td>

Come è facile notare, nella chiamata "font-family" non è specificato unicamente il web-font di Google, ma anche altri due font, Arial e un generico sans-serif.

Se il client di posta non supporterà la chiamata al webfont di Google, mostrerà dunque il testo con il font Arial, uno dei font "websafe", se anche questo non fosse disponibile, utilizzerà un font di sistema "sans-serif" (senza grazie).

Chiaramente la scelta dei font "alternativi" deve essere molto oculata: più il web-font da voi utilizzato sarà particolare e caratterizzante, più sarà evidente la differenza fra l'email aperta con un client che supporta i web-font e quella aperta con Gmail o Outlook, alle volta con effetti davvero stranianti.

Il bug di Outlook

Tanto per non perdere l'abitudine Outlook con i webfont ha un comportamento tutto suo: pur non supportando questa caratteristica, se lasciamo la dichiarazione come prima mostrato, Outlook ignorerà i font sostitutivi scelti, per mostrare il suo font di sistema standard (Times New Roman).

Cercando in rete "Outlook webfont bug", troverete diverse soluzioni a questo problema. La più semplice è quella di inserire la chiamata al font di Google in un commento condizionale:

<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<!--<![endif]-->

In questa maniera Outlook, non caricando il font, seguirà la catena di fallback, presentando correttamente il testo in Arial