Création Modèles
~ 18 min lu
16 commentaires
290203 vues
évaluez-le
28 avril

Meilleures Polices pour les Emails : Usage d’Astuces

Stripo / Blog / Meilleures Polices pour les Emails : Usage d’Astuces

L'une des préoccupations majeures dans le processus de création d'emails est le choix de la police. Poids, hauteur, largeur, couleur, forme, espacement… Est-ce que tout est si important ? Oui, mais le plus important est de choisir la police la plus facile à lire. Toutes les autres fonctionnalités de la police sont des préoccupations mineures.

Visionnez notre courte vidéo concernant les polices, leurs types, les polices Internet sécurisées, et la manière d’appliquer des polices festives avec Stripo. Et ce qui est le plus important : comment bien choisir la meilleure police pour votre modèles d’email :

Concevez des e-mails sophistiqués et entièrement adaptifs.

Vous avez le choix entre deux options lorsque vous choisissez la meilleure police pour email 2018. La première option consiste à choisir une police Internet sécurisée, standard et incluse par défaut sur la plupart des systèmes d’exploitation, et utilisée par la plupart des email client.

Voici la liste des 10 meilleures polices Internet sécurisées que vous pouvez utiliser avec la garantie à 100% qu'elles seront vues par quiconque de la même manière que vous les voyez :

1. Arial
Conçue en 1982, elle est fournie avec toutes les versions de Microsoft, à partir de Windows 3 et Apple Mac OS X. De plus, elle est affichée par tous les email clients. En raison des coupes terminales en diagonale, l'apparence est moins mécanique que celle des autres polices de la famille Sans Serif.

2. Helvetica
Conçue en 1957, c’est une police de caractères Sans Sérif, une des polices les plus utilisées dans ce type, qui est composée de lettres arrondies et de majuscules.

3. Times New Roman
Commandé par « The Times » en 1931, cette police possède de grandes lettres minuscules, légèrement condensées, ainsi que des descendeurs et des ascendeurs courts.

4. Verdana
Elle a été conçue pour être lisible sur des écrans à basse résolution. Sa principale caractéristique est la taille haute et les caractères minuscules.

5. Courier / Courier New
Conçue en 1955, elle est semblable à Times New Roman, mais est ajustée pour être une police monospace. Courier New possède des points et des virgules plus lourds que le Courier original. Courier est la police standard utilisée pour l'écriture de scénarios dans l'industrie cinématographique.

6. Tahoma
Similaire à Verdana tout en ayant des lettres plus étroites, petits compteurs et un espacement serré des lettres. Elle est utilisée comme police par défaut pour les versions Windows 95, 2000, et XP.

7. Georgia
Elle possède de grands et minuscule caractères plus épais que la moyenne. De plus, ses chiffres se fondent parfaitement dans le texte en raison de sa taille similaire.

8. Palatino
Conçue à l'origine pour les en-têtes, les publicités et l'impression, elle est plus large que les autres vieilles polices serif.

9. Trebuchet MS
Conçu en 1996, elle possède des extrémités raccourcies pour certaines lettres. En gras, ses lettres sont plutôt pointues qu’arrondies. De plus, les points sont arrondis en minuscule.

10. Geneva
Une version repensée d’Helvetica, dont la principale différence est qu’elle possède un ensemble de ligatures de base.

L’option suivante consiste à inclure une police Internet, mais il existe de nombreux risques qu’elle ne soit pas affichée correctement, car l’email client ne la prend pas en charge. Dans le dernier cas, la police Internet sera rétablie par une police par défaut.  

Voici la liste des polices par défaut pour les emails clients les plus populaires :

  • iCloud Mail utilise Helvetica comme police par défaut.
  • Gmail adopte Arial.
  • La plis vieille version de Microsoft Outlook utilise souvent Calibri.
  • Outlook 2007/2010/2013 possède Times New Roman comme police de secours.

Comment bien choisir une police d’email ?

