Come funzionano i caratteri nelle e-mail

Cosa imparerai

Scopri opportunità e limiti dell’uso dei font online e come inviare e-mail in linea con il tuo brand.

Come funzionano i font

I font sono rappresentazioni di testo e possono essere utilizzati su supporti di stampa o online. Potresti avere familiarità con alcuni dei font più comuni, come Arial o Times New Roman, ma ci sono migliaia di altri font che puoi usare per comunicare e rappresentare il tuo brand.

Con i media online (come siti web o e-mail), le opzioni di font sono praticamente illimitate. Tuttavia, quando condividi la tua creazione con qualcun altro, potrebbe non avere esattamente lo stesso aspetto, perché non tutti i dispositivi hanno accesso agli stessi font.

Esistono 2 modi principali in cui un dispositivo può accedere e usare un font: font di sistema (ovvero font archiviati sul dispositivo che stai usando) e font web (ovvero font caricati da un server esterno)

Informazioni sui caratteri di sistema

Computer e telefoni sono precaricati con una serie di font. Esistono alcuni font comunemente installati (ad esempio, la maggior parte dei dispositivi include Georgia e Verdana), ma i dispositivi possono variare notevolmente in ciò che includono per impostazione predefinita. I font utilizzati dalla maggior parte dei dispositivi sono chiamati “font web-safe”.

Informazioni sui font web

A differenza dei font web-safe, i font web vengono caricati da un server esterno contemporaneamente ai contenuti che stai visualizzando. I font personalizzati sono generalmente font web. Se utilizzi un font web, ti consigliamo di impostare anche un font web-safe di fallback, nel caso in cui un dispositivo specifico non riesca a caricare il font web.

Informazioni sui caratteri di riserva

Quando visualizzi qualcosa online, che si tratti di una pagina web o di un’e-mail, dietro le quinte c’è il CSS (codice utilizzato per definire lo stile dei contenuti online) che indica al tuo dispositivo quale font visualizzare. Se il tuo dispositivo non riesce ad accedere al font, controllerà il CSS per un "font di fallback" (un font, o più font, selezionati dalla persona che ha creato il sito web o il messaggio e-mail, da utilizzare nel caso in cui il font preferito non sia disponibile). I font di fallback dovrebbero essere font sicuri per il web che la maggior parte dei dispositivi può usare. Ti danno un maggiore controllo su come appare il tuo messaggio quando qualcuno lo visualizza su un dispositivo che non supporta font personalizzati/web.

Se non è disponibile alcun font di fallback o se il font di fallback non è supportato dal dispositivo in uso, il dispositivo utilizzerà un font predefinito, come Arial o Times New Roman. I font predefiniti variano notevolmente tra dispositivi e app.

Come funzionano i font nelle e-mail

Alcuni client di posta elettronica supportano i font web, ma altri no. Quando qualcuno apre la tua e-mail in una casella di posta o su un dispositivo che non supporta i font web, vedrà invece un font predefinito. Puoi controllare quali font di sistema vengono usati come alternative impostando un font di fallback.

Se qualcuno apre il tuo e-mail su un dispositivo che supporta i web font, verrà caricato il font dall’URL fornito nel CSS del tuo e-mail. Se il dispositivo riesce ad accedere al font, lo visualizzerà; altrimenti, passerà ai font di fallback.

Il supporto dei font web dipende dall'app di posta elettronica, dalla sua versione e dal tipo di account e-mail. Esempi di client con supporto per i font web includono:

• Apple Mail
• iOS Mail (l'app e-mail predefinita su iOS)
• Alcune app e-mail per Android (il supporto varia a seconda dell'app; Android 2.3 non supporta il metodo @import utilizzato da Google e Adobe per i caratteri)
• E-mail Samsung su Android, tranne quando utilizzi un indirizzo e-mail Microsoft come Outlook.com o Hotmail
• Outlook per Mac 2011 e 2016; Outlook per Mac 16.80 non supporta i font web

Gmail, inclusa l’app Gmail su Android, in genere non supporta i font web. La webmail desktop di Gmail può visualizzare Roboto e Google Sans perché Gmail li include nei propri stili. Questo non significa che Gmail possa caricare altri font personalizzati dal tuo e-mail. Imposta un font di fallback e testa il tuo e-mail nelle app Gmail che usano i destinatari.

Per i dettagli per app e versione dell’e-mail, consulta Tabella del supporto dei font web in Can I email.

Ottimizzazione dei font nelle tue e-mail

Il modo migliore per assicurarti che il tuo e-mail abbia un aspetto coerente su tutti i dispositivi è utilizzare un font web-safe. I font predefiniti di Klaviyo sono in genere web-safe. Trova i font forniti da Klaviyo in:

• Contenuto > Media e brand > Brand: seleziona Caratteri. Se invece vedi Stile, selezionalo per trovare la sezione Caratteri.
• Il pannello Modifica stili nell’editor di modelli di e-mail
• La barra degli strumenti di formattazione del testo quando modifichi il testo in un blocco di testo, oppure i controlli dei caratteri in altri blocchi contenenti testo
• Il pannello Modifica stili nell’editor del modulo d'iscrizione

Suggerimenti per usare font personalizzati

Se preferisci usare un font personalizzato, usa i suggerimenti qui sotto per assicurarti che le tue e-mail abbiano un aspetto ben progettato su tutti i dispositivi.

Utilizza font di riserva

Seleziona un font di fallback web-safe che corrisponda il più possibile al tuo font personalizzato. Puoi selezionare un font di fallback dai font predefiniti di Klaviyo durante la configurazione del font personalizzato.

Usa il testo nelle immagini

Anche se un’e-mail composta solo da immagini può danneggiare la deliverability, puoi usare in modo strategico una combinazione di testo nelle immagini e testo nei blocchi di testo per creare un’e-mail in linea con il tuo brand. Scegli un font personalizzato e in linea con il tuo brand per i titoli e le call-to-action (CTA), e abbinalo a un font web-safe da usare per il corpo del testo. Inserisci anche le informazioni essenziali e la CTA principale in blocchi di testo o di pulsanti, così chi riceve può usarli anche se le immagini non si caricano.

Usa immagini che contengono il font del tuo brand per alcuni testi e assicurati di aggiungere il testo alternativo quando aggiungi le immagini alla tua e-mail. Poi applica il font web-safe al resto del testo nella tua e-mail. In questo modo puoi usare il font del tuo brand mantenendo leggibile il resto della tua e-mail quando le immagini non vengono caricate.

Esegui test approfonditi

Indipendentemente dai metodi che scegli, testa accuratamente le tue e-mail, soprattutto quando usi un nuovo design. Invia l'e-mail a te stesso su più dispositivi per assicurarti che ti soddisfi come appare su ciascuno. Puoi anche utilizzare programmi di test per e-mail come Litmus o e-mail on Acid per testare su una gamma più ampia di dispositivi.

Risorse aggiuntive