Font web safe per le email: stack che funzionano in ogni casella | We.Inc
Font stack per email HTML che reggono in Gmail, Outlook e Apple Mail, quali caselle di posta caricano i web font e un'anteprima per provare ogni stack sul tuo dispositivo.
I font web safe per le email sono caratteri già installati sia su Windows sia su macOS, come Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman e Courier New. Dato che Gmail e Yahoo Mail ignorano i web font personalizzati, scrivi ogni font-family come uno stack che termina con uno di questi e una famiglia generica.
Font installati sia su Windows 11 sia su macOS Sequoia
Font
Tipo
Adatto a
Arial
Sans-serif
Testo del corpo, il default più sicuro
Verdana
Sans-serif
Testo piccolo; le lettere larghe restano leggibili
Tahoma
Sans-serif
Etichette compatte e footer
Trebuchet MS
Sans-serif
Titoli con un po' di personalità
Georgia
Serif
Newsletter editoriali e letture lunghe
Times New Roman
Serif
Comunicazioni formali
Courier New
Monospace
Codici, numeri d'ordine, ricevute
Un'email non può scaricare i font in ogni casella di posta come fa una pagina web. Ciò che vede chi legge dipende dalla sua app di posta e dai font sul suo dispositivo, quindi il trucco è un font stack che degradi con eleganza. Scegli uno stack qui sotto per vederne l'anteprima con il tuo testo e copiare il CSS.
Scegli uno stack. L'anteprima usa il primo font dello stack presente sul tuo dispositivo, proprio come farebbe un'app di posta.
Scrivi l'oggetto o il titolo nel testo di esempio e regola la dimensione.
Copia la riga font-family e inseriscila in uno style inline su ogni cella di testo, non solo in un blocco style.
Invia un test alle caselle di posta che la tua lista usa davvero, perché il rendering cambia da app ad app.
Metti il font-family inline su ogni td o p che contiene testo, così ogni blocco di testo porta con sé il proprio stack invece di dipendere da un blocco style.
Metti tra virgolette i nomi dei font che contengono spazi, come "Trebuchet MS", e chiudi ogni stack con una famiglia generica come sans-serif o serif.
Se carichi un font del brand con @font-face, scegli un fallback web safe di larghezza simile così gli a capo non si spostano troppo.
Segoe UI è incluso in Windows ma non in macOS, e Helvetica è incluso in macOS ma non nell'elenco di Windows 11. Abbinali ad Arial in uno stack.
Domande frequenti
Quali font sono sicuri per le email HTML?
I font presenti su entrambi i principali sistemi desktop: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman e Courier New compaiono tutti nell'elenco dei font di Windows 11 di Microsoft e in quello di macOS Sequoia di Apple.
Gmail supporta i web font personalizzati?
No. caniemail.com indica @font-face come non supportato in Gmail, che usa invece i propri font. Il fallback del tuo stack è ciò che vede chi legge su Gmail, quindi sceglilo con cura.
Quali app di posta mostrano i web font?
Secondo caniemail.com, Apple Mail su macOS e iOS, Thunderbird e ProtonMail supportano @font-face. Gmail, Yahoo Mail e AOL no, e il supporto di Outlook.com è indicato come parziale.
Perché Outlook su Windows mostra Times New Roman?
Il classico Outlook per Windows accetta la regola @font-face ma ignora i font remoti, e caniemail.com segnala che il testo può allora ripiegare su Times New Roman. Un font web safe più avanti nello stack lo evita.
Che dimensione deve avere il testo del corpo di un'email?
Non esiste una regola ufficiale. Molti designer usano da 14 a 16 pixel per il corpo del testo e dimensioni maggiori per i titoli; fai una prova su un telefono, dove il testo piccolo è più difficile da leggere.
Come viene scelto un font stack
font-family è un elenco di priorità. L'app di posta lo percorre da sinistra a destra e usa il primo font che trova, carattere per carattere, quindi uno stack copre ogni lettore purché termini con un font che tutti hanno.
MDN consiglia di chiudere sempre l'elenco con una famiglia generica come sans-serif. Se nient'altro corrisponde, l'app sceglie comunque un carattere sensato invece del proprio serif di default.
Usare comunque un font del brand
Puoi dichiarare un web font in un blocco style per le app che lo supportano, poi elencare dopo i font web safe. Chi legge in Apple Mail vede il font del brand e chi legge in Gmail vede il fallback.
Lascia il testo importante, come prezzi e pulsanti, come testo vero e non come immagini di testo. Resta leggibile con le immagini disattivate e funziona con gli screen reader.
Quali caselle di posta caricano i web font
Supporto di @font-face secondo caniemail.com, ultimo aggiornamento 19 dicembre 2023. Controlla la pagina aggiornata prima di farci affidamento, perché le app di posta cambiano.
Supporto di @font-face per client email
Client email
@font-face
Apple Mail (macOS 12.2 e successivi, iOS 10.3 e successivi)
Supportato
Thunderbird
Supportato
ProtonMail
Supportato
Outlook per Windows (dal 2003 al 2019)
Regola accettata, font remoti ignorati
Outlook.com
Parziale
Gmail
Non supportato
Yahoo Mail
Non supportato
AOL
Non supportato
Codice dei font per email da copiare
Font stack inline su una cella di tabella
Lo stack si trova nello style inline della cella stessa, quindi non dipende da un blocco style nell'head.
Font del brand con un fallback web safe
Le app che supportano @font-face mostrano il font del brand; le altre ripiegano su Trebuchet MS, Arial e infine su un qualsiasi sans-serif.
Anteprima dei font stack per email
Scegli uno stack e scrivi il tuo testo. L'anteprima usa i font installati su questo dispositivo, nello stesso modo in cui un'app di posta sceglie dallo stack.
Font stack
Testo di esempio
Dimensione: {n}px
CSS da mettere inline
Il tuo ordine è in viaggio. Seguilo quando vuoi dal tuo account.