Typographie d’e-mail : 8 meilleures polices pour les e-mails (et des idées de polices personnalisées)

La plupart des entreprises qui ont de solides références ont déjà pleinement adopté tout ce que le marketing par e-mail peut offrir à ce stade. Newsletters par e-mail, répondeurs automatiques, etc. Le marketing par e-mail a toujours été un moyen de rester à l’écoute des besoins de vos clients tout en faisant la promotion des derniers produits ou services que vous proposez.

Le fait que vous puissiez atteindre les clients longtemps après qu’ils aient quitté votre site web est très puissant. Cependant, un e-mail ancien ne suffit pas. La façon dont vous présentez le contenu de vos e-mail est un élément essentiel pour attirer l’attention et encourager les clients à lire réellement vos e-mails plutôt que de les supprimer.

Le design joue ici un rôle crucial. Mais l’un des aspects les plus importants à prendre en compte est sans doute le choix des polices de caractères. Les polices adaptées aux e-mails permettent aux clients de lire plus facilement ce que vous avez à dire, ce qui signifie que vous aurez plus de chances d’obtenir cette conversion.

C’est ce dont nous allons discuter ici aujourd’hui.

Qu’est-ce qu’une police de caractères adaptée aux e-mails ?

Il est tentant d’utiliser des polices de caractères fantaisistes pour vos e-mails. Après tout, vous voulez faire une bonne impression. Et vous voulez que votre contenu se démarque. Cependant, les polices spéciales ne s’affichent pas toujours correctement dans tous les clients de messagerie. En fait, si une police n’est pas prise en charge, un client de messagerie peut finir par utiliser une police de secours qui pourrait, au mieux, brouiller le ton voulu ou, au pire, obscurcir la lisibilité de votre contenu.

C’est pourquoi il est fortement recommandé de ne s’en tenir qu’à des polices de caractères adaptées pour la création de contenu de marketing par e-mail. Nous en viendrons aux détails dans un instant. Mais tout d’abord, voyons brièvement comment un bon choix de police peut avoir un impact considérable sur votre taux de conversion.

Comment de bonnes polices de caractères stimulent les conversions

La plupart des gens ne passent que 11 secondes sur leur e-mail. Cela signifie que les polices que vous choisissez doivent être lisibles et analysables. Elles doivent offrir ce confort « d’un seul coup d’œil ». Souvent, cela signifie qu’il faut s’appuyer sur des polices standard que tout le monde connaît déjà. Cela vous semble ennuyeux ? L’alternative est pire. En fait, les gens mettent deux fois plus de temps à lire des polices de caractères sophistiquées. Et si les gens ne passent que 11 secondes sur un e-mail, c’est une beaucoup de temps perdu.

Toutefois, ce n’est pas seulement la police que vous choisissez qui a un impact sur les conversions. La taille de la police que vous choisissez a également son importance. En fait, selon les recherches menées par le Click Laboratory, une légère augmentation de la taille d’une police peut avoir un impact énorme sur votre taux de conversion.

La recherche a consisté à faire passer un bloc de texte en police Arial de 10 à 13 points. Un espace supplémentaire a également été ajouté entre les lignes de texte. La version 13pt de la police a donné de bien meilleurs résultats parce que le contenu était désormais plus facile à lire et plus agréable à l’œil.

Cette petite modification a réduit le taux de rebond de 10 % et augmenté le taux de conversion de 133 % ! Tout cela grâce à l’augmentation de la taille de la police de deux points !

Il y a aussi une psychologie dans vos choix de polices. Cela s’applique surtout aux logos, mais il serait bon de garder cette information à l’esprit lorsque vous choisissez des polices pour vos e-mails. Certains types de polices sont associés à certains « sentiments ». Selon Crazy Egg, les cinq principaux types de polices suscitent des émotions ou des associations différentes :

Polices Serif

Citons par exemple Times New Roman, Baskerville et Georgia. Les polices serif à empattements dégagent un sentiment de respectabilité, de fiabilité et de tradition. Les marques plus anciennes (ou celles qui veulent donner l’impression d’exister depuis des décennies) font un bon usage de ce type de polices pour inspirer confiance. Le logo de Tiffany & Co en est un bon exemple.

