Les styles et attributs de caractère

L'écriture italique a été inventée en 1501 par l'artiste Francesco Raibolini, dit Griffo, en réponse à la demande d'Aldo Manuce, imprimeur vénitien qui voulait reproduire l'écriture manuscrite cursive. Ces caractères penchés furent appelés à l’origine « lettres vénitiennes », et nommés ensuite « italiques », parce qu’ils vinrent d’Italie. (Source: Wikipédia)

Aujourd'hui, l'italique est utilisé très partiellement et sert de complément au romain.

Véritable et faux talique

L'informatique a facilité bien des choses mais parfois au détriment de la lettre. C'est le cas des anamorphoses provoquées par des logiciels pour simuler un effet italique sur les polices qui n'en possèdent pas. Les caractères sont déformés selon un angle fixé par le logiciel. Il va sans dire que le résultat n'est pas très heureux et ne tient pas compte des spécificités de chaque lettre. Comment se comporte un navigateur web à ce propos ?

Pour afficher du texte en italique, le navigateur utilise la fonte adaptée. Heureusement, la plupart des polices pour le web disposent d'un jeu de caractères en italique. À défaut, il incline volontairement les lettres pour simuler cet aspect. Pour l'exercice, j'ai fait l'expérience dans Photoshop avec une dizaine de polices. La première ligne est écrite en romain, la deuxième en romain penché (faux italique comme le nomme Photoshop) et la troisième en italique.

Commençons par le Times New Roman. La première chose qui tape à l'œil ce sont les lettres a, e et f. Les rondeurs sont plus marquées notamment sur les empattements des i, k, u et sur les pleins et déliés des k, m, du magnifique r ou encore du u pratiquement redessiné.

Pour ce qui est du Georgia, les signes a, e, f et g sont forts différents. Il y a plus de rondeurs dans les caractères et notamment les obliques. Regardez les v, w, x et y. Les empattements sont étonnants: aucun, triangulaires, droits et en goutte comme dans le k, v, w et x.

Au travers de ces deux exemples, vous remarquez bien que l'italique ce n'est pas simplement une distorsion des lettres mais le résultat d'un travail laborieux du typographe pour harmoniser les lettres et donner un rythme aux caractères. Le rendu est encore plus explicite avec une typo plus traditionnelle comme le Garamond.

Utilisation de l'italique

La première utilisation de l'italique sert à attirer l'attention du lecteur sur un mot, une phrase ou un passage dans le texte comme on le ferait pour du gras mais de manière moins insistante. De cette manière, l'auteur décide arbitrairement de mettre en valeur une partie du texte. L'autre emploi est le respect des règles du code typographique:

Ceux qui veulent approfondir le sujet, je leur conseille la lecture du Ramat de la typographie (Ramat Aurel). L'auteur y consacre un chapitre entier.

L'italique dans le code (X)HTML

La balise HTML <em> est parfaitement indiquée pour mettre en évidence des mots par rapport à leur contexte. Elle a d'ailleurs un rôle sémantique qui lui donne de l'importance aux yeux des moteurs de recherche. Reste à savoir comment vont se comporter les navigateurs? Dans le rendu officiel des balises, em est affiché en italique au même titre que i, cite, var, et address. C'est important d'en prendre connaissance pour éviter le double jeu des guillemets et de l'italique pour les courtes citations.

La balise HTML <i> à un poids sémantique moins important. Elle reste valide pour la version du XHTML strict. On l'utilise pour respecter les conventions typographiques. Dans le cas des mots étrangers, il peut être utile de spécifier la signification en français (title) et l'origine du mot (lang) de manière à aider le lecteur d'écran dans la prononciation.

Le texte balisé par de l'italic donne une apparence particulière au texte sans pour autant leur donner de l'importance. Dès lors qu'il s'agit d'apparence, il est plus sage d'ajouter un style CSS {font-style: italic;} au risque d'alourdir le code source. Cette précaution à l'avantage d'avoir une parfaite maîtrise sur la forme et de faciliter les modifications postérieures.

Le rendu sur le web

Bien qu'il soit très élégant dans une composition papier, l'italique devient disgracieux et illisible sur le web dès lors qu'on utilise une petite taille de caractère. Ceci est dû à la faible résolution des ordinateurs qui sont —pour le moment— incapables d'apporter toutes les finesses du caractère incliné.

Oblique

Il existe un autre style {font-style: oblique;}. À vrai dire, je n'ai pas trouvé de différences visuelles entre l'italique et l'oblique sur les tests que j'ai effectués. Dans le Mémento CSS, Raphaël précise que l'oblique penche le texte à gauche (?!) si la police est prévue pour admettre cette valeur. J'ai du mal à m'y retrouver.

Graisse

La graisse fait partie des attributs de texte élémentaires. Implémentés dans tous les éditeurs de texte les plus basiques, on l'utilise au quotidien selon son appréciation. Il n'existe pas de guide d'utilisation puisqu'au final tout le monde sait que les mots mis en gras sont les mots mis en valeur par l'auteur pour attirer l'attention.

