The Ultimate Guide to Web Fonts

Storicamente, scegliere il font giusto per la tua email non è mai stato troppo difficile, considerando il numero limitato di font sicuri per il web tra cui scegliere. Ma le cose sono cambiate. Sempre più email designer stanno spingendo i confini e abbracciando le stesse tecniche di sviluppo che i web designer hanno usato per anni – implementando i web font nelle loro email.

I web font permettono ai web designer di essere più creativi con la loro tipografia, permettendo loro di scegliere font non standard nei loro progetti.

Come accade di solito quando si apre un nuovo terreno nel design e nello sviluppo delle email, i membri lungimiranti della comunità sono stati tra i primi a portare queste tecniche nelle nostre caselle di posta (e all’attenzione). Dobbiamo un enorme ringraziamento alla fantastica guida ai web font di Campaign Monitor, “A Type of Email” di Paul Airy, e Style Campaign per la loro ispirazione.

Nella Ultimate Guide to Web Fonts, scaveremo nei dettagli di cosa sono i web font e come gli email designer possono implementarli nelle loro email.

Che cos’è un web font?

Ci sono due diversi tipi di font a disposizione degli email designer per le loro email – web font sicuri e web font. Ecco la differenza tra i due:

I font sicuri per il web
Pensa all’Arial, Times New Roman, Verdana o Georgia come esempi di font sicuri per il web. Sono i font predefiniti che si trovano nella maggior parte dei diversi sistemi operativi e dispositivi.

Fontes web
I font web non si trovano come parte dei font predefiniti disponibili sui vari dispositivi e sistemi operativi, e sono specificamente progettati e concessi in licenza per l’uso sui siti web. Un paio di web font che potresti conoscere sono Open Sans e Roboto.

Perché web font?

Come marketer e designer, conosci la pressione di rimanere on-brand nelle email, con colori, design e, sì, tipografia. Bloccare il testo importante nelle immagini è stata una pratica standard nel design delle email come un modo per rimanere sul marchio e per essere creativi. Ma “nascondere” il testo nelle immagini limita l’accessibilità dell’email perché i lettori di schermo non possono leggere il testo sull’immagine.

I font del web aprono nuove strade di creatività nella tipografia, permettendo ai progettisti di email di essere creativi e accessibili-e di attenersi al look and feel del loro marchio.

Email e Web Fonts

Mentre i web fonts non hanno un supporto universale, ecco i client email dove sono supportati:

Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook per Mac
Outlook App

L’elenco dei client di posta elettronica supportati può sembrare breve, ma prendete il cuore: la maggior parte di essi sono tra i primi 10 client di posta più popolari. Questo è qualcosa di cui essere entusiasti!

*Pro Tip: Nell’aprile 2018, Gmail ha rilasciato un’interfaccia aggiornata per il loro client webmail. Questa nuova interfaccia utilizza due popolari font web: Google Sans e Roboto. Cosa significa questo? Nonostante Gmail non supporti i web font, se usi uno di questi web font nelle tue email, queste verranno effettivamente rese in Gmail. Basta aggiungere i font al tuo attributo font-family CSS se vuoi usarli nella tua email.

Scopri la tua top 10

Quando si tratta di email marketing, è tutto sul tuo pubblico. Usa Litmus Email Analytics per scoprire quali sono i client email più popolari tra i tuoi iscritti. Iscriviti gratis!

Scopri il tuo pubblico →

Come incorporare i web font nelle email

Ci sono tre approcci principali che puoi adottare quando usi i web font nelle tue email.

@import

Usare @import è uno degli approcci più semplici per importare i web font nelle email. Metti la seguente linea di codice nel <head> della tua email, di solito in cima al tuo <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

In questo esempio, il nome del font-family importato è “Montserrat.”

Il tuo servizio di web font ti darà l’URL che ti serve. Se stai ospitando tu stesso il font, dovrai puntare l’URL a dove si trova il tuo file web font.

Questo metodo è ben supportato dalla maggior parte dei client di posta elettronica di cui sopra, e manca solo il supporto in Android 2.3 (Android Gingerbread) – una vecchia versione di Android che ha una quota di mercato incredibilmente piccola.

<link>

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