Vogue aussi :

Polices sans serif

Citons par exemple Helvetica, Calibri et Franklin Gothic. Les polices sans empattement donnent un aspect moderne, propre, simple et direct. Ces polices donnent une impression de fiabilité et de stabilité. Les polices sans empattement ont un aspect très corporatif. Netflix propose une police sans empattement :

Polices modernes

Les exemples comprennent Futura et Century Gothic. Les polices modernes peuvent être élégantes, chics ou donner une impression générale de force. Le logo de Hulu est un exemple populaire d’utilisation d’une police moderne :

Polices scriptes

Les exemples comprennent Edwardian Script et Bickham Script. Les polices scriptes ne seront probablement pas un choix judicieux pour vos e-mails. Cependant, elles ont un impact lorsqu’elles sont utilisées dans des logos et cela pourrait fonctionner pour des éléments graphiques. Coca-Cola est un exemple intemporel de police scripte bien utilisée :

Polices d’affichage (display fonts)

Citons par exemple Cooper et Valencia. Les mots et les sentiments généralement associés aux polices d’affichage comprennent un sentiment d’individualité ou d’unicité, de convivialité ou d’expressivité. Pour les logos (et éventuellement les en-têtes), les polices d’affichage peuvent avoir un réel impact et se démarquer. Disney propose l’un des logos les plus connus au monde, qui comprend une police d’affichage :

En gardant ces informations à l’esprit, nous pouvons maintenant passer à la façon de sélectionner la meilleure police pour les e-mails.

Typographie d’e-mail : Comment choisir les meilleures polices de caractères

Vous connaissez maintenant les cinq types de polices de base qui sont disponibles (autres que les symboles). Et vous savez que les différents types de polices créent des émotions différentes chez vos clients. Mais comment le fait de connaître le type de police utilisé par Coca-Cola se traduit-il par le choix de la bonne police pour vos newsletters ?

Plongeons dans le vif du sujet.

Toute police que vous choisissez d’utiliser dans les e-mails de votre entreprise doit comporter les 4 qualités suivantes :

Qualité n°1 : Lisibilité

Nous avons déjà mentionné cette qualité, mais elle mérite d’être répétée car elle est de loin la plus importante. Si votre police n’est pas lisible, personne ne pourra lire vos e-mails. Et s’ils ne peuvent pas être lus, vous ne pouvez certainement pas vous attendre à des conversions, n’est-ce pas ?

Qualité n°2 : Clarté

Des polices propres et nettes, avec des lignes précises, sont ce qui va le mieux fonctionner dans votre e-mail. Rien avec des fioritures ou des gribouillis. Et certainement rien avec des lignes super fines ou légères. Les polices de grande taille sont également plus performantes. Augmentez la taille de votre police d’un ou deux points par rapport à la normale, veillez à ce que le poids de la police soit correct (mais pas gras) et visez un espacement de 1,15 ligne.

Qualité n°3 : Psychologiquement approprié

Comme mentionné plus haut, certains types de polices sont associés à des sentiments spécifiques. Assurez-vous que la ou les polices que vous choisissez correspondent à l’ambiance générale que vous essayez de transmettre avec votre contenu ainsi qu’à l’objectif de votre contenu. Le fait de paraître fiable ou d’être une figure d’autorité peut être bénéfique si vous essayez de vendre quelque chose, par exemple.

Qualité n°4 : Appropriation de la marque

De même, la police que vous choisissez doit être logiquement adaptée à votre industrie ou à votre créneau. Si votre entreprise donne une impression d’ancienneté, l’utilisation d’une police super moderne ou de style affichage ne serait pas appropriée. De même, si vous dirigez une entreprise technologique, une police rustique ou formelle ne serait probablement pas non plus la mieux adaptée. Tout se résume à ce qui vous semble le mieux adapté.

8 meilleures polices pour l’e-mail

Nous avons défini des polices de caractères adaptées aux e-mails. Nous avons également discuté de la manière dont vous pouvez réduire votre choix de polices. Mais il est maintenant temps de déterminer quelles sont les polices réellement adaptées aux e-mails et comment sortir des sentiers battus sans sacrifier la lisibilité ni nuire à votre taux de conversion.