Je ne suis pas adepte du gras dans un texte courant. Je préfère l'utiliser que très rarement à l'image des quotidiens. Vous seriez peut-être surpris, mais les journaux réservent le gras pour les titres, intertitres, accroches, éventuellement des citations, les questions dans une interview... Un article étalé sur toute une page et pas une seule trace du gras dans le corps du texte ! Certains pourraient en prendre de la graine.

Pourquoi et quand utiliser le gras

Sur le web, les concepteurs ont la touche bien plus légère. Le gras peut avoir deux significations. La première sert à mettre en relief quelques mots pour attirer l'œil d'un point de vue structurel. C'est comparable à la démarche des journaux cités ci-dessus. La seconde sert à souligner l'importance des mots dans un contexte précis. C'est un peu comme si j'insistais vocalement sur des éléments importants lors d'une lecture orale d'un texte.

A priori, les deux utilisations sont légitimes. Dosés avec parcimonie, les mots mis en gras ne devraient être que très exceptionnels. À trop vouloir mettre en valeur, on finit par diluer l'effet souhaité. Le résultat est doublement moins efficace: d'une part il n'attire plus le lecteur, d'autre part le texte perd de sa lisibilité et la lecture est ralentie.

Ce comportement peut être en partie expliqué. Dans l'exemple ci-dessous, l'auteur a cru bien faire et valorise des passages comme on le ferait avec un marqueur fluorescent. Il aurait été plus judicieux alors de trouver une couleur d'arrière plan.

Dans d'autres cas, la véritable raison est moins évidente et vise directement à nourrir les moteurs de recherche friands de la balise <strong>. À la différence de la propriété style font-weight, cette balise a une forte valeur pour le référencement. Les auteurs ont tendance alors à mettre en valeur chaque mot clé.

Le gras dans le code XHTML

Tout comme l'italique, le code (X)HTML peut varier selon le sens que l'on donne à l'attribut. En PAO, le gras peut être utilisé sur tout un paragraphe pour faire varier les niveaux de lecture. Le texte n'est pas plus important, il est juste mis en valeur de manière différente. Sur le web, cette pratique est moins évidente mais on peut imaginer valoriser des mots que d'un point de vue purement visuel.

Pour attirer l'œil du lecteur sans apporter une importance aux mots, la balise <b> affiche du gras dans la plupart des navigateurs. Il en va de même pour les 6 niveaux de titre (h1, h2...) et strong. S'il s'agit de donner qu'une apparence, mieux vaut utiliser les styles et la propriété style font-weight. C'est plus encombrant au niveau du code mais au moins on maîtrise le rendu.

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

Par contre, un texte sur lequel on souhaite insister plus fortement doit être encapsulé par la balise strong. Au-delà de son rendu, strong a un impact significatif pour les moteurs de recherche. Elle sert également aux lecteurs d'écran pour adapter le timbre de la voix du logiciel.

Le gras en typographie

Tout comme l'italique, le gras est une composante à part entière d'une police. Certaines n'en disposent pas, d'autres ont une palette fournie de déclinaison: Thin, Light, Book, Normal, Medium, Bold, ExtraBold...

Soulignement

En PAO on évite de souligner du texte continu et a fortiori les titres. Beaucoup de gens ont pris cette mauvaise habitude. On doit cette manie aux machines à écrire dont c'était la seule manière — hormis le ruban rouge — de mettre en valeur le texte. Le gras n'existait évidemment pas. Dans les travaux à imprimer, le soulignement nuit à la lisibilité lorsqu'il est appliqué sur de grandes portions de textes, a fortiori sur plusieurs lignes.

Sur le web, le soulignement est à proscrire pour des raisons ergonomiques: il est synonyme de lien hypertexte pour la plupart des utilisateurs. Un texte sans lien ne doit pas être souligné. Par contre, un lien ne doit pas nécessairement être souligné pour être considéré comme un lien. Les feuilles de style permettent justement de personnaliser parfaitement le rendu et d'attirer la souris du lecteur.

Outre ce handicap ergonomique, le soulignement appauvrit la lisibilité du texte. Si l'informatique n'a de cesse progresser, on est resté au temps de la machine à écrire à ce niveau. Comme on le voit bien dans la capture d'écran ci-dessous, la barre horizontale coupe le jambage des caractères. D'un point de vue typographique c'est un massacre puisque les lettres descendantes sont noyées dans l'épaisseur du trait. Ce qui rend la lecture plus difficile puisque les lettres sont moins vite reconnaissables.

Dans le test de soulignement, on s'aperçoit qu'il existe des petites différences en fonction du navigateur. Dans Internet Explorer 6, la barre est plus fine et plus proche de la ligne de pied que dans Firefox 2. Cela dit, cet effet est annulé pour du texte en (petites) capitales.

Il existe un grand nombre d'alternatives qui permettent de mettre du texte en évidence ou d'établir des niveaux de lecture différents. On peut par exemple jouer sur: