Le gras dans tous ses états

Dans un éditeur texte, on utilise souvent le mot gras. On met du texte en gras comme on le met en italique. En typographie, on parle plutôt de graisse. Dans la plupart des polices, il existe un jeu de caractères en romain, en italique et en gras. Pour l’instant, le web n’utilise que ce triple formatage. En pré-presse, il est possible de nuancer les fontes et l’épaisseur du trait. On trouve alors des déclinaisons: thin, light, book, medium bold et extra-bold. Chaque jeu de caractères est dessiné par le typographe.

Capture Helvetica Bold, Roman, Black

Implémenté dans tous les éditeurs de texte, le gras s’utilise au quotidien pour mettre en valeur un mot ou un groupe de mots. Il sert à attirer l’attention du lecteur. Contrairement à l’italique, il n’est soumis à aucune règle typographique. Chacun l’utilise selon son bon vouloir. La presse papier réserve cet attribut aux titres, intertitres, chapeaux, citations ainsi que d’autres éléments de composition.

Capture de la Nouvelle Gazette
Extrait de la Nouvelle Gazette (11/06/07) – Texte principal sans mise en exergue

La presse en ligne respecte également cette habitude. Un certain nombres d’éléments en HTML sont automatiquement restitués en gras. Par exemple, c’est le cas de tous les titres (h1, h2, th). Par contre, la mise en exergue d’un ou plusieurs mots est plus présente sur les blogs. Une façon de mettre en évidence des points importants pour faciliter la lecture non linéaire. Dans certains cas, le dosage est excessif et perd de son efficacité. La raison s’explique en partie pour une question de référencement.

À noter que le gras n’est pas la seule solution pour mettre en valeur un contenu. On peut très simplement faire appel à la puissance des feuilles de style et utiliser un fond de texte coloré. Tout comme les étudiants personnalisent leurs cours à l’aide de feutres fluorescents, la presse utilise parfois ce formatage. Dans l’exemple ci-dessous, des phrases (ou des parties de phrases) sont mises en gras et surlignées avec une couleur de fond. Une façon astucieuse pour les lecteurs pressés de garder leur attention uniquement sur les passages importants.

Capture d'un article dans Le Soir papier
Extrait du Soir (11/09/10) – Mise en couleur de certains passages

Le gras dans le code HTML

Tout comme l’italique, le code HTML varie en fonction de la finalité. Pour mettre un mot en légère emphase, on emploie em. Pour accentuer cette emphase, la balise strong est toute désignée. Ces deux balises apportent du sens aux mots sans se préoccuper du rendu sur la page. C’est un peu comme si j’insistais vocalement sur des éléments importants lors de la lecture d’un texte. D’ailleurs, un lecteur vocal adapte le timbre de sa voix en fonction de ces éléments. De la même manière, un moteur de recherche donne plus de poids aux mots encapsulés dans la balise strong.

Le navigateur se charge de la présentation pour ces deux balises. Dans le premier cas (em), le mot est mis en italique. Dans le second cas (strong), il se trouve en gras. Ce rendu n’est pas une convention. À l’avenir, il se pourrait qu’un navigateur change le formatage.

{code type=html}

Il ne faut pas confondre paranoïa et…

{/code}

Il est possible d’influencer le rendu visuel des mots sans influencer leur importance. On utilise la balise b pour grossir les traits de caractères. Par exemple, je décide d’attirer l’œil du lecteur sur les premiers mots de chaque paragraphe, de valoriser des questions dans une interview, etc. Cette balise est fortement critiquée. Dès lors qu’il s’agit d’apparence, il est préférable d’utiliser les feuilles de style. Il existe d’ailleurs une classe à cet effet: font-weight. C’est plus encombrant au niveau du code mais au moins on maîtrise le rendu.

Nuances dans le trait
Grâce aux styles, il est possible de nuancer l’épaisseur du trait. On pourra faire appel aux valeurs absolues (100, 200, 300, 400 [normal], 500, 600, 700 [bold], 800 et 900) ou relatives (normal, bold, bolder et lighter). En pratique, ces différences ne sont pratiquement pas perceptibles dans la plupart des navigateurs. Raison pour laquelle ces valeurs sont peu utilisées.

À lire également: « L’italique dans tous ses états »

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