Les polices basiques adaptées aux e-mails

Il existe un ensemble de polices basiques lisibles (bien qu’ennuyeuses) pour l’e-mail que la plupart des clients de messagerie peuvent reconnaître. Examinons maintenant chacune d’entre elles.

Arial

Arial est une police de caractères très utilisée. Elle a été créée à l’origine en 1982 par Patricia Saunders et Robin Nicholas de Monotype Imaging. Bien que conçue à l’origine pour être utilisée dans une imprimante laser IBM, elle est devenue depuis l’une des polices préférées des internautes.

Verdana

Verdana est une police conçue pour l’affichage à l’écran. Elle a été développée par Matthew Carter et se caractérise par des caractères larges et un grand espacement entre chaque caractère pour améliorer la lisibilité à l’écran. C’est un autre choix  basique pris en charge par la plupart des clients de messagerie électronique.

Helvetica

Et puis il y a l’Helvetica, l’une des polices les plus populaires qui existent actuellement. Elle est lisible, facile à lire et est prise en charge par la plupart des programmes de traitement de texte, des clients de messagerie et des navigateurs web.

Georgia

Georgia est une autre police de caractères commune à trouver prise en charge dans les clients de messagerie. Elle est intrinsèquement lisible, comporte des lettres largement espacées et utilise des designs de caractères qui rendent chaque lettre distincte afin d’éviter toute confusion. Il y a également une bonne différence entre les poids normaux et les poids gras, ce qui permet de l’accentuer.

Tahoma

Tahoma est une autre option qui est prise en charge par la plupart des clients de messagerie. C’est l’une des familles de polices sans empattement les plus populaires sur les systèmes d’exploitation Windows. Elle a été créée en pensant à l’affichage à l’écran, avec une clarté et une lisibilité réalisables avec des tailles de police encore plus petites. Elle a été créée à l’origine par Matthew Carter.

Lucida

Vous pouvez aussi utiliser Lucida, une autre famille de polices sans empattement qui privilégie les lignes nettes, un style clair et des formes de lettres distinctes. L’espacement des lettres est plus large que la norme et chaque caractère est également un peu plus haut, ce qui ajoute des éléments de lisibilité.

Trebuchet

Trébuchet est une autre option disponible que vous pourriez facilement utiliser dans vos conceptions d’e-mails. Elle a été créée par Vincent Connare en 1996 et est une police de caractères sans empattement. Elle a été conçue pour la lecture à l’écran et se caractérise par une plus grande hauteur de ligne, des bords arrondis et un plus grand espacement des caractères.

Times New Roman

Enfin, il y a Times New Roman, une police de caractères qui n’a pas vraiment besoin d’être présentée. Elle a un aspect traditionnel et est souvent utilisée comme police par défaut dans les programmes de traitement de texte. Elle est lisible à l’écran et dans l’impression.

Votre client de messagerie peut avoir accès à d’autres polices, mais les polices ci-dessus sont les plus lisibles et les plus reconnues.

Polices d’e-mails personnalisées

Si les choix de polices basiques ne vous plaisent pas, il existe une autre possibilité. Vous pouvez utiliser à la place des polices HTML pour créer un aspect plus personnalisé. Cependant, il est important de noter que tous les services de marketing par e-mail ne peuvent ou ne veulent pas afficher correctement les polices web.

Mais d’abord, faisons une pause pour discuter du fonctionnement des polices web.

Comment fonctionnent les polices web

Les polices web, comme leur nom l’indique, n’existent que sur le web. Elles ne sont pas incluses dans les systèmes d’exploitation, les appareils, les applications ou les logiciels. Elles existent en ligne et peuvent être ajoutées à vos projets par des extraits de code, des extensions et d’autres moyens. Le plus souvent, vous trouverez des polices de caractères utilisées sur les sites web. Plusieurs clients de messagerie électronique prennent actuellement en charge l’utilisation des polices web, notamment

• Android Mail
• Apple Mail
• iOS Mail
• Outlook 2000
• Outlook.com App
• Thunderbird

