Au sein de votre email, il est bon de privilégier au maximum l’utilisation de textes « bruts » (en HTML) et de diminuer ainsi l’usage d’images. C’est précisement ce que nous nous efforcons de faire lorsqu’on nous demande de transformer un email en HTML. Cela permet de garantir un affichage immédiat en cas d’images bloquées ou non téléchargées par vos destinataires, et d’optimiser l’accessibilité du contenu de votre campagne email. Ainsi, les lecteurs d’écran pourront lire le contenu plus facilement.
Mais la mise en forme graphique des textes directement inclus dans votre code HTML passe, bien souvent, par des jeux de taille, de couleurs, de styles, ou de graisse de texte ! C’est précisément ce dernier point que nous ciblons dans cet article.
Comment écrire un texte en gras dans un email ?
Pour mettre un texte en gras dans un email, il vous suffit d’entourer le morceau de texte concerné par les balises <b> ou <strong>. Par exemple :
<p>
This is <strong>a paragraph</strong>
This is <b>a paragraph</b>
</p>Dans votre éditeur de code, vous pouvez utiliser le rarrourci clavier Ctrl + b après avoir sélectionné votre texte : cela aura pour vocation à entourer automatiquement le morceau de texte concerné par une balise <strong>.
Vous pouvez aussi entourer votre texte d’un span avec la propriété CSS font-weight ayant pour valeur bold. Comme ceci :
<p>
This is <span style="font-weight:bold">a paragraph</span>
</p>Quelle est la différence entre la balise <b> et la balise <strong> ?
La balise <b>
La balise <b> permet bien, et ce sur l’ensemble des environnements d’ouverture, d’afficher en gras les textes souhaités. Cependant, le site developer.mozilla.org nous indique que l’élément <b> ne porte aucune information sémantique particulière. De plus, historiquement, cette balise a été pensée pour rendre du texte avec une police grasse (parfait donc !). Mais les éléments à seul but stylistique sont dépréciés depuis HTML 4. Le sens de l’élément <b> a donc évolué. Si vous souhaitez donc passer un texte en gras, sans pour autant mettre une importance sémantique sur le texte en question, alors la balise <b> pourra faire l’affaire.
La balise <strong>
La balise <strong> permet elle-aussi d’afficher en gras des textes. Pourtant, ce n’est pas sa vocation ! Comme le spécifie encore une fois le site developer.mozilla.org, cet élément indique un contenu de haute importance, qui se traduit généralement par l’affichage du texte en gras. Mais il ne doit pas être utilisé à des fins stylistiques ! Car sachez que si le contenu de la balise <strong> est, par défaut, affiché en gras aujourd’hui puisque les navigateurs et clients mails semblent s’accorder sur le rendu graphique de cette balise pour le moment, il pourrait tout aussi bien, demain, être affiché autrement.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Quelle balise choisir pour mettre en gras un texte ?
La balise <span>
C’est finalement peut-être la meilleure solution, surtout si il n’y a pas vraiment de valeur sémantique à mettre sur le texte souhaité. Le texte apparaît bien en gras, sans pour autant avoir une importance sémantique particulière.
En revanche, ce que vous pouvez constater, c’est que les « jeux » de graisse (plus ou moins forts) ne sont pas pris en compte ! Ou plutôt, pas dans leur intégralité. Car seules deux solutions sont possibles : caractère maigre, ou caractère gras. Oubliez donc les bolder, lighter, font-weight:200, etc… Les valeurs de font-weight différentes de bold ne sont pas supportées du tout d’ailleurs sur Lotus Notes 6.5, Lotus Notes 7.
Seuls AOL Chrome (win), AOL IE9 (win), AOL IE10 (win), AOL IE11 (win), BlackBerry 9930, BOL Chrome (win), Comcast Chrome (win), EarthLink Chrome (win), Freenet.de Chrome (win), GMX Chrome (win), Gmail Chrome (win), Libero Chrome (win), Mail.ru Chrome (win), Office 365 Chrome (win), Office 365 IE9 (win), Office 365 IE10 (win), Office 365 IE11 (win), Orange Chrome (win), Outlook.com Chrome (win), Outlook.com IE9 (win), Outlook.com IE10 (win), Outlook.com IE11 (win), SFR.fr Chrome (win), T-Online.de Chrome (win), Terra Chrome (win), Web.de Chrome (win), Yahoo! Chrome (win), Yahoo ! IE10 (win), Yahoo ! IE11 (win), semblent supporter ces différences de font-weight (mais seulement pour les valeurs 800 et 900).
Faut-il en conclure que seuls Chrome et IE, sous Windows, supportent le font-weight:800 et font-weight:900 ?
La mise en gras de textes HTML bruts au sein d’un e-mailing est donc possible au travers des balises <b>, <strong> et de la propriété CSS <font-weight> avec la valeur bold. Privilégiez cependant la balise <b> ou l’attribut style, et gardez à l’esprit que la balise <strong> peut, à tout moment, changer de mise en forme !
Remarque : Android 2.3 et Android 4.0.3 ne passent les textes de font-weight:[valeur] en gras qu’à partir de la valeur 700 (alors que les autres webmails l’autorisent dès la valeur 600).
