Polices web safe pour l'e-mail et les piles à utiliser
Polices web safe pour l'e-mail
Polices web safe pour l'e-mail : des piles qui marchent partout | We.Inc
Des piles de polices pour l'e-mail HTML qui tiennent dans Gmail, Outlook et Apple Mail, les messageries qui chargent les web fonts, et un aperçu pour tester chaque pile sur votre propre appareil.
Les polices web safe pour l'e-mail sont des polices déjà installées sur Windows comme sur macOS, comme Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman et Courier New. Comme Gmail et Yahoo Mail ignorent les web fonts personnalisées, écrivez chaque font-family sous forme de pile qui se termine par l'une de ces polices et une famille générique.
Polices installées à la fois sur Windows 11 et macOS Sequoia
Police
Type
Idéale pour
Arial
Sans-serif
Texte courant, le choix par défaut le plus sûr
Verdana
Sans-serif
Petit texte ; ses lettres larges restent lisibles
Tahoma
Sans-serif
Libellés compacts et pieds de page
Trebuchet MS
Sans-serif
Titres avec un peu de caractère
Georgia
Serif
Newsletters éditoriales et lectures longues
Times New Roman
Serif
Avis officiels
Courier New
Monospace
Codes, numéros de commande, reçus
Un e-mail ne peut pas télécharger des polices dans toutes les messageries comme le fait une page web. Ce que voit le lecteur dépend de son application de messagerie et des polices de son appareil : l'astuce consiste donc à utiliser une pile de polices qui se dégrade proprement. Choisissez une pile ci-dessous pour la prévisualiser avec votre propre texte et copier le CSS.
Choisissez une pile. L'aperçu utilise la police de la pile présente sur votre appareil, exactement comme le ferait une application de messagerie.
Saisissez votre objet ou votre titre dans le texte d'exemple et ajustez la taille.
Copiez la ligne font-family et placez-la dans un style inline sur chaque cellule de texte, pas seulement dans un bloc style.
Envoyez un test aux messageries que votre liste utilise vraiment, car le rendu varie selon l'application.
Mettez la font-family en inline sur chaque td ou p qui contient du texte, pour que chaque bloc porte sa propre pile au lieu de dépendre d'un bloc style.
Mettez entre guillemets les noms de polices qui contiennent des espaces, comme "Trebuchet MS", et terminez chaque pile par une famille générique comme sans-serif ou serif.
Si vous chargez une police de marque avec @font-face, choisissez une police de secours web safe de largeur similaire pour que les retours à la ligne bougent peu.
Segoe UI est fournie avec Windows mais pas avec macOS, et Helvetica est fournie avec macOS mais ne figure pas dans la liste de Windows 11. Associez-les à Arial dans une pile.
Questions fréquentes
Quelles polices sont sûres pour l'e-mail HTML ?
Les polices présentes sur les deux grands systèmes de bureau : Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman et Courier New figurent toutes dans la liste des polices de Windows 11 publiée par Microsoft et dans celle de macOS Sequoia publiée par Apple.
Gmail prend-il en charge les web fonts personnalisées ?
Non. caniemail.com indique que @font-face n'est pas pris en charge dans Gmail, qui utilise ses propres polices à la place. Les lecteurs Gmail voient la police de secours de votre pile : choisissez-la avec soin.
Quelles applications de messagerie affichent les web fonts ?
D'après caniemail.com, Apple Mail sur macOS et iOS, Thunderbird et ProtonMail prennent en charge @font-face. Gmail, Yahoo Mail et AOL ne le font pas, et la prise en charge d'Outlook.com est indiquée comme partielle.
Pourquoi Outlook sous Windows affiche-t-il Times New Roman ?
Outlook classique pour Windows accepte la règle @font-face mais ignore les polices distantes, et caniemail.com signale que le texte peut alors se rabattre sur Times New Roman. Placer une police web safe plus tôt dans la pile évite ce problème.
Quelle taille pour le texte courant d'un e-mail ?
Il n'existe pas de règle officielle. Beaucoup de designers utilisent 14 à 16 pixels pour le texte courant et davantage pour les titres ; testez sur un téléphone, où le petit texte est le plus difficile à lire.
Comment une police est choisie dans une pile
font-family est une liste de priorités. L'application de messagerie la parcourt de gauche à droite et utilise la première police qu'elle trouve, caractère par caractère : une pile couvre donc tous les lecteurs tant qu'elle se termine par une police qu'ils ont tous.
MDN conseille de toujours terminer la liste par une famille générique comme sans-serif. Si rien d'autre ne correspond, l'application choisit quand même une police cohérente au lieu de sa police serif par défaut.
Utiliser quand même une police de marque
Vous pouvez déclarer une web font dans un bloc style pour les applications qui la prennent en charge, puis lister des polices web safe après elle. Les lecteurs d'Apple Mail voient la police de marque et ceux de Gmail la police de secours.
Gardez le texte important, comme les prix et les boutons, en texte réel plutôt qu'en images de texte. Il reste lisible quand les images sont désactivées et fonctionne avec les lecteurs d'écran.
Quelles messageries chargent les web fonts
Prise en charge de @font-face selon caniemail.com, mise à jour le 19 décembre 2023. Vérifiez la page à jour avant de vous y fier, car les applications de messagerie évoluent.
Prise en charge de @font-face par client de messagerie
Client de messagerie
@font-face
Apple Mail (macOS 12.2 et versions ultérieures, iOS 10.3 et versions ultérieures)
Pris en charge
Thunderbird
Pris en charge
ProtonMail
Pris en charge
Outlook pour Windows (2003 à 2019)
Règle acceptée, polices distantes ignorées
Outlook.com
Partielle
Gmail
Non pris en charge
Yahoo Mail
Non pris en charge
AOL
Non pris en charge
Code de polices e-mail à copier
Pile de polices inline sur une cellule de tableau
La pile se trouve dans le style inline de la cellule elle-même : elle ne dépend donc pas d'un bloc style dans le head.
Police de marque avec une police de secours web safe
Les applications qui prennent en charge @font-face affichent la police de marque ; les autres se rabattent sur Trebuchet MS, Arial et enfin n'importe quelle sans-serif.
Aperçu de piles de polices pour e-mail
Choisissez une pile et saisissez votre propre texte. L'aperçu utilise les polices installées sur cet appareil, de la même façon qu'une application de messagerie choisit dans la pile.
Pile de polices
Texte d'exemple
Taille : {n}px
CSS à mettre en inline
Votre commande est en route. Suivez-la à tout moment depuis votre compte.