Si vous ne vous fiez qu'à votre opinion personnelle, il y a un risque que tout le monde ne partage pas votre opinion sur la meilleure police de caractère et votre message ressemblera à un message du passé ou sera aussi convivial que les personnes des transports en commun rencontrées de bon matin.

Si vous utilisez trop de polices, cela semblera très compliqué dans le meilleur des cas et ennuyeux dans le pire des cas. Choisissez seulement une ou deux polices pour un email. Dans les cas parfaits, il suffit d’utiliser qu’une police, mais plusieurs tailles différentes : une pour surligner l’en-tête et une autre pour le reste du contenu.

En réalité, il existe uniquement deux options pour bien choisir une police. Vous pouvez choisir une police Internet sécurisée et vous assurer que ce soit la même chose pour tout le monde ou bien ajouter une police Internet et vous assurer que tout le monde utilise les email clients qui la prennent en charge, ce qui est presque impossible, car Gmail, Yahoo Mail et Outlook 2007/13/10/16 ne supporte pas les polices Internet et, honnêtement, il n’y aura plus ou moins que les utilisateurs d'iPhone et d'iPad qui pourront la voir. Nous ne vous recommandons donc pas l’utilisation de polices Internet afin de pas nuire à l’expérience de votre utilisateur.

La caractéristique principale de la police de votre contenu, comme mentionné ci-dessus, est la compréhension. Que pourrait-on ajouter ? Une autre caractéristique importante de la compréhension est la lisibilité. Ce n’est pas exactement pareil. Dans une police, certains caractères peuvent être lisibles et d'autres non. Évidemment, le texte lisible est meilleur et plus rapide à lire, donc faites bien attention à ce que tous les caractères soient visibles, clairs et distinctifs.

L’expérience concernant la compréhension des polices a été fournie par Schwarz et Hyunjin Song en 2010. Les résultats étaient très impressionnants. On passe presque deux fois plus de temps à lire les polices décoratives que les polices par défaut et facile à lire :

email font experiment, clear fonts are better to read

Laquelle choisir : une police Serif ou Sans Serif ?

Un autre point consiste à choisir entre les polices Serif et Sans Serif. Quelle est la différence entre celles-ci ?

difference between serif and sans serif fonts

Les polices Serif peuvent être définies comme des polices comportant une petite ligne à la fin de chaque caractère. Les polices Serif les plus populaires sont Times New Roman et Georgia.

Les polices Sans Serif sont celles qui ne comportent pas de ligne décorative à la fin de chaque caractère. Les polices de caractères Sans Sérif les plus populaires sont Arial, Trebuchet MS et Helvetica.

Au cours de l’expérience, nous avons trouvé plusieurs sources qui affirmaient que les polices Serif étaient les mieux adaptées aux emails, mais nous pensons le contraire. En supposant que les emails ne soient observés qu'en ligne sur ordinateur ou ordinateur portable, les meilleures polices sont les polices Sans Serif car il est plus facile de lire ses caractères sur un écran.

Un autre fait intéressant est que l'article de Beefree email design blog, qui recommande d'utiliser des polices Serif pour des contenu d’email lourds, utilise une police Sans Sérif sur son blog :

sans serif is better for screens

Ainsi, pourquoi n’ont-ils pas utilisé une police Serif pour leurs articles de blog si elle est aussi parfaite ? Nous pensons que cela est la preuve qu’une police Sans Serif est meilleure car celle-ci fonctionne pour les pages Internet comme pour les emails. Utilisez une police Serif uniquement pour les en-têtes et les sous-en-têtes si nécessaire.

Utilisez des polices personnalisées dans les e-mails pour rester pleinement sur la marque.

Taille de Police

Si vous modifiez la police, assurez-vous que celle que vous avez sélectionnée ne semble pas plus petite que la précédente. Souvent, des polices différentes ont une hauteur de symbole différente, de sorte qu’une même police de 14px sera différente en raison de la famille de polices choisie.

La meilleure taille de police d’email est de 14px et plus pour les utilisateurs d’ordinateurs et 16px pour ceux qui utilisent des appareils mobiles. Si vous utilisez un modèle réactif, assurez-vous que la taille des caractères soit automatiquement augmentée pour la mobile.  

Nous avons créé un modèle d’email avec Stripo permettant de comparer les différentes dimensions à partir des mêmes polices. Voici les résultats :

how to choose a font for emai and to find the best font size? fonts sizes comparison examples

Résultat : les polices de 16px sembles géniales. Nous préférons les utiliser aussi bien pour les ordinateurs que pour les appareils mobiles.

Espacements

Il est essentiel de créer des espaces entre les paragraphes et entre les lignes de texte. Faites bien attention à ce que votre police possède suffisamment d'espaces entre les lignes. La hauteur de ligne la plus largement utilisée varie de 22 à 24 pixels. En d'autres termes, le pas de ligne parfait pour les emails est de 1,5em, soit 24 pixels.

La dernière chose à faire est de faire attention aux espaces entre les caractères. Il n’existe pas d’opinion décisive préférable sur son utilisation : que ce soit une police de caractères étroite ou large.

Georgia et Times New Roman fournissent des espaces trop étroits entre les caractères et influencent considérablement la lisibilité. À notre humble avis, afin d’obtenir une bonne distance entre les caractères, il est préférable d’utiliser la police Courier ainsi que Courier New. C’est peut-être pour cette raison que ces deux dernières polices étaient si populaires en 2017. 

Utilisez des espaces entre les éléments des emails. S'il existe une image dans un email, assurez-vous que vous avez des espaces avant et après l'image, cela améliore considérablement la lisibilité. Évidemment, il est préférable d’aligner au centre des éléments graphiques tels que les images.

Voici un exemple où les espaces ont été ignorés :

bad email font and spacing, paragraphs

Pouvez-vous imaginer que ceci soit qu’un paragraphe de l’email contenant plus de 1500 mots ? Il est évident qu’il vaut mieux dire moins que plus. 

Voici un autre exemple :

grey is worse than black for reading, email design, text color

Celui-ci est encore pire car la couleur de la police est grise, ce qui entraîne une mauvaise visibilité car la police est trop petite. Ne commentons même pas les espaces. Oui, ils existent mais n’aident pas à la lisibilité car les phrases sont trop longues.

Liens & boutons

N’utilisez pas de police distincte pour souligner les liens. Ne mettez jamais de liens sans texte d'ancrage. Le texte sur l'ancre devrait expliquer où ce lien mène et faire organiquement partie du texte. N'utilisez pas les mots « ici » ou « lien » comme texte d'ancrage. Ils sont trop courts et trop généraux pour que l’on soit intéressés par ces derniers.

Les boutons sont pareils que les liens. Cependant, ils possèdent une forme plus interactive pour les utilisateurs. Il est préférable d’utiliser les deux dans votre email. Si vous donnez un lien pour lire un article, faites-en un lien texte et si vous donnez un lien pour essayer le produit que vous avez, utilisez simplement des boutons.

Une des meilleures pratiques consiste à créer des liens de la même couleur qu’un logo. Cela semble génial, essayez :

color identity, the best fonts for logo, text and links

Il n’existe pas de règle précise concernant la couleur des boutons à utiliser, mais il est préférable de s’appuyer sur la psychologie des couleurs et d’essayer de ne pas ruiner le concept du design avec la reproduction de couleurs trop lumineuses.

Il existe deux polices qui conviennent le mieux pour les boutons : Georgia et Verdana. Il est génial d’utiliser Georgia pour les titres ainsi que pour les sous-titres. Cela rend joli ! En réalité, la seule chose que vous devriez vérifier avant d’envoyer un email, c’est de vérifier si la couleur du texte correspond à l’arrière-plan du bouton et de vous assurer qu’il soit suffisamment visible pour être lu. Vérifiez également si le texte se trouve correctement sur le bouton, il ne doit pas traverser les bords de ce dernier. 

Voici un exemple où le bouton semble génial :

the best font for email banner and button design

Voici un exemple où les boutons et les liens sont trop utilisés :