Cependant, les polices web ne sont pas prises en charge de la même manière par tous ces clients de messagerie. Certains ne nécessitent qu’un lien, tandis que d’autres nécessitent un extrait de code qui importe la police web. Plus d’informations à ce sujet dans un instant. Il est d’abord important de reconnaître que même si un client de messagerie ne prend pas en charge la police web de votre choix (ou sa méthode d’inclusion), votre contenu n’aura pas forcément un bel aspect.

La plupart des clients de messagerie électronique comprennent une option de secours. En d’autres termes, si la police web incluse dans votre e-mail ne se charge pas correctement, le client de messagerie vous proposera à sa place une police de secours. C’est généralement l’une des options génériques que nous avons énumérées ci-dessus, mais l’avantage est que
a) votre contenu sera toujours lisible,
b) votre contenu ne sera pas à moitié mauvais parce que les polices standard sont devenues la norme pour une bonne raison (elles sont simples et faciles à lire), et
c) vous pouvez souvent sélectionner la police que vous souhaitez utiliser comme police de secours.

Pour vous donner une idée de ce que nous voulons dire, la police par défaut de Gmail est Arial alors qu’Apple Mail utilise Helvetica. Outlook utilise Calibri tandis qu’iOS utilise San Francisco (une police qu’Apple a créée spécialement pour ses appareils et qui s’inspire fortement d’Helvetica Neue.

Si vous décidez d’utiliser des polices web, vous devez les tester sur différentes plateformes avant de vous lancer.

Certains services de marketing par e-mail incluent déjà le support de polices web. Campaign Monitor, par exemple, inclut plusieurs options de polices web dans son générateur d’e-mail en glisser-déposer et des options de secours sont automatiquement définies pour vous avec un minimum d’effort.

Si votre plateforme de marketing par e-mail n’inclut pas le support des polices web en natif, il est probable que vous puissiez l’ajouter via du code.

Il existe plusieurs extraits de code que vous pouvez utiliser pour incorporer des polices de caractères web dans les e-mails HTML.

<link>

L’utilisation de <link> pour ajouter des polices web à vos e-mails est un choix populaire. Toute police web que vous sélectionnez définira l’URL pour vous. Donc, si vous hébergez la police vous-même, changez-la pour l’URL de votre police sur votre site. Si la police est hébergée par le vendeur de polices web, utilisez l’URL qu’il vous fournit.

Vous placerez l’extrait de code dans la section <head> du code de votre e-mail. Il devrait apparaître au début. Cette méthode est supportée par la plupart des clients de messagerie et se charge assez rapidement. Vous pourriez cependant rencontrer quelques problèmes si le fichier de police web est sur le côté le plus large.

Ainsi, si vous obtenez votre police Web depuis Google Fonts, vous verrez ce qui suit après avoir sélectionné les styles de votre police et choisi link

@import

Une autre façon d’ajouter des polices web aux e-mails est d’utiliser @import. Celui-ci est super simple et fonctionne bien sur la plupart des clients de messagerie. Le seul hic est qu’il y a quelques anciennes versions d’Android.

Tout comme pour l’extrait de code <link>, vous insérerez également @import dans la section <head> de votre e-mail. Là encore, dans Google Fonts, c’est ce que vous voyez après avoir sélectionné une police, ses styles, et cliqué sur la bulle à côté de @import :

Si vous utilisez un autre service de polices web, vous n’obtiendrez peut-être pas un code intégré comme celui-ci, et vous devrez plutôt saisir vous-même le code. Utilisez l’URL que votre service de police web vous fournit, ou si vous choisissez d’héberger la police vous-même, utilisez le lien approprié sur votre serveur.

@font-face

Cette règle permet de télécharger une police depuis un serveur ou de l’héberger pour qu’elle puisse être utilisée sur un site web ou, dans ce cas, dans vos e-mails. Elle fonctionne de la même manière que les deux méthodes précédentes en ce sens qu’elle télécharge les polices à la volée pour qu’elles puissent être utilisées sur votre site web ou dans vos messages. Comme pour toutes les autres méthodes abordées ici, vous collez ce bout de code dans la section <head> du HTML de votre e-mail.

Ainsi, selon Mozilla, si vous deviez ajouter la police Open Sans à vos e-mails, vous utiliseriez le code suivant :

@font-face{

font-family:"Open Sans";

src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),

url("/fonts/OpenSans-Regular-webfont.woff")format("woff");

}

