L'une des préoccupations les plus marquantes dans le processus de production d'un courriel est le choix de la bonne police. Poids, hauteur, largeur, couleur, forme, espacement... Tout a-t-il de l'importance ? Oui, mais l'une des choses les plus importantes est de choisir une police qui soit lisible.
Dans ce post, nous allons vous montrer comment choisir la meilleure police professionnelle pour les emails.
Polices des e-mails HTML : Règles générales à suivre
Il existe trois règles de base à garder à l'esprit lors du choix de la meilleure police pour les e-mails :
1. N'utilisez jamais plus de 2 polices dans vos courriels
Si vous utilisez trop de polices, votre courriel semble très compliqué dans le meilleur des cas et ennuyeux dans le pire. Ne choisissez qu'une ou deux polices pour un seul courriel. Dans le meilleur des cas, il suffit d'utiliser une seule police mais de tailles différentes : une pour mettre en évidence l'en-tête et une autre pour le reste de votre contenu.
2. Évitez d'utiliser plus de deux styles de police dans les courriels
Ne mélangez pas les styles de police ordinaire, gras et italique dans les messages électroniques. Si vous en utilisez plus de deux, les courriels auront l'air un peu désordonnés. Normalement, un seul style de police est suffisant. Si vous voulez mettre des choses en évidence, vous pouvez utiliser le style de police gras.
Mais ne soulignez jamais votre texte et n'appliquez jamais de caractères italiques pour des raisons d'accessibilité au courrier électronique.
3. Portez une attention particulière à la lisibilité de la police choisie
La principale caractéristique de la police de votre contenu est la lisibilité. La lisibilité est la capacité de distinguer une lettre d'une autre. Bien entendu, un texte lisible est meilleur et plus rapide à lire. Vérifiez donc si tous les caractères sont visibles, clairs et suffisamment distinctifs.
Quelle est la police la plus lisible ? L'expérience sur la lisibilité des polices a été menée par Norbert Schwarz et Hyunjin Song en 2010. Les résultats sont impressionnants. Vous passez presque deux fois plus de temps à lire les polices de caractères italiques et décoratives que les polices ordinaires :
En parlant de lisibilité... Il existe deux grands types de polices de caractères : Serif et Sans Serif. Voyons quelle police utiliser pour les bulletins d'information par courriel.
Laquelle choisir : une police Serif ou Sans Serif ?
Les polices de caractères affectent également la lisibilité des courriers électroniques. Quelle est la différence entre elles ?
Les polices à empattement peuvent être définies comme des polices comportant une petite ligne à la fin de chaque caractère. Les polices avec empattement les plus populaires sont Times New Roman et Georgia.
Les polices sans empattement sont celles qui ne comportent pas de ligne décorative à la fin de chaque symbole. Les polices sans empattement les plus populaires sont Arial, Trebuchet MS et Helvetica.
Au cours de mes recherches, j'ai trouvé plusieurs sources qui affirmaient que les polices avec empattement étaient les plus appropriées pour les courriels, mais je ne suis pas du tout d'accord. En partant du principe que les courriels sont observés uniquement en ligne sur des écrans de bureau ou mobiles, les polices sans empattement sont les meilleures. Il est plus facile de lire les caractères sans empattement sur l'écran.
Polices sécurisées pour les e-mails
Voici la liste des 10 meilleures polices que vous pouvez utiliser avec la garantie à 100% qu'elles s'afficheront dans les boîtes de réception des utilisateurs comme vous l'aviez prévu :
1. Police d'e-mail Arial
Conçu en 1982, il est fourni avec toutes les versions de Microsoft, à partir de Windows 3, et de Apple Mac OS X. Affichée par tous les clients de messagerie. Grâce aux coupes diagonales terminales, elle a un aspect moins mécanique par rapport aux autres polices de la famille des sans-serif.
2. Police e-mail Helvetica
Un caractère sans-sérif, l'une des polices de caractères les plus utilisées, possède des lettres arrondies et des capitales larges. Conçu en 1957.
3. Police de messagerie Times New Roman
Elle comporte des minuscules hautes, légèrement condensées, des descendantes et des ascendantes courtes. Commandée par "The Times" en 1931.
4. Police de messagerie Verdana
Il a été conçu pour être lisible sur des écrans à faible résolution, sa principale caractéristique étant les caractères minuscules hauts et larges.
5. Courier / Courier New police d'e-mail
Conçue en 1955, elle est similaire à la Times New Roman, mais ajustée pour être une police monospace. Courier New a des points et des virgules plus lourds que la Courier originale. Courier est la police standard utilisée pour l'écriture de scénarios dans l'industrie cinématographique.
6. Police e-mail Tahoma
Elle est similaire à Verdana mais possède des lettres plus étroites, de petits compteurs et un espacement serré entre les lettres. Utilisée comme police d'écran par défaut pour les versions Windows 95, 2000 et XP.
7. Police d'e-mail de Géorgia
Ses minuscules sont hautes, ses traits sont plus épais que la moyenne, ses chiffres se fondent dans le texte grâce à leur taille similaire.
8. Police d'email Palatino
Elle a été conçue à l'origine pour les titres, les publicités et l'impression. Elle est plus large que les autres polices à empattement ancien.
9. Police de messagerie Trebuchet MS
Certaines lettres ont la queue raccourcie, les lettres en gras sont pointues plutôt qu'arrondies, et les points sont arrondis en minuscules. Sortie en 1996.
10. Police d'email de Genève
Une version remaniée de l'Helvetica, sa principale distinction est qu'elle possède un jeu de ligatures de base.
Ces polices sont réputées être les polices de courrier électronique les plus lisibles.
Polices personnalisées dans les e-mails
Il arrive que vous souhaitiez ou deviez utiliser une police personnalisée pour vos messages électroniques, soit pour préserver la cohérence de votre marque, soit pour donner à vos messages un aspect plus festif pour une occasion spéciale.
Nous tenons à vous rappeler que vous pouvez télécharger des polices personnalisées sur votre compte Stripo et les utiliser dans vos campagnes de courrier électronique.
Nous vous recommandons vivement de prévisualiser ces e-mails dans plusieurs environnements. Vous pouvez le faire avec notre outil de test intégré.
Il est important de noter :
Si un client de messagerie ne prend pas en charge une certaine police, celle-ci sera remplacée par une police par défaut.
Voici la liste des polices par défaut des clients de messagerie les plus populaires :
-
iCloud Mail utilise Helvetica comme police par défaut ;
-
Gmail adopte l'Arial ;
-
Les versions les plus anciennes de Microsoft Outlook utilisent souvent Calibri ;
Taille de la police des e-mails
Il n'existe pas de taille de police optimale pour le courrier électronique, car les polices ont souvent des hauteurs de symbole différentes. Par conséquent, une même police de 16px, par exemple, sera différente en fonction de la famille de polices choisie.
J'ai créé un modèle d'email avec Stripo qui permet de comparer différentes polices de la même taille. Veuillez voir les résultats :
Vous choisissez celui qui vous convient et l'utilisez dans tous vos courriels afin que vos bulletins d'information soient toujours lisibles et conformes à la marque.
Nous vous recommandons de définir les polices et les tailles de caractères dès le début de la conception de votre modèle d'e-mail - les paramètres seront appliqués à l'ensemble de l'e-mail. Cela vous fera gagner beaucoup de temps, car vous n'aurez pas à définir les polices pour chaque partie de vos e-mails.
Saviez-vous que Stripo permet de définir des tailles de police différentes pour les appareils mobiles et de bureau ? Par exemple, vous utilisez 14px pour les courriels ouverts sur les ordinateurs de bureau, et 16 pixels pour les courriels ouverts sur les appareils mobiles.
Définition de la taille de la police pour les ordinateurs de bureau
-
entrez dans l'onglet Apparence ;
-
allez dans la section "Paramètres généraux" ;
-
choisissez une police nécessaire dans le menu déroulant. Les polices personnalisées, que vous avez précédemment ajoutées à votre profil Stripo, apparaîtront également dans cette liste ;
-
définir l'espacement des lignes ;
-
dans la section Stripes, vous définissez une taille de police différente pour chaque partie de votre courriel (à l'exception des bannières), ainsi que la couleur de la police ;
-
dans la section En-têtes, vous devez à nouveau choisir une police - il peut s'agir d'une nouvelle police. Vous pouvez également définir la taille de la police pour les rubriques 1, 2 et 3 ;
-
dans la section Bouton, veuillez définir la couleur de la police du bouton et sa taille.
Définir la taille de la police pour les mobiles
-
entrez dans l'onglet Apparence ;
-
allez à la section "Formatage mobile" ;
-
définir la taille de la police pour les en-têtes, les pieds de page, les zones de contenu, les onglets de menu et les boutons.
Espacement des lignes pour les courriels
L'interligne est la distance verticale entre les lignes. Il est mesuré en pourcentage de la taille de la police.
Vous pouvez définir l'espacement souhaité pour vos messages électroniques dans les onglets et les sections où vous venez de définir la taille des caractères.
Certaines sources affirment que 150 % est la meilleure taille d'interligne.
Mais selon les directives sur l'accessibilité des courriels, elle varie entre 150 % et 200 %.
(copie de l'e-mail avec espacement d'une ligne)
(copie de l'e-mail avec un espacement de 1,6 ligne)
Liens dans les e-mails
N'utilisez pas une police différente pour attirer l'attention des lecteurs sur les liens. Ne mettez jamais de liens sans texte. Le texte doit expliquer où mène ce lien et faire organiquement partie du texte. N'utilisez pas les mots "ici" ou "lien" comme texte. Ils sont trop courts et trop généraux pour mériter d'être cliqués.
L'une des meilleures pratiques consiste à créer des liens de la même couleur que le logo. C'est très bien, regardez :
(Source : courriel de la Fondation pour l'épilepsie)
Vous pouvez également souligner les liens de vos e-mails si vous le jugez nécessaire ou si cela correspond à la conception de votre e-mail.
Toutefois, nous vous recommandons vivement de ne jamais souligner les liens pour des raisons d'accessibilité au courrier électronique - cela distrait les dyslectiques.
Polices de caractères pour les boutons dans les courriels
Les boutons sont les mêmes liens mais ils ont une forme plus interactive pour les utilisateurs. Il est préférable d'utiliser les deux dans votre courrier électronique. Si vous fournissez un lien qui conduira les lecteurs à un article de blog, vous pouvez en faire un lien texte, mais si vous fournissez un lien pour essayer le produit que vous proposez, utilisez simplement des boutons.
Il n'y a pas de règle précise concernant la couleur à utiliser pour les boutons, mais il est préférable de se fier à la psychologie des couleurs et d'essayer de ne pas ruiner le concept du design par une reproduction trop forte des couleurs.
Il en va de même pour les polices de caractères des boutons : Aucune règle précise. Vous devez simplement vous assurer que les textes des boutons sont suffisamment lisibles.
La couleur du texte est censée correspondre à celle du bouton et assurez-vous qu'il est suffisamment visible pour être lu. Vérifiez également que le texte est bien placé à l'intérieur du bouton, il ne doit pas dépasser les limites du bouton.
Voici un exemple où le bouton a l'air cool :
(Source : Modèle d'email Stripo)
Il est important de noter :
Vous pouvez ajouter un espace blanc dans les boutons avec Stripo afin qu'il y ait un peu d'espace entre le texte et les bords du bouton. Cela les rend plus lisibles.
Alors comment faire ? Travaillez sur le "rembourrage interne" dans l'onglet Bouton.
Vous pouvez également définir une taille de police différente pour les boutons d'e-mail pour l'affichage mobile.
Pour ce faire, vous devez :
-
allez dans l'onglet Apparence ;
-
allez dans l'onglet Formatage mobile ;
-
définir la taille du texte du bouton - pour que le texte de votre bouton soit lisible sur les appareils mobiles. La taille idéale est de 16px ou plus ;
-
Activez le bouton "Boutons pleine largeur" pour que vos boutons soient plus larges sur les appareils mobiles. Les risques que les clients remarquent les boutons pleine largeur sont trop élevés.
Texte sur les bannières
Voici l'occasion d'utiliser des polices festives ou décoratives que vous ne devriez pas utiliser comme police de texte principale. Comme le texte au-dessus d'une bannière fait partie d'une image, il restera le même dans tous les clients de messagerie. Et on s'attend à ce qu'il soit suffisamment festif. Vous pouvez donc choisir n'importe laquelle.
Sachez qu'il est préférable de choisir une police lisible. Et qu'il n'est pas nécessaire d'écrire trop de texte sur une bannière. Soyez bref.
Le choix de l'une ou l'autre dépend de votre inspiration et de la conception de votre courriel.
Utilisation de polices de caractères décoratives sur des bannières de courrier électronique avec Stripo
-
lorsque votre image de bannière est téléchargée et modifiée, vous cliquez sur l'icône "Texte" au-dessus du modèle pour commencer à travailler sur la copie du bouton ;
-
saisissez votre texte dans la section "Légende" de vos bannières ;
-
puis mettez en surbrillance le texte de votre bannière et choisissez la police de bannière souhaitée dans la liste déroulante.
Couleur de la police des e-mails
Il n'y a que 2 règles à suivre ici :
1. Limitez le nombre de couleurs au minimum
Vous ne devez utiliser que les couleurs qui sont présentes dans votre identité de marque. Si vous avez l'idée d'utiliser plus de 3 couleurs dans votre e-mail, laissez cette idée de côté car cela rendra le texte illisible et votre e-mail désordonné.
Si vous voulez mettre en évidence une phrase ou un membre de phrase, utilisez simplement une police en gras, l'utilisation d'une couleur différente est ambiguë.
Exemple d'une bonne combinaison de couleurs dans les e-mails.
(Source : Email de Victoria's Secret)
2. Utilisez des couleurs contrastées
Si vous avez l'intention d'utiliser des couleurs vives - ce que beaucoup d'entre nous font lorsqu'il s'agit de vacances - veillez à utiliser des couleurs contrastées. Ne placez pas de texte rouge sur des boutons verts, n'utilisez pas de blanc sur du gris. Cela peut sembler assez festif pour les personnes qui ont une bonne vue. Cependant, les daltoniens risquent de ne pas trouver notre texte lisible.
Pour le contenu des e-mails, les concepteurs utilisent généralement des couleurs noires ou gris foncé. 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 une police gris clair sur un fond blanc, car elle rendra la lecture de vos e-mails difficile.
Balises HTML pour le formatage du texte
Les spécialistes du marketing par e-mail qui préfèrent les constructeurs d'e-mail peuvent formater les textes directement dans le constructeur.
Ceux qui préfèrent coder les e-mails à partir de zéro peuvent avoir besoin des éléments suivants :
-
pour rendre votre texte en gras :
<strong> text here </strong> or <b> text here </b>
-
pour les listes à puces :
<ul>
<li> point 1 </li>
<li> point 2 </li>
<li> point 3 </li>
</ul>
-
pour rendre votre texte italique :
<i> text here </i> or <em> text here <em>
-
d'utiliser la même police de caractères mais en plus petit :
<small> text here </small>
-
pour mettre en évidence le texte avec un remplissage jaune (par défaut) :
<mark> text here </mark>
-
et celui-ci vous permet de définir un paragraphe :
<p> text here </p>
Textes de droite à gauche dans les courriels
Plus de 550 millions de personnes parlent les langues qui utilisent l'inscription Right-to-Left. Le texte RTL est bien plus qu'une simple inversion de mots.
Par exemple, vous n'êtes pas censé inverser les chiffres, les mots étrangers, etc. Tous les signes de ponctuation que vous mettriez normalement à la fin de la ligne, la commenceront en fait. Nous n'entrerons pas dans les détails ici. Mais vous pouvez vous familiariser avec toutes les directives relatives au texte RTL dans notre article de blog "Texte de droite à gauche".
Nous y montrons également comment activer l'option RTL avec Stripo, afin que vous puissiez utiliser des scripts RTL dans vos courriels sans avoir de compétences en codage.
Directives sur l'accessibilité des e-mails
En bref, nous devrions tenir compte de ces directives pour plusieurs raisons :
-
pour permettre aux daltoniens de lire nos courriels ;
-
pour permettre aux personnes souffrant de déficiences visuelles d'écouter nos courriels à l'aide de lecteurs d'écran ;
-
pour permettre à nos utilisateurs qui sont extrêmement occupés et qui consultent leurs courriels en conduisant ou en cuisinant et demandent à Siri de "lire" leurs messages entrants, d'écouter nos courriels ;
-
pour permettre aux dyslexiques de lire nos courriels - car beaucoup de personnes souffrant de dyslexie ne le savent pas, mais la lecture de textes non adaptés leur est tout à fait insupportable.
Ainsi, les directives pour rendre votre texte de courriel accessible :
-
Tenez compte du contraste des couleurs.
-
Alignez vos textes à gauche pour faciliter la perception des messages électroniques par les dyslexiques - évitez les textes alignés au centre.
-
Ajoutez toujours des signes de ponctuation à la fin de chaque puce. Oui, c'est peut-être contraire aux règles de grammaire, mais en faisant cela, nous rendons nos e-mails plus lisibles et nous rendons au moins un destinataire plus heureux.
-
La taille de la police doit être de 14 pixels ou plus.
-
Ne soulignez pas les textes.
-
Évitez l'italique. Si vous devez mettre en évidence une partie de votre texte, utilisez uniquement des caractères gras !
-
N'utilisez pas de majuscules !
Pour plus d'informations, veuillez vous référer à notre article de blog "Accessibilité des e-mails".
Quelle est la meilleure police à utiliser pour les bulletins d'information par courriel ?
Il n'existe pas de meilleure police pour Gmail, ni de meilleure police pour Outlook, ni pour aucun autre client de messagerie. Cela dépend de la langue que vous parlez. Par conséquent, nous osons dire que les préférences varient d'un pays à l'autre en raison des caractéristiques de la langue.
Grâce aux nombreuses expériences réalisées par l'équipe marketing d'eSputnik, les meilleures polices de caractères pour les courriels destinés aux pays russophones sont Arial et Tahoma. Arial est la police la plus convaincante parmi ceux qui mettent en place des campagnes d'email marketing en russe. Tahoma convient aussi bien aux courriels à fort contenu qu'aux petits textes.
Helvetica est la police la plus populaire dans les pays anglophones. L'Arial occupe la deuxième place.
Pour choisir la plus lisible selon vous, en fonction des caractéristiques de votre alphabet, vous pouvez tester toutes les polices sécurisées pour les courriels comme nous l'avons fait. Vous pouvez également demander à vos amis et collègues de vous aider pour ce test.
J'ai créé un modèle d'email avec l'éditeur Stripo avec le même texte et la même taille de 18px pour chaque police.
Voici donc les résultats, comparez ces polices et choisissez celle qui correspond le mieux à vos besoins :
Dernières réflexions
Compte tenu de tout ce qui précède, nous pouvons dire qu'il n'existe pas de polices d'email d'aspect professionnel, lisibles et agréables à regarder sur tous les types d'appareils. Vous devez toujours choisir :
-
Georgia et Times New Roman sont trop étroits ;
-
Courier New est large mais peut-être même trop large pour le courrier électronique ;
-
Arial est plus léger que Helvetica ;
-
il est impossible de distinguer les polices Verdana et Tahoma.
Outre le choix de la bonne police de caractères, nous devons rendre nos courriels accessibles en respectant les directives mentionnées ci-dessus.
33 commentaires