too many links and buttons in email design

Faites vos boutons CTA visible et cliquable partout

Texte sur les bannières

Voici le changement visant à utiliser des polices propriétaires, Internet, scripts, manuscrites ou décoratives que vous ne devriez pas utiliser comme police de texte principale. Dans le cas où le texte d'une bannière fait partie d'une image, vous pouvez absolument tout faire avec cette dernière. 

Lors de la création d’une bannière d’email, l’important est de souligner l’identité de la marque. Vous pouvez utiliser n’importe quelle police, mais il est préférable de choisir celle qui est lisible. Attention : n’écrivez pas trop de texte sur une bannière. Il ne devrait y avoir que des mots qui suscitent l’intérêt des utilisateurs et les motivent à continuer de lire votre email.

Voici deux exemples intéressants. L'un est avec des polices claires et simples :

clear font for email banner, the best fonts for emails

L’autre utilise une police décorative :

decorative font on email banner, the best email fonts

Laquelle adopter comme inspiration et la conception de vos propres emails est votre choix.

Couleurs

La seule règle à suivre est d'utiliser les couleurs uniquement pour mettre en valeur l'identité de la marque. Si vous avez l’idée de créer un texte coloré, laissez simplement cette idée de côté car celle-ci rendra le texte illisible.

Habituellement, il n'existe que 3 couleurs pouvant être utilisées dans un email. La première sert à marquer l’en-tête, la suivante sert pour le texte et la couleur bleue sert à rendre visible des liens. C'est tout ! Vous pouvez même réduire ce nombre à deux couleurs tout en mettant l'en-tête de la même couleur mais en la soulignant avec une taille ou une police différente.

Si vous souhaitez souligner une phrase, utilisez uniquement une police en gras, car l’utilisation d’une couleur différente est ambiguë. Pour le contenu des emails, les designers utilisent généralement des couleurs noires ou grises foncées. C’est mieux pour la lisibilité. La seule exception est lorsque vous avez un fond noir. Dans ce cas, utilisez une police blanche. N'utilisez pas de police grise claire, car il est difficile de lire à travers les différents paramètres de contraste des écrans.

Balises HTML pour formater le texte

Habituellement, les polices Internet sécurisées sont déclarées dans une mise en forme CSS. Il ne s’agit donc pas d’un simple code HTML. Cependant, il existe plusieurs balises HTML pour le formatage du texte. Peut-être que tout le monde les connaissait auparavant, mais au cas où, les voici :

  • Pour mettre la police en gras :
    <strong> </strong> ou <b> </b>
  • Pour rendre une liste en pointillée dans un email, utilisez cette structure :
    <ul>
        <li>premier déclaration</li>
        <li>deuxième déclaration</li>
        <li>troisième déclaration</li>
    </ul>
  • Afin de souligner le texte :
    <i> </i> ou <em> <em>
  • Pour ajouter un petit texte de la même police que vous utilisez :
    <small> </small>
  • Mettre en surbrillance le texte en jaune (par défaut) :
    <mark> </mark>
  • Pour marquer qu’une partie du texte est supprimé mais non remplacé :
    <del> </del>
  • Vous permet de définir un paragraphe :
    <p> </p>

Meilleures pratiques pour l’implémentation de polices Internet sécurisées

En raison de nombreuses expériences faites par l’ équipe marketing d’eSputnik, les meilleures polices d’emails sont Arial et Tahoma. Arial est la police la plus convaincante parmi ceux qui ont mis en place des campagnes de marketing par emails. Tahoma semble avoir fière allure dans les contenus, qu'il s'agisse d'emails lourds ou de petits textes.

Nous avons créés un modèle d'email avec l'éditeur Stripo composé d’un même texte et d’une taille de 18px pour chaque police. Il n’existe pas d’éditeur d’email Palatino ni Geneva chez Stripo, il existe cependant des polices personnalisées telles que Roboto et Open Sans qui sont par mises par défaut pour la plupart des systèmes d’exploitation. Cependant, il est préférable de définir une police de secours au cas où vous les utilisiez.

