Plus que des mots : comment utiliser une typographie d'e-mail qui en dit long

Serif et sans-serif sont les polices de caractères les plus couramment utilisées, en particulier pour le corps du texte. En effet, ils sont les plus lisibles et donc accessibles. Ils rendent bien lorsqu'ils sont réduits et à des poids inférieurs.

Les polices de caractères de script et d'affichage sont souvent trop complexes pour le corps du texte. Cela signifie qu'ils peuvent être difficiles à lire et encore plus difficiles à numériser. Ils sont donc généralement réservés aux gros titres.

Les polices de caractères à espacement fixe sont également moins couramment utilisées comme corps de texte. Au lieu de cela, ils sont privilégiés dans les ressources techniques des langages de programmation pour distinguer le code du langage naturel.

Polices Web

Pour utiliser une police de caractères dans un e-mail, il doit s'agir d'une police Web.

Il s'agit d'une police de caractères numérique qui peut être appelée dans votre code. Il existe de nombreuses polices Web gratuites ainsi que celles qui peuvent être achetées. Tout d'abord, examinons les deux types de polices numériques que vous pouvez appeler dans votre courrier électronique : les polices Web sécurisées et les polices Web.

Polices sécurisées pour le Web

Ce sont des polices qui sont installées sur la plupart des systèmes d'exploitation, ce qui signifie que l'appel de ces polices dans votre code de messagerie entraînera un rendu cohérent entre les clients de messagerie, les appareils et les systèmes d'exploitation.

Voici les polices Web sécurisées les mieux prises en charge sur les appareils Windows et Mac :

Polices Web

Ce sont des polices de caractères qui ne sont pas disponibles sur tous les systèmes d'exploitation.

Par conséquent, vous devez ajouter du code supplémentaire à vos e-mails pour les utiliser. Vous devez également vous assurer d'avoir des polices Web sécurisées de secours dans votre pile de polices, car tous les clients de messagerie ne rendront pas les polices Web.

Il existe de nombreux endroits différents où vous pouvez trouver des polices Web, telles que Google Fonts qui est une ressource gratuite et Adobe Fonts qui nécessite un abonnement.

Pour un guide complet sur les polices Web, consultez notre Guide ultime des polices Web.

Idéalement, vous ne devriez pas utiliser plus de deux styles de police à la fois . C'est en partie parce que cela peut devenir bruyant et déroutant si vous en appliquez trop, mais cela peut également augmenter le temps de chargement de votre e-mail si vous appelez plusieurs polices Web.

Style de police

Nous pouvons concevoir et coder des styles de police supplémentaires pour attirer l'attention sur les mots et les phrases de notre courrier électronique. Mais comment et quand nous les utilisons sont importants car ils peuvent avoir un impact sur la lisibilité et l'accessibilité de nos e-mails.

Le guide ultime de l'accessibilité des e-mails Découvrez les informations et les conseils étape par étape dont vous avez besoin pour rédiger, concevoir et coder des e-mails qui peuvent être appréciés par n'importe qui, quelles que soient ses capacités. OBTENEZ VOTRE GUIDE

Gras

Essayez de limiter le texte en gras à une poignée de mots que vous souhaitez mettre en évidence parmi le reste de la copie de votre e-mail. Cela garantira que vous n'avez pas plusieurs mots-clés qui se battent pour attirer l'attention.

Bien que le texte en gras puisse aider les abonnés voyants à identifier les informations clés, ce n'est que grâce au codage sémantique que les lecteurs d'écran saisiront la différence.

La balise gras <b> n'est pas sémantique et ne mettra pas en évidence le ou les mots que vous avez choisis pour l'utilisateur du lecteur d'écran. Donc, pour faire écho à l'expérience de vos utilisateurs voyants, utilisez toujours la balise <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

Italique

Semblable à la mise en gras, les mots en italique ajoutent de l'emphase, quoique dans une moindre mesure.

Comme pour les caractères gras, il existe plusieurs façons de coder du texte en italique. Cependant, c'est la balise <em> qui est conforme aux WCAG (pas la balise <i>) et peut donner aux lecteurs d'écran une indication sur la façon dont quelque chose doit être compris.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Barré

L'application de ce style peut attirer l'attention sur une réduction de prix ou une mise à jour des informations.

Cependant, il ne s'affiche pas de manière cohérente entre les clients de messagerie.

La balise HTML <strike> n'est pas prise en charge par Hey et n'est que partiellement prise en charge par les applications Gmail. Et s'attaquer à ce style avec CSS line-through a également une prise en charge limitée avec certains clients de messagerie rendant la ligne si fine qu'elle est assez difficile à voir.

Il convient également de noter qu'il existe un problème d'accessibilité avec ce style, car les lecteurs d'écran ne mettront pas l'accent sur un mot barré, ce qui pourrait avoir un impact négatif sur l'expérience de ceux qui dépendent de la technologie d'assistance. L'ajout de contexte avant chaque montant, tel que « était » et « maintenant », en fera une expérience précieuse pour tout le monde.

La meilleure façon de coder un barré est d'utiliser la balise HTML <strike>, comme ceci :

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Majuscule

L'utilisation de majuscules peut attirer l'attention sur les mots-clés et afficher la hiérarchie. Cependant, cela peut aussi être perçu comme un cri, il est donc préférable de l'utiliser avec parcimonie.

Une autre raison d'y aller doucement sur les majuscules est que cela a un impact sur la lisibilité. Nous sommes habitués à identifier les mots par leur forme. La forme rectangulaire uniforme du texte en majuscules nous ralentit et réduit la capacité de numérisation.

Je recommanderais également de styliser le texte en majuscules à l'aide du style CSS, car l'écriture en majuscules pourrait avoir un impact négatif sur les lecteurs d'écran. Dans certains cas, un lecteur d'écran peut augmenter le volume lorsqu'il rencontre des majuscules, ou il peut lire des mots lettre par lettre car il les identifie comme des acronymes.

Le style CSS n'est pas identifié par les lecteurs d'écran, il traitera donc le texte en majuscules stylisé à l'aide de CSS de la même manière qu'un texte normal.

<p>We need to shout about this <br /><span>big win</span></p>

L'espacement des lettres

L'ajout d'un espacement entre les lettres peut apporter un peu plus de caractère et d'identité à vos polices, et il peut également rendre certains styles de police plus lisibles.

Par exemple, si vous devez appliquer des majuscules à votre texte, l'ajout d'un petit espacement entre les lettres peut également améliorer la lisibilité. Cependant, c'est un bon équilibre, car trop d'espacement des lettres nuira à la lisibilité.

Pour plus d'informations sur les choses à faire et à ne pas faire en matière d'espacement des lettres, consultez cet article utile.

La prise en charge est bonne pour tous les clients de messagerie, Outlook n'offrant qu'une prise en charge partielle. Pour ajouter un espacement entre les lettres, vous souhaitez appliquer un style à l'aide de CSS :

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

Alignement du texte

Il y a quelques no-nos directs avec l'alignement du texte.

Tout d'abord, un style justifié : cela ancrera le texte à gauche et à droite de son conteneur. Pour y parvenir, il ajoute un espacement inégal entre les mots, ce qui a un impact considérable sur la lisibilité.

Le corps du texte aligné à droite ne doit être utilisé que pour les langues qui se lisent de droite à gauche. Il n'est pas naturel que les langues de gauche à droite soient lues lorsqu'elles sont alignées à droite et cela aura également un impact négatif sur la lisibilité.

Le texte centré doit être réservé aux titres ou aux paragraphes courts de 3 lignes maximum.

L'alignement optimal est aligné à gauche pour les langues de gauche à droite. Cela crée un point d'ancrage auquel revenir chaque fois qu'une ligne est lue, et est une considération clé pour des expériences de lecture accessibles.

Pour coder l'alignement du texte, vous pouvez utiliser l'attribut HTML align. Cependant, cela alignera également tous les autres éléments que vous avez dans la cellule. L'utilisation de CSS sur les balises sémantiques, telles que les en-têtes ou les paragraphes, est le moyen le plus efficace d'aligner votre copie :

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

Couleur

La chose à retenir avec la couleur est le contraste.

Lorsque vous sélectionnez des couleurs de texte, vous devez vous assurer qu'elles se démarqueront de vos couleurs d'arrière-plan ou de vos images d'arrière-plan. Cela aidera à rendre votre contenu lisible pour les abonnés présentant une gamme de déficiences visuelles. Le meilleur moyen de savoir si vous avez un bon rapport de contraste est de tester vos couleurs dans le vérificateur de contraste WebAim.

Pour une plongée plus approfondie dans la création, la conception et le codage de contenu accessible pour les e-mails, consultez les sessions Salesforce Trailhead que j'ai enregistrées avec Mark Robbins, ingénieur logiciel chez Salesforce.

Taille

Il n'y a pas vraiment de limite supérieure à la taille de votre texte. Cependant, vous voulez garder les mots sur une seule ligne pour qu'ils soient lisibles et ne cassent pas votre e-mail.

Il y a cependant une limite à la taille du texte. Tout ce qui est inférieur à 14 pixels devient difficile à lire pour de nombreuses personnes, et la fonction d'ajustement automatique du texte d'iOS Apple Mail s'activera et agrandira votre texte.