Proprio come il metodo @import, il servizio web font definirà il valore href. Se stai ospitando tu stesso il file del font, cambia questo URL per puntare a dove si trova il web font sul tuo server. E vorrai mettere questa linea di codice nel <head> della tua email, vicino all’inizio.

Il metodo <link> funziona leggermente meglio del metodo @import, con il supporto di tutti i client email sopra citati (hurrah!).

Perché dovresti scegliere un metodo piuttosto che un altro? Il metodo @import rimanda il caricamento del web font che viene importato fino a quando l’HTML in cui è incorporato non è completamente caricato. Questo può portare il tuo web font a impiegare un po’ più di tempo per apparire nella tua email, mentre il resto dell’email viene caricato. Al contrario, il metodo <link> carica la risorsa in linea mentre il codice del file HTML viene letto (dall’alto verso il basso), il che potrebbe ritardare il caricamento della tua email se il file del tuo web font è particolarmente grande.

@font-face

I servizi di web font online offrono comunemente cinque formati di file tra cui scegliere: .eot, .woff, .woff2, .svg, e .ttf. Il formato .woff ha il miglior supporto quando si tratta di email, quindi suggeriamo di usare questo formato quando è possibile. Il metodo @font-face è l’unico metodo che ti permette di scegliere specificamente quale formato di file vorresti importare, rendendolo il metodo più a prova di bomba per implementare i font web.

Ecco una tipica dichiarazione @font-face per importare un web font in un’email usando Google Fonts come servizio di web font scelto:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Purtroppo, se stai usando Google Fonts, non è facile trovare l’URL di un web font-ci sono alcuni cerchi che devi saltare.

1. Cerca il web font che vorresti usare.
Una volta che l’hai trovato e selezionato, una piccola barra nera apparirà nella parte inferiore dello schermo. Quando ci clicchi sopra, vedrai una schermata come questa:

2. Copia l’URL del web font (evidenziato sopra), e incollalo nella barra degli indirizzi di Safari o Internet Explorer.
In questo metodo stiamo usando Safari o Internet Explorer perché Google Fonts usa il rilevamento del browser per decidere quale tipo di file di font viene servito. Per questo metodo vogliamo usare il tipo di file .woff. Usando Google Chrome il tipo di file di font .woff2 che verrà servito nel browser che ha un supporto limitato. Grazie a Elliot Ross per questo ulteriore approfondimento!

Una volta che la pagina è stata caricata, vedrai una dichiarazione CSS sulla pagina:

3. Copia questo CSS e incollalo nella sezione <style> della tua email.
Mentre questo metodo è considerato il più a prova di bomba, potrebbero essere fatte delle modifiche dal fornitore del servizio web font all’URL di accesso diretto usato per importare il web font. Se scegliete di usare questo metodo, testate la vostra email regolarmente per assicurarvi che i vostri web font continuino a rendere nel tempo.

A Litmus, il metodo @font-face è la nostra implementazione per importare i web font nelle nostre email.

Tutto il merito per questo metodo di importazione dei web font va al sostenitore dell’accessibilità delle email Paul Airy, come descritto in una precedente newsletter di Type: E (a cui dovreste assolutamente iscrivervi, se non lo siete già).

Utilizzare i web font nelle email

Una volta importato il tuo web font, usarlo nelle email è facile come usare un web safe font, usando il nome del font-family definito nel metodo di importazione:

font-family: 'Montserrat', sans-serif;

Scegliere un fallback font

Quando si usano i web font, è una necessità avere un fallback web safe font per quei client email che non supportano i web font.

Font predefiniti sicuri per il web

Ogni client di posta elettronica ha un font predefinito se il font elencato nello stack font-family non è disponibile. Per esempio, Gmail usa Arial, Apple Mail usa Helvetica, e Outlook usa Calibri.

Se non ti piace il suono di nessuno di questi font predefiniti, abbiamo delle buone notizie: puoi scegliere il tuo font di ripiego nello stack font-family.

font-family: 'Montserrat', Verdana, sans-serif;

Pensate a questo come una lista prioritaria di font preferiti. Se un client non può soddisfare la tua scelta numero uno, ricadrà sul successivo nella tua lista.

Per esempio, usando la pila di font-family di cui sopra, Gmail ignorerà il primo font nella lista perché è un web font non supportato in Gmail, e il font reso nell’email sarà Verdana. Se Verdana non è supportato sul dispositivo usato (il che sarebbe molto raro, dato che Verdana è un font sicuro per il web), il dispositivo userà il font sans-serif predefinito per il suo sistema, dato che questo è il terzo font nella lista.

Come scegliere il giusto font di fallback

Scegliere il giusto font di fallback che mantenga il design della tua email è la chiave per offrire una grande esperienza a tutti i tuoi iscritti, indipendentemente dal client di posta che stanno utilizzando.

I font di fallback dovrebbero essere dello stesso tipo del font web – usa un font di fallback sans-serif se il tuo font web è un font sans-serif, e un font di fallback serif se il tuo font web è anche un font serif. Usare lo stesso stile di font aiuterà a mantenere il design della tua email in diversi client di posta elettronica. Puoi fare un ulteriore passo avanti analizzando l’altezza x dei font.

L’altezza x è l’altezza verticale del font. Idealmente, dovresti scegliere un font di ripiego che abbia un’altezza x simile per evitare che il tuo design delle email vada in pezzi quando il font di ripiego è in uso.

Ecco un esempio delle sottili differenze di altezza x tra i font Verdana, Arial, e il web font Proxima Nova. Queste sottili differenze possono fare la differenza nel fare o interrompere il design della tua email quando i font web non vengono resi.

CSS Font Stack ha una lista completa – inclusa la copertura del sistema operativo – di font sicuri per il web che possono essere usati come font di ripiego.

Evitare il falso grassetto / falso corsivo

Se hai versioni in grassetto e corsivo di accompagnamento dei tuoi file di font web, allora usale! I progettisti di caratteri tipografici hanno messo un sacco di pensieri e di sforzi per ottenere tutti i diversi stili di un font nel modo giusto, quindi è meglio applicare il design del tipo originale piuttosto che permettere al client di posta elettronica o al browser di applicare casualmente un finto grassetto o un finto corsivo al font normale.

Fondamentalmente, NON fare così:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Come per il web design, puoi tirare dentro i font originali includendo questi stili nel tuo stack @font-face, così:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Come puoi vedere, i diversi stili tirano dentro font diversi indipendentemente dal font-family. In questo modo, se stilizzi il tuo font nell’HTML in questo modo:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…allora verrà utilizzato il vero font ‘Montserrat-BoldItalic’! Allo stesso modo, solo aggiungendo font-weight: bold; tirerà dentro ‘Montserrat-Bold’ e solo aggiungendo font-style: italic; tirerà dentro ‘Montserrat-Italic’.

Perciò, vi starete chiedendo: perché fare in questo modo invece di dichiarare un diverso font-family per ogni stile, che tira dentro anche i font genuini? Ecco come appare:

Non fate neanche questo!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Questo presenta un problema. Usare i nomi dei font-family per memorizzare gli stili non solo crea un CSS eccessivamente complicato e ridondante, ma spoglia anche il tuo testo dello stile se i tuoi fallback si attivano. Così, per esempio, se state visualizzando il codice qui sopra in Gmail (che non supporta i web font personalizzati), allora vedrete solo Verdana non grassettato e non digitalizzato invece di Montserrat Bold Italic. Mantenendo il tuo font-family e i tuoi font-weights/font-styles separati, i tuoi font di ripiego manterranno ancora lo stile corretto.

Outlook, cosa mi stai facendo!

Con Times New Roman come font di ripiego predefinito, Outlook è stato tradizionalmente una sfida per gli email marketers con un cuore per la tipografia. Mentre Outlook 2019 – che è la versione più recente di Microsoft del suo client di posta elettronica desktop – onora i font di fallback specificati nel codice, le vecchie versioni di Outlook sono ancora una sfida.

Se si utilizza il metodo di importazione @font-face, Outlook 2007/10/13/16 sarà predefinito su Times New Roman non importa quale font di fallback avete in atto. La buona notizia è che c’è un hack ben collaudato che risolve questo problema.

Il seguente CSS prende di mira Outlook, come indicato da <!-> e <!->, e dice a Outlook di usare un diverso font-stack.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Usa la classe “fallback-font” nella tua email ovunque tu definisca il tuo font-family:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