Voici donc les résultats : comparez ces polices et choisissez celle qui répond le mieux à vos besoins :

the best font for email, web safe fonts comparison

Ne perdez pas votre temps à chercher la meilleure police pour Gmail, la meilleure pour Outlook et tout autre email client car ces derniers remplacent les polices inconnues par celles de secours. Et comme nous l’avons dit plus haut, Gmail utilise Arial, Outlook remplace les polices inconnues par Time New Roman et Mac OS X utilise Helvetica.

Conclusion

Sans tenir compte de ce qui précède, nous pouvons dire qu’il n’existe pas de police de caractères et de taille d’email lisible et agréable à regarder sur tous les types d’appareils. Il faut toujours choisir :

  • Georgia et Times New Roman sont trop étroites ;
  • Courier New est large mais peut-être de trop pour les emails ;
  • Arial est plus léger que Helvetica ;
  • Il est impossible de distinguer les polices Verdana et Tahoma.

À notre humble avis, les deux dernières sont les meilleures polices pour les emails de newsletters, mais elles ne le sont pas une fois fois imprimées. Nous préférions cependant choisir les deux dernières polices pour nos modèles d’email. Laquelle préférez-vous ? N’hésitez pas à nous laisser des commentaires sur Facebook et à partager cet article si vous l’avez aimé.

Paulo Marreiros il y a 2 mois

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Hanna Kuznietsova commenté à Paulo Marreiros il y a 2 mois

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates il y a 3 mois

nice blog theme you use in your blog can you share which theme you are using

Hanna Kuznietsova commenté à pirates il y a 3 mois

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner il y a 5 mois

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Hanna Kuznietsova commenté à Igor Greshner il y a 5 mois

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom il y a 11 mois

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Hanna Kuznietsova commenté à Khairom Munawwar Baharom il y a 11 mois

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk il y a 11 mois

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Hanna Kuznietsova commenté à Martin Schenk il y a 11 mois

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey il y a 1 an

Thanks for sharing this amazing content. This is really helpful for us.

Hanna Kuznietsova commenté à rohit dubey il y a 1 an

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher il y a 1 an

What font are you using for this post? I like it!

Hanna Kuznietsova commenté à Marcia Bosscher il y a 1 an

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould il y a 1 an

I found this article to be a very helpful refresher. Thank you!

Hanna Kuznietsova commenté à Myron Gould il y a 1 an

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Vous pourriez être intéressé par

← précédent suivant →
09 octobre · 16 min lu
Les 16 meilleures pratiques pour le design des entêtes d’e-mails

L’entête du e-mail est l’élément que vous utilisez régulièrement dans vos e-mails de newsletters. Mais bien souvent, nous oublions que c’est bien plus complexe que seulement un logo et un menu. L’entête complet d’une newsletter comporte trois parties essentielles : Infos à propos de l’envoyeur ; la ligne de sujet, et le préentête ; l’entête de l’e-mail lui-même. Dans cet article, nous vous montrerons comment définir la ligne de sujet et le préentête, et nous partagerons 16 idées d’entête d’e-mails qui rendent vos e-mails plus...

Création Modèles How-to
Use-Data-from-Google_Featured Image
25 septembre · 9 min lu
Comment extraire des données de Google Sheets pour vos e-mails

Avez-vous déjà pensé à extraire des données de Google Sheets pour les insérer dans vos e-mails pour automatiser la production ou la mise à jour de vos e-mails ?   Oui, c’est possible. C’est même possible sans votre intervention. Nous voulons vous rappeler ce qu’est le contenu en temps réel : le contenu en temps réel, c’est-à-dire dynamique, permet de mettre à jour le contenu de vos e-mails après que l’e-mail ait été envoyé. Cela signifie que les utilisateurs voient toujours du...

Création Modèles How-to AMP
Soyez toujours au fait des dernières actualités de l'e-marketing, des guides, des articles et des guides pratiques sur la conception d'e-mails