La typographie dans les infolettres
Un réel défi pour les plus aguerris!
LES POLICES DE CARACTÈRES SONT PLUS COMPLEXES À MAÎTRISER DANS LES INFOLETTRES!
Votre marque détient sa propre identité visuelle. Un guide de normes graphiques muni de consignes sur les polices de caractères à utiliser y est rattaché. S’il est bien conçu, votre firme graphique aura songé à des polices de remplacements et elles risquent bien de vous être utiles!
Si votre typographie n’a pas été un défi très stimulant jusqu’à maintenant, le monde des infolettres s’apprête à lever cette barre!
La typographie dans les infolettres, pourquoi est-elle différente?
Les polices de caractères hors de portée
Plusieurs techniques sont utilisées afin d’afficher une typographie spécifique dans une infolettre. Même en y parvenant, vous devez savoir que ce n’est pas tous vos destinataires qui vont voir la police de caractères souhaitée. D’emblée, vous n’allez pas remarquer la différence si vous avez la police physiquement sur votre poste de travail, mais ce n’est pas forcément le cas de vos destinataires, et ce, spécialement si vous employez une typographie originale.
En réalité, il existe une grande différence entre :
- Les polices de caractères que vous avez physiquement sur votre poste de travail.
- La typographie déployée dans une page web qui puise ses polices sur Internet.
- Les polices de caractères bloquées par les applications des boîtes de réception.
La triste vérité est que l’importation de typographies originales dans vos infolettres est ardue et que malgré vos efforts, elles seront remplacées par des polices standards dans bien des cas.
Pourquoi les polices de caractères ne s'affichent pas?
Allez-hop, on bloque!
À première vue, cela s’avère surprenant qu’on n’arrive toujours pas à utiliser efficacement la typographie souhaitée dans les infolettres, mais quand on comprend, ça s’explique!
Dans les faits, afficher une police de caractères web dans les infolettres est possible… enfin techniquement! Alors, pourquoi ne s’affichent-elles pas? C’est simplement que certaines, pour ne pas dire la plupart des boîtes de réception bloquent l’affichage des polices de caractères personnalisées.
| Typographie PRISE EN CHARGE |
| Apple Mail |
| Outlook 2011 pour Mac |
| iOS Mail |
| Android Mail |
| Typographie NON SUPPORTÉE |
| Outlook 2013-2021 |
| Outlook Office 365 |
| Outlook APP |
| Gmail |
| Gmail APP |
| Yahoo! Mail |
| Yahoo! APP |
| AOL Mail |
| Samsung Mail |
Pourquoi sont-elles bloquées?
Généralement, les boîtes de réception ont leurs propres contraintes de conception afin d’éviter toute forme d’interférence avec l’interface d’utilisation. Sans ces contraintes, l’implantation de votre police de caractères pourrait modifier la typographie de l’ensemble de l’interface et non seulement l’infolettre. Au même titre que les formulaires HTML ou les fonctions JavaScript, les boîtes bloquent!
Contrairement à un site Internet ou une application sur votre poste de travail (Word), les boîtes de réception sont des applications web qui font face à des enjeux de sécurité et préfèrent bloquer l’importation de typographies.
C’est pourquoi Gmail bloquera même les Google Fonts dans son propre environnement!
Quelles sont les polices de caractères sécuritaires?
Un choix difficile à faire!
Considérant que la grande majorité des boîtes de réception bloquent les typographies originales, vous serez rapidement confrontés au dilemme entre le respect de vos normes graphiques et l’accessibilité de vos infolettres.
En marketing par courriel, nous pouvons séparer les typographies en trois (3) catégories distinctes :
La typographie
« web »
Il s’agit du type le plus global.
Il regroupe toutes les polices de caractères conçues pour être lisibles sur les écrans.
- Variété de polices maximale.
- Support minimal des boîtes.
La typographie
« web safe »
Il s’agit des polices de caractères dites « universelles » qui sont compatibles avec les navigateurs et applications web.
- Variété de polices modérée.
- Support limité des boîtes.
La typographie
« email safe »
Il s’agit du groupe de polices limité nommé « bullet proof email fonts » optimisé pour le monde des infolettres.
- Variété de polices minimale.
- Support maximal des boîtes.
Il est crucial de choisir le bon type de typographie en toute connaissance de cause. Vous pourrez ainsi mieux contrôler le résultat de l’affichage de vos textes dans l’ensemble des environnements.
Si vous optez pour l’accessibilité des typographies « email safe », vous serez limité dans la variété!
Vous ne rêvez pas… il y en a que 9 :
- Arial
- Calibri
- Verdana
- Futura
- Helvetica
- New Courier
- Goegia
- Tahoma
- Times New Roman
Dans le cadre de vos infolettres, utiliserez-vous la pilule rouge « web » ou la pilule bleue « email » ?
Avec la rouge et ses typographies « web », vous obtiendrez une grande liberté typographique sachant que malgré vos efforts, seulement certaines boîtes de réception afficheront les polices de caractères souhaitées.
Avec la bleue et ses typographies « email », vos textes seront homogènes dans tous les environnements, accessibles et affichés sans défis techniques, mais demeureront traditionnels.
ET POURQUOI PAS AVEC LA VERTE en utilisant des typographies « web », mais en définissant des polices de caractères « email » de remplacement!
La bonne utilisation des polices « web » et « email »
La combinaison des techniques
En ce qui concerne la typographie de vos textes dans vos infolettres, nous vous recommandons d’utiliser la pilule verte (voir plus haut) en combinant des polices « web » à des polices « email » de remplacement.
Cette technique servira à déployer efficacement une typographie originale, en contrôlant les polices de caractères de remplacement à utiliser dans le cas de blocage par les boîtes de réception.
Pour ce faire, vous aurez besoin des ingrédients suivants :
1. Compétences avancées en HTML et CSS
- Vous devrez maîtriser les langages de mise en page HTML et CSS pour intégrer efficacement vos typographies originales dans vos infolettres.
- Pas le temps pour ça? Dans ce cas, il faut utiliser les services offerts par des pros!
2. Disposer des typographies en différents formats
- Vous devez récupérer vos polices de caractères dans les formats suivants : WOFF, WOFF2, TTF, EOT et SVG.
- Téléchargez l'ensemble des polices sur le serveur de votre service de création d'infolettres.
3. Créer un fichier CSS lié au gabarit de vos infolettres
- Intégrez les caractéristiques des polices originales directement dans la balise « head » de votre infolettre.
- Définissez les paramètres de vos typographies à l’aide du tag « @font-face » pour chaque style de police.
4. Adapter le HTML en conséquence
- Chaque paragraphe textuel de vos infolettres devra être défini avec la police de caractères personnalisée.
- Votre paramètre de style devra être défini de la sorte : « font-family: Police personnalisée, Police de remplacement, Serif ou Sans-serif; »
5. Tester dans différents environnements
- Les tests multiplateformes du rendu final de vos infolettres devront être effectués sur un poste de travail qui n'utilise pas la typographie personnalisée, sans quoi elle sera affichée sans problème, sans que ce soit nécessairement le cas chez les destinataires.
Existe-t-il de « meilleures » typographies?
Les principes fondamentaux
Et oui, le gazon est toujours plus vert chez le voisin! Vous avez passé un certain temps à sélectionner la police de caractères parfaite pour vos infolettres et vous apprenez qu’elle ne sera pas affichée dans la majeure partie des boîtes de réception.
En réalité, la priorité numéro 1 en termes de typographies pour vos infolettres devrait être l’accessibilité. Nous vous encourageons bien évidement à utiliser des polices de caractères dans vos bannières, vos illustrations ainsi que vos textes, mais en contrôlant les polices de caractères de remplacement.
Ensuite vous devrez peser le pour et le contre des différents types de typographies et déterminer comment ils s’intègrent à votre stratégie en place, puis utiliser les compétences d’experts pour supplémenter et peaufiner vos créations.
Voici d’ailleurs quelques-unes de nos recommandations :
5/5
L’accessibilité
Gardez en tête que l’emploi d’une typographie qui n’est pas « bullet-proof email font » est risqué :
- Certains caractères pourraient ne pas bien s’afficher, spécialement pour les caractères spéciaux français.
- La grosseur des polices de caractères et les marges à l’extérieur du texte sont propres à chaque typographie.
- La police de remplacement pourrait déformer l’infolettre si elle est plus petite que la police personnalisée.
- Ne convertissez pas vos textes en image, car les filtres anti-spam vous trouveront suspect.
5/5
Les standards à respecter
Maximisez le support et la satisfaction de vos destinataires en respectant certains standards :
- Taille minimum de la typographie : 14px pour les ordinateurs, 16px pour le mobile
- Épaisseur standard du texte : 400
- Espacement des lignes standard : 1.5
- Contraste de couleur optimal : 7:1
5/5
Les tests à réaliser
Il est essentiel de tester le rendu de votre typographie sur le plus d’appareils possibles :
- Appareils (desktop, mobile, tablette)
- Systèmes d’exploitation (Windows, iOS, Android)
- Clients de messagerie (Gmail, Hotmail, Apple Mail)
- Interfaces (application, navigateur)
5/5
Les experts à consulter
L’importation de typographies « web » dans les infolettres doit être effectuée en toute sécurité :
- Mise en place de code HTML et CSS avancé.
- Paramètres de police de remplacement en cas de non-support dans un environnement.
- Contrôle avancé des caractéristiques de la typographie choisie telles que les marges dans les paragraphes.
En somme, nous vous invitons à vous référer à des experts en infolettres avant d’importer des typographies originales dans vos infolettres. Et oui… c’est une spécialisation additionnelle qui mérite qu’une attention particulière soit portée à ses nombreux détails techniques pour un rendu final intéressant!
Jérémy Bergeron
Coordonnateur et développeur
Vous souhaitez obtenir des conseils?
Jeune et dynamique, Jérémy connaît les nouveaux médias et le potentiel d’une campagne de marketing par courriel réussie.
Obtenez plus de détails sur la typographie dans les infolettres en communiquant avec lui dès maintenant! Il sera en mesure de vous proposer des solutions novatrices et créatives pour vos campagnes de marketing par courriel.
C : jbergeron@adnetis.com
T : 1-877-638-6584