L’italique dans tous ses états

En opposition au romain, l’italique est l’inclinaison du texte vers la droite. En principe, il s’agit d’une fonte particulière (italique cursif) dont chaque caractère a été pensé par son créateur. En l’absence de cette police, le romain mis en italique subit une distorsion automatique générée par le logiciel (italique penché).

Italique cursif et penché

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 ?

Heureusement, la plupart des polices pour le web disposent d’un jeu de caractères en italique. À défaut, la navigateur 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é.

Italique sur du texte en Times New Roman
Times New Roman: romain, penché et italique

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.

Italique sur du texte en Georgia
Georgia: romain, penché et italique

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.

Italique sur du texte en Garamond
Garamond: romain, penché et italique

Les usages 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. L’auteur décide arbitrairement de mettre en valeur une partie du texte. Un abus du genre aura l’effet inverse.

L’autre emploi concerne le respect des règles typographiques. Pour en savoir davantage, je vous encourage à lire le Ramat de la typographie d’Aurel Ramat. L’auteur y consacre un chapitre entier. Voici quelques-unes des règles:

  • titres d’œuvres littéraires, scientifiques et artistiques
  • titre d’une référence bibliographique
  • titres des quotidiens, périodiques
  • citations courtes
  • locutions latines non francisées: ad hoc, nota bene mais duplicata
  • mots étrangers non francisés: e-mail mais brocoli
  • légende d’une image: Fig. 3. — Vue en coupe
  • devise, maxime et proverbe
  • lettres de l’alphabet: la lettre m est large

L’italique dans le code 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. Cette précision est importante afin d’éviter un rendu superflu. Par exemple, une courte citation encapsulée dans la balise cite n’a pas besoin d’être mis en italique. Tout comme la balise blockquote de longue citation n’a pas besoin d’être mise entre guillemets.

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.

{code type=html}

JDC fait son come back

{/code}

L’utilisation de la balise <i> en dérange plus d’un. Certains voudraient bien la voir disparaitre dans les prochaines versions du HTML. À partir du moment où elle influence l’apparence l’apparence sans incidence sur sa pertinence dans le texte, il est sans doute plus judicieux d’ajouter un style CSS {font-style: italic;} au risque d’alourdir le code. Cette précaution à l’avantage d’avoir une parfaite maîtrise sur la forme et de faciliter les modifications postérieures.

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.

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 un petit corps de texte. Ceci est dû à la faible résolution des ordinateurs qui sont – pour le moment – incapables d’apporter toutes les finesses du caractère incliné.

À lire également: « Le gras 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