Chez Litmus, on s'éloigne rarement en dessous de 18px. Si nous le faisons, nous le limitons aux informations tertiaires telles que les mises en garde, les notes de bas de page et le contenu du pied de page. Cela permet au contenu principal de dominer.

Hauteur de la ligne

Une bonne lisibilité repose également sur un espace adéquat entre chaque ligne de texte. Trop peu, et il peut être difficile de suivre une seule ligne de texte sans que vos yeux s'égarent sur une autre ligne. Trop, et chaque ligne peut sembler indépendante de la suivante, ce qui rend la lecture et la numérisation un défi.

Pour ce faire, la hauteur des lignes doit être comprise entre 1,5 et 2 fois la taille du texte. Par exemple, une taille de police de 20px doit avoir une hauteur de ligne de 30-40px.

Conseils pour l'utilisation de la typographie dans la conception d'e-mails

Beaucoup peut être réalisé en stylisant le contenu écrit. Je vais vous expliquer quatre façons d'utiliser efficacement la typographie dans vos e-mails pour avoir un impact et guider les lecteurs.

Aidez les abonnés à identifier votre marque

Tout d'abord, vous pouvez appliquer des polices de marque pour aider les abonnés à identifier votre marque lorsqu'ils ouvrent votre e-mail. Certaines polices sont très distinctives, même hors contexte. Pensez à Walt Disney et Coca-Cola.

Différencier les types de communication

Vous pouvez styliser différents types de communication tels que les e-mails transactionnels et les newsletters en utilisant différents styles de police. Cela aide votre public à identifier rapidement le type de communication qu'il a reçu.

Élever la personnalité de la marque

La personnalité de la marque peut également être renforcée avec une typographie créative, telle que l'utilisation de polices d'affichage dans la zone des héros appelant les messages clés.

Votre message passe-t-il correctement ? Gardez les erreurs à distance et assurez-vous que vos e-mails ont un impact. Prévisualisez dans plus de 100 applications et appareils, validez les liens et les images, testez l'accessibilité, etc. Ne fais pas d'erreur

Créer une hiérarchie

L'une des choses les plus utiles que vous puissiez faire avec la typographie est de créer une hiérarchie, ce qui aide à guider le lecteur dans votre courrier électronique. Je vais donc passer un peu plus de temps ici.

Aujourd'hui, le volume d'e-mails reçus par la plupart des abonnés est important. Faire passer et digérer tous les messages reçus n'est tout simplement pas possible. Par conséquent, les e-mails ouverts sont souvent analysés lorsque le lecteur recherche des points d'ancrage dans votre e-mail pour en comprendre la valeur.

En vous appuyant sur les styles de police, les tailles, les poids et les couleurs, vous pouvez montrer quelles parties de votre e-mail sont les plus importantes. Bien que je ne croie pas au « pli », je pense qu'il est important de donner aux abonnés la possibilité de comprendre le but de l'e-mail et d'agir sans avoir à s'engager à lire beaucoup de textes.

Permettez-moi de le décomposer pour vous avec cet exemple :

Il utilise une typographie large et audacieuse dans la zone des héros pour attirer l'attention sur un titre qui résume la valeur ou l'objectif de l'e-mail.

Si les clics et les conversions sont l'objectif de votre campagne, le suivi d'un appel à l'action peut aider le lecteur à passer à l'action sans avoir à consommer l'intégralité de l'e-mail.

Ensuite, ajoutez des titres moins dominants qui séparent le corps du texte afin que ce contenu puisse être facilement numérisé si le lecteur ne peut pas s'engager à lire chaque mot.

Les marques deviennent créatives avec la typographie des e-mails

Maintenant, pour quelques exemples de marques qui utilisent beaucoup la typographie dans leurs conceptions d'e-mails. Qu'est-ce qui les distingue et attire les lecteurs ?

HUMIDE

DAMP, une newsletter mettant en avant les viticulteurs et les détaillants qui se concentrent sur la fabrication et la vente de vins naturels, s'appuie fortement sur la typographie, en travaillant avec des polices serif et sans-serif pour établir la hiérarchie du contenu.

Polices utilisées: Helvetica neue avec fallback Arial et police système serif Times New Roman.

La zone des héros affiche la seule image de ce bulletin d'information long, avec une typographie audacieuse donnant le ton à l'e-mail ouvert. Cette tendance de conception d'e-mails de typographie audacieuse fait une déclaration. Pas étonnant que tant de marques aient adopté ce style.

Ce qui est vraiment intéressant à propos de cet e-mail, c'est qu'il obtient ce style moderne et épuré en utilisant des polices système plutôt que des polices Web, ce qui signifie que les polices seront rendues de la même manière sur tous les clients de messagerie.

Prêt Mag

Ready Mag, un éditeur graphique intégré au navigateur, se penche également sur les polices système, en tête des polices système Mac, suivies d'un éventail de Helveticas. C'est probablement au-delà de ce qui est requis d'une pile de polices dans un courrier électronique.

Polices utilisées : Polices système Apple, retombant sur Helvetica et Arial.

Ce que j'aime dans cet e-mail, c'est la façon dont la typographie audacieuse sépare le contenu. Cela rend l'e-mail facile à analyser. Et avec un corps de texte minimal, les lecteurs pressés peuvent obtenir la valeur de chaque section et agir rapidement.

Présentation

La plate-forme d'auto-édition Blurb utilise des polices Web pour apporter leur identité de marque aux e-mails, en utilisant des poids légers et gras ainsi que des lettres majuscules pour décrire la hiérarchie et les domaines d'action.

Polices utilisées : Futura et Proxima Nova (polices web), retombant sur Helvetica et Arial.

C'est formidable de voir les chiffres, ceux qui composent les étapes, stylisés à l'aide de texte en direct plutôt que d'images. Cela crée une expérience beaucoup plus fluide pour les abonnés dépendants des lecteurs d'écran, et signifie également que ceux-ci seront rendus lorsque les images ne seront pas chargées.

Tripadvisor

Comme de nombreuses marques, la plateforme de voyage Tripadvisor a envoyé ses messages COVID-19 à l'aide d'un modèle de style lettre. Il s'agit d'un moyen plus personnel et direct de communiquer avec les clients, en offrant des informations importantes sans être distrait par des images ou sans risque d'être confondu avec un e-mail marketing.

Polices utilisées : Arial.

Une typographie large et audacieuse met en évidence le message global de l'e-mail, tandis que les titres sont conçus pour se démarquer des blocs de corps de texte qui décomposent le contenu, fournissant des points d'ancrage permettant au lecteur de comprendre la valeur d'une section.

Cet e-mail hautement numérisable dispose également d'un large rembourrage à gauche et à droite du conteneur principal, ce qui est une excellente technique pour éviter que de gros blocs de copie ne submergent le lecteur.

délabré

Le détaillant de tatouages ​​temporaires Tattly a une approche très créative de la conception d'e-mails, les e-mails promotionnels exploitant souvent des techniques et des tendances de conception passionnantes. Ils utilisent une typographie audacieuse dans le héros de cet e-mail pour attirer l'attention sur les nouveaux produits présentés dans l'e-mail.

Polices utilisées : Open Sans (police web), retombant sur Helvetica et Arial.

Il est courant avec les e-mails hautement conçus, comme celui-ci, que la typographie soit basée sur des images plutôt que sur du texte en direct.

Un certain nombre de considérations d'accessibilité doivent être prises en compte lors de l'utilisation d'images pour le texte, telles que l'application d'un texte ALT qui fait écho à la copie et la prise en compte de l'apparence du texte pour les personnes qui doivent agrandir l'e-mail en raison d'un visuel. dépréciation. Le texte va-t-il pixeliser et devenir illisible ? De plus, dans quelle mesure le texte basé sur des images est-il lisible lorsque l'e-mail est réduit sur les appareils mobiles ?

Bien que le texte en direct soit le meilleur moyen de garder vos e-mails accessibles et lisibles, il existe un moyen de rendre les zones de héros basées sur des images utiles à un public plus large, en enveloppant votre image de héros dans une balise H1 et en ajoutant le texte de l'image à votre balise ALT, comme ça:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

Cette approche rend l'e-mail numérisable pour les abonnés dépendants des lecteurs d'écran, car ils peuvent utiliser la fonctionnalité de raccourci pour naviguer dans les titres.

« Emballer une image dans une balise H1 est un code sémantique valide et sera inclus dans les menus contextuels des en-têtes des lecteurs d'écran. Cependant, il est important de noter que le texte ALT peut ne pas être lu par tous les outils de lecture de texte. – Mark Robbins, ingénieur logiciel, Salesforce

La typographie des e-mails a du punch

Avec le nombre croissant de messages en compétition pour attirer l'attention de vos abonnés, le fardeau de se démarquer tout en offrant une expérience fiable (rapide) ne cesse de s'alourdir. La typographie est un excellent moyen de rendre vos e-mails beaux, efficaces et accessibles sans vous ralentir.

Gardez ce guide à l'esprit et partagez la façon dont vous utilisez la typographie dans vos e-mails. J'adorerais les voir !

Créez des e-mails conformes à la marque et sans erreur, avec Litmus Plus d'e-mails cassés. Créez et testez vos e-mails avec Litmus pour garantir une excellente expérience d'abonné dans chaque boîte de réception. Commencer votre essai gratuit