badsender logo

Texte en gras et email.

27/04/2015

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. 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.

La question est la suivante :

Parmi les multiples balises pour changer la graisse d’un texte, lesquelles sont supportées par la plupart des webmails ?

La balise <b> pour afficher un texte en gras.

La balise <b> permet bien, et ce sur l’ensemble des webmails, 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 ont été déprécié avec 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… Faut-il pour autant d’arrêter là ?

La balise <strong> pour afficher un texte en gras.

La balise <strong> permet elle-aussi d’afficher en gras des textes. Pourtant, ce n’est pas son utilisation primaire ! 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.

Et finalement, pourquoi pas un <span> ?

Eh bien oui ! 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é. Vous pouvez donc encadrer votre morceau de texte par une balise <span> et y ajouter la propriété CSS font-weight:bold;. Ainsi 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 font-weight, différents 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 ?

En conclusion, quelle(s) méthode(s) utiliser pour modifier la graisse d’un texte dans un email ?

La mise en gras de textes HTML bruts au sein d’un e-mailing est possible au travers des balises <b>, <strong> et de la propriété CSS font-weight: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).

Article mis à jour le 19/05/2021.

Profitez de notre expertise en intégration HTML d’email !

Besoin d’un design system email ? Ou d’un design email tout court ? Ou d’une intégration HTML pour email ? Ou d’un email builder ? On peut aussi vous proposer :

Badsender anime aussi une formation sur le sujet du développement HTML d’un email !

Envie de recevoir la newsletter, les invitations aux lives et autres actus de Badsender par email ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.