E i tuoi font in Outlook 2007/10/13 torneranno con grazia ad Arial, piuttosto che Times New Roman.

Un’altra soluzione per questo bug è quella di avvolgere il codice di importazione di @font-face in una media query, nascondendolo da Outlook:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook ora ignorerà semplicemente “Montserrat” nel vostro font-family stack e leggerà il prossimo font.

C’è anche il metodo di puntare la proprietà specifica di Microsoft Office, mso-font-alt, con il vostro system-font scelto al vostro blocco di dichiarazione @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Questo dirà ad Outlook per MS Office di usare come default il font di ripiego assegnato.

Dove trovare i font web

Google Fonts

Ci sono molti servizi di font web disponibili, ma Google Fonts è il nostro preferito. Il servizio è totalmente gratuito, e puoi scaricare i web font sul tuo computer se stai prendendo in giro i progetti con Adobe Photoshop, Sketch o un altro software di design.

Typekit di Adobe

Il popolare servizio di abbonamento ai font di Adobe è stato di scarsa utilità per i designer di email in passato, poiché Typekit si basava su JavaScript per incorporare i font. A partire da agosto 2017, Typekit ha abilitato l’uso dei web font usando solo CSS – non è richiesto JavaScript – e questo apre i web font trovati in Typekit per l’uso nelle email. Puoi trovare istruzioni dettagliate su come aggiungere i web font Typekit alle tue email usando @import nella documentazione della guida di Typekit.

Altri servizi di web font

Se stai cercando altri siti web che offrono web font con licenza per l’uso nelle email (per lo più a pagamento), controlla alcuni dei servizi qui sotto:

MyFonts
Commercial Type
Font Spring
Font Shop
You Work for Them
Village
Process Type Foundry

Licenza dei web font nella posta elettronica

I web font sono stati originariamente progettati per essere utilizzati esclusivamente su siti web, quindi la loro licenza è tipicamente per l’uso solo su siti web e applicazioni mobili. La ragione per cui molti servizi di web font non permettono l’uso nelle email è perché è visto come la distribuzione del font, che va contro molti degli End User License Agreement (EULA) dei servizi.

I fornitori di web font nella lista di cui sopra includono le licenze di utilizzo dei web font nelle email. Tuttavia, molte licenze sono addebitate sul numero di aperture mensili, il che dovrebbe essere considerato quando si usa un servizio di web font a pagamento.

Posso usare i web font?

Non c’è assolutamente nulla di male nell’usare i web font come un miglioramento progressivo nelle tue email ora. Implementa i tuoi font di ripiego correttamente e spingi le tue email nel futuro!

Vale la pena dare un’occhiata alla tua base di abbonati per vedere quanti stanno visualizzando le tue email in un client email che supporta i web font. Se la maggioranza non lo fa, semplicemente non varrebbe la pena di sprecare tempo e sforzi, specialmente se stai pensando di usare un web font a pagamento.

I web font fatti bene

Per darti una piccola ispirazione su ciò che è possibile, ecco alcune delle nostre email preferite con web font.

Non dimenticare di testare

Poiché l’uso dei web font nelle email è ancora considerato leggermente sperimentale, ti consigliamo di testare spesso, specialmente se hai implementato i web font in template che potrebbero non essere aggiornati regolarmente. I cambiamenti e gli aggiornamenti alle capacità di rendering dei client di posta elettronica di solito non sono annunciati in anticipo e possono accadere sporadicamente, quindi è meglio testare regolarmente.

Vale la pena notare che se hai il web font installato sul tuo computer, sarai in grado di vedere il web font quando lo testi dal vivo in un client di posta elettronica sul tuo computer – qualcosa da tenere a mente nel caso in cui improvvisamente sembri che Gmail ora supporti i web font.

TEST DELLA TIPOGRAFIA NELLE TUE CAMPAGNE

Si è ispirato a portare il tuo gioco di caratteri al livello successivo? Assicurati di testare le tue campagne prima di inviarle. Prova Litmus gratuitamente e assicurati che la tua tipografia sia fantastica in più di 90 client di posta elettronica, inclusi desktop, webmail e dispositivi mobili.

Per saperne di più →