Spécification de polices web alternatives

Si vous voulez toujours que la police que vous avez soigneusement sélectionnée fonctionne, ce n’est pas toujours le cas. Que ce soit en raison d’une erreur du serveur ou de la compatibilité du système, il est bon de ne pas laisser au hasard l’option de secours choisie. Ainsi, en utilisant à nouveau @font-face, vous pouvez en fait spécifier la police locale que vous souhaitez utiliser au cas où votre police web préférée ne pourrait pas être téléchargée.

Nous pouvons utiliser le même extrait de code référencé ci-dessous et le modifier pour inclure une option de police de secours :

@font-face{

font-family:"Open Sans";

src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),

url("/fonts/OpenSans-Regular-webfont.woff")format("woff");

local("Helvetica")

}

Où trouver les polices web à utiliser dans vos e-mails

Il existe plusieurs endroits en ligne où vous pouvez vous procurer des polices web. Il suffit de tenir compte des conditions de licence qu’elles ont. Chaque site peut avoir des spécifications différentes que vous devez suivre, alors gardez cela à l’esprit.

• Google Fonts : C’est l’un des endroits les plus populaires actuellement pour trouver des polices web, offrant une bibliothèque de polices open source à utiliser partout et à tout moment. Il propose actuellement 1.020 familles de polices.
• Fonts.com : C’est une autre ressource fantastique pour les polices de toutes sortes, de la police pour ordinateur à la police web. Il s’agit en fait de la boutique Monotype et propose plus de 150.000 polices à parcourir et peut-être à acheter.
• Typography.com : C’est la vitrine pour H&Co, une fonderie qui comprend 1.500 polices pouvant être utilisées sur le web et pour l’impression.
• Font Squirrel : Si vous recherchez une sélection entièrement gratuite, Font Squirrel pourrait vous convenir. Ce site ne propose que des polices gratuites pouvant être utilisées à des fins commerciales.
• Adobe Fonts : Anciennement connu sous le nom de Typekit, Adobe Fonts comprend des milliers de polices parmi lesquelles vous pouvez choisir, toutes sont disponibles avec un abonnement Creative Cloud.
• Fontspring : Bien que vous deviez acheter les polices web listées sur Fontspring, elles sont disponibles sans abonnement et comprennent généralement des licences illimitées pour plus de commodité.
• MyFonts : Il s’agit d’une autre entreprise appartenant à Monotype, avec des tonnes de listes de polices pour l’impression et le web.
• Village : Il s’agit en fait d’un collectif de plusieurs fonderies qui se sont toutes regroupées pour vendre leurs polices indépendamment.
• Process Type Foundry : Il s’agit d’une petite entreprise qui a été fondée en 2002 par deux créateurs de polices et qui vend les polices qu’elle fabrique au grand public.
• FontShop : Enfin, il y a FontShop, une autre vitrine de Monotype et un endroit où l’on peut naviguer et acheter des polices pour le web.

Des polices web de haute qualité et lisibles

Si vous avez besoin d’inspiration, vous trouverez ci-dessous des exemples de polices web faciles à lire qui pourraient être ajoutées à vos e-mails à l’aide des méthodes décrites ci-dessus.

Open Sans

Open Sans est une police sans empattement très lisible, idéale pour la lecture à l’écran. Elle a été conçue par Steve Matteson et comporte des formes ouvertes. Toutes les lettres sont faciles à lire et ont une belle apparence, quelle que soit leur taille.

Roboto

Roboto est une autre police web de haute qualité qui s’affiche très bien sur les écrans. Elle a un design géométrique avec des courbes ouvertes, créant une dichotomie attrayante qui fonctionne tout simplement. Chaque lettre conserve une largeur naturelle, résistant à la rigidité typique des polices grotesques.

Raleway

Vous pouvez aussi opter pour Raleway, une autre police sans empattement qui offre des lignes plus fines et un aspect plus élégant. Cette famille de caractères a été conçue à l’origine par Matt McInerney, puis élargie par Pablo Impallari et Rodrigo Fuenzalida.

Century Gothic

