Lisez l'article, mais d'abord...
Faites un don au Secours Populaire Français !

Les polices dans les e-mails HTML

Partager sur facebook
Partager sur twitter
Partager sur linkedin

Les polices « web safe », ça n’existe pas. Voilà, c’est dit. J’ai vu tellement de messages demandant quelles polices étaient « safe » à utiliser dans des emails HTML. Et on y trouve généralement une réponse avec une liste réduite de polices disponibles sur Windows. Donc laissez-moi vous expliquer pourquoi le concept de police « web safe » est trompeur et comment on peut faire bien plus que du Arial ou du Times dans des emails.

Une police dans un email HTML peut venir de quatre différentes sources :

  1. Les polices système
  2. Les polices utilisateurs
  3. Les polices du client mail
  4. Les polices embarquées

Faisons le tour de chacune.

Les polices système

Chaque système d’exploitation est livré avec un jeu de polices par défaut disponible dans tout le système. Voici des liens vers la liste complète de polices disponibles fournie par les fabricants du système.

macOS Catalina contient le nombre impressionnant de 520 polices préinstallées. iOS 13 suit avec 273 polices préinstallées. Windows 10 en a 183. Et Android en a… 9.

Android est un cas particulier parce qu’il n’existe pas vraiment de version universelle d’Android. Les polices par défaut vont varier si vous avez un appareil Samsung, Xiaomi ou Google. Et si Apple et Microsoft fournissent des listes détaillées des polices installées par défaut sur leurs systèmes, je n’ai trouvé aucun équivalent chez aucun constructeur Android. (Même pour Google, je n’ai trouvé que cette liste qui date d’Android 4.1).

Avec si peu de polices disponibles sur Android, il devient clair que de parler de police « safe » n’a aucun sens. Même Arial ou Times New Roman sont absentes d’Android, affichant alors à la place respectivement Roboto et Noto Serif.

Les polices utilisateurs

Il est possible d’installer ses propres polices sur n’importe quel système de nos jours. Téléchargez une police que vous aimez chez Google FontsAdobeDaFont ou peu importe votre fonderie préférée, installez là, et elle est désormais disponible partout dans votre système d’exploitation.

Et si cela est possible depuis la nuit des temps sur des systèmes comme Windows, macOS ou Android, c’est seulement devenu possible sur iOS depuis iOS 13 (en 2019). Par exemple, vous pouvez installer Adobe Creative Cloud sur iOS, télécharger et installer de nouvelles polices, les rendant ainsi disponible partout dans n’importe quelle application iOS.

Les polices du client mail

Les clients mail peuvent eux aussi avoir leurs propres polices embarquées. C’est vrai pour les applications natives. Mais c’est vrai aussi pour n’importe quel client web. Par exemple, le webmail desktop de Gmail embarque sa propre version de Google Sans (en Regular, Medium) et Roboto (en Regular, Medium, Bold). Le webmail desktop de Outlook.com embarque la police Segoe UI Web (en Regular, Semilight, Semibold) et la police d’icônes Shell Fabric MDL2 Icons.

Les polices embarquées

Les intégratrices et intégrateurs d’e‑mails peuvent embarquer des polices à partir d’un serveur distant dans leurs e‑mails HTML, tout comme sur le web. Est-ce que ça fonctionne partout ? Non, tout comme sur le web.

Pourquoi est-ce qu’il n’y a pas plus de clients mails qui supportent les polices embarquées ? Je ne peux pas parler pour eux, mais je suppose que c’est surtout pour des raisons de sécurité. Un fichier de police n’est rien de plus qu’un petit logiciel exécutable. Et comme tout logiciel, il peut être vulnérable et donc amener ses vulnérabilités dans n’importe quel contexte où il se trouve. (À lire : cette riche réponse sur StackExchange qui donne des tas d’exemples.)

Bonnes pratiques pour définir des polices dans des e‑mails HTML

  • La propriété raccourcie font a un très bon support. Donc plutôt que de déclarer chaque propriété individuellement (comme font-family:sans-serif; font-size:16px; line-height:24px; font-weight:bold;), vous pouvez déclarer une seule et unique propriété font (comme font:bold 16px/24px sans-serif). C’est plus court, c’est plus propre. J’aime.
  • Il faut toujours déclarer un nom de famille de police générique en guise de dernier recours. Si vous l’omettez, le moteur de rendu utilisera la police par défaut. Par exemple, dans un navigateur moderne, font-family:Lobster s’affichera comme du Times alors que font-family:Lobster, sans-serif s’affichera en Arial, Helvetica ou Roboto (selon le système d’exploitation).
  • Si vous utilisez une déclaration @font-face, pensez à inclure les propriétés mso-generic-font-family et mso-font-alt pour bien contrôler la police de repli dans les Outlooks sur Windows. (Vous pouvez lire l’histoire du jour où j’ai découvert la propriété mso-generic-font-family.)
  • Font Style Matcher par Monica Dinculescu est un chouette outil pour tester et trouver une police de repli pas trop différente de la police embarquée que vous souhaitez utiliser.
  • Font Family Reunion par Zach Leat est aussi une bonne ressource pour savoir quelle police système s’applique à partir d’une propriété font-family.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *