Le soulignement dans tous ses états

L’écolier a pour seuls outils un stylo-plume et une feuille de papier. De mon temps, on utilisait également un buvard et plus tard un effaceur. Pour mettre en valeur un texte, l’étudiant n’a pas trente-six solutions. Il peut jouer sur l’alignement, les capitales et le soulignement. Impossible d’écrire en italique, en gras, en petites capitales, en changeant de typographie, etc. Son système d’écriture le contraint, tout comme son professeur corrigera sa copie en soulignant les éventuelles fautes en rouge. De même la machine à écrire ne permet pas ces enrichissements de forme. Pour mettre une portion de texte en exergue, on utilise le soulignement (et plus rarement le rouge).

Cette manie du soulignement, on la retrouve au quotidien. Dans un document imprimé, on souligne volontiers un titre principal, un sous-titre, des extraits de texte, etc. Pourtant, fort est de constater que les professionnels de l’édition ont depuis longtemps renoncés à l’utiliser. Même chose sur le web, où le soulignement est devenu l’apanage de l’hypertexte.

Le soulignement est réservé aux liens

Sur le web, le soulignement est à proscrire pour des raisons ergonomiques: il est synonyme de lien hypertexte pour la plupart des utilisateurs. Par défaut, les logiciels d’édition web soulignent les liens. À chacun de personnaliser le rendu pour l’adapter à la charte graphique du site. Les feuilles de style viennent à point nommé pour ce genre d’exercice, n’en déplaise au conservateur M. Nielsen braqué sur des vieilles croyances.

Il y a une règle importante: on ne souligne pas un texte sans lien. Dans l’exemple ci-dessous, tiré d’un site contemporain mais dont la conception date des années 90, l’auteur utilise aléatoirement la mise en exergue du texte. Aucune accroche visuelle ne contient de lien.

Capture Patrice Romain
Capture du site de Patrice Romain

Massacre typographique

Outre cette convention sur le web, le soulignement appauvrit la lisibilité du texte, surtout sur de longues portions. Il alourdit inutilement les lignes et freine la lecture. De plus, cet assaisonnement typographique est grossier. La barre horizontale traverse le bas du mot et scalpe le jambage des lettres. Aucun respect pour la lettre, aucun respect pour le travail du typographe. L’effet s’accentue avec le gras puisque l’épaisseur du trait est variable selon la police [¹]. Les résultats affichés varient en fonction du navigateur.

Ci-dessous, le texte en Georgia est affiché dans Firefox (illustration du haut) avec la balise de soulignement. Le même texte est affiché dans Photoshop (illustration du bas) avec l’outil ad hoc. On remarque aisément un positionnement différent de la barre horizontale. Dans les deux cas, le soulignement dévalorise la lettre et par la même occasion nuit à la lisibilité.

Soulignement dans Firefox et Photoshop

Un logiciel d’édition de texte professionnel – comme Indesign – permet une meilleure maîtrise du soulignement: épaisseur, couleur, positionnement. À ma connaissance, il n’est pas possible d’éviter cet effet sur les lettres descendantes. À quand une fonction intelligente (illustration du milieu) ?

Le soulignement dans le code HTML

La balise <u> (underline) est toute désignée pour souligner du texte. Elle est pratiquement abandonnée pour les raisons évoquées ci-dessus. Cependant, je pense que le soulignement a encore sa place notamment dans le domaine pédagogique. Dans ce cas, il est préférable d’utiliser un style: text-decoration: underline.

[¹] cf. test de soulignement

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s