Century Gothic est une police web qui offre un aspect classique. Et il est logique que ce soit le cas puisqu’il s’agit en fait d’une version modernisée de polices plus anciennes des années 20 et 30. Elle est largement supportée par tous les navigateurs et est lisible sur les écrans.

Proxima Nova

Proxima Nova est une autre option de police web qui est en fait une version révisée de la police Proxima Sans, créée pour la première fois en 1994. Cette police est légèrement géométrique, mais elle est également naturelle et constituerait une excellente sélection pour votre e-mail.

Quasimoda

Quasimoda est une police web élégante, facile à lire et universelle. Elle a été créée par Lettersoup, une fonderie de caractères basée à Berlin, en Allemagne, qui a été lancée par Botio Nikoltchev en 2014.

PT Sans Pro

PT Sans Pro est peut-être exactement ce que vous cherchez dans une police web. Elle offre des formes de lettres arrondies et un aspect naturel. Elle a été conçue par Paratype, une société de polices numériques qui a vu le jour dans les années 1980.

Brandon Grotesque

La police web Brandon Grotesque a été créée par HVD Fonts. HVD a été fondée par Hannes von Döhren et la société se concentre sur la création de polices professionnelles, faciles à lire, mais élégantes, qui conviennent à un grand nombre d’applications.

Sofia Pro

Sofia Pro est une police sans empattement qui a été conçue par Mostardesign en 2008. Elle conserve un sens de la modernité tout en incluant des formes arrondies. Elle atteint un équilibre solide entre les designs harmonieux et les designs géométriques.

Museo Sans

Enfin, il y a Museo Sans, qui est une version plus récente de la célèbre police Museo. Elle se caractérise par un design géométrique sans empattement qui peut être utilisé à la fois dans les titres et dans les textes. Elle est lisible et polyvalente, ce qui en fait une bête de somme pour les e-mails. Elle a été conçue par Exljbris en 2008.

Note sur l’utilisation d’images dans les e-mails par rapport au texte

Si vous intégrez une image telle qu’une affiche ou même une capture d’écran d’un texte écrit dans une jolie police, cela peut être un moyen de contourner le problème des polices de caractères adaptées aux e-mails. Mais cela pose des problèmes car les images contenues dans les e-mails ne s’affichent pas toujours, ou pas correctement, sur certains écrans. Il y a aussi le problème des lecteurs d’écran qui, à moins d’inclure un texte alternatif, ne sauront pas ce que dit l’image.

Faites attention lorsque vous utilisez des images dans des e-mails et ne les utilisez que pour améliorer le contenu de votre message, et non pour transmettre des informations clés. Ainsi, si vous vouliez annoncer une promotion spéciale sur votre site web, ne vous contentez pas d’inclure une image de votre affiche de promotion avec les détails du produit qui y figurent et d’appeler cela une journée de travail.

Vous devez, au minimum, inclure également le texte de l’image en texte clair. Mieux encore, évitez cette redondance et utilisez simplement un texte adapté pour les e-mails et gardez les images pour un intérêt visuel occasionnel.

La seule exception textuelle à laquelle je puisse penser qui rendrait l’utilisation du texte comme image appropriée est un logo, où le nom de la société ou de la marque est déjà donné.

Résumé

Ce n’est pas n’importe quelle police qui fera l’affaire lors de l’envoi d’e-mails aux prospects et aux clients. En fait, ne pas choisir une bonne police peut nuire considérablement à votre taux de conversion. Les polices que vous choisissez doivent donc être adaptées pour l’e-mail, faire bonne impression et offrir une excellente lisibilité.

Dans cet article, nous avons passé en revue les principaux types de polices qui existent et l’impact psychologique qu’elles peuvent avoir. Nous avons présenté des exemples de polices que la plupart des clients de messagerie prennent en charge. Nous avons également parlé des polices web, de la façon dont vous pouvez les ajouter à votre site, ainsi que des ressources et des exemples de polices web que vous pouvez utiliser pour démarrer.

Nous espérons que vous avez maintenant une meilleure idée de l’impact des polices adaptées aux e-mails. Et avec ce guide en main, vous pourrez faire des choix éclairés à l’approche de votre prochaine campagne d’e-mail.