Catégories
Blogs à lire
Archives
Blog
juil
16
L'italique dans tous ses états
Catégorie: Typographie | 1 commentaire | 1 056 lectures
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, les caractères romains mis en italiques subissent une distorsion automatique généré 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 ?
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é.
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.
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.
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.
1 2 3 4 5
<p>
JDC fait son <i title="retour" lang="en">come back</i>...
</p>
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 une petit corps 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é. Dans l'illustration de droite (prise le 26/06/07), Libération a cru bon de respecter les règles typographiques sans se soucier du rendu final.
À lire également: « Le gras dans tous ses états ».
[...] de manière moins insistante que le gras. Pour plus de détails, l’article « L’italique dans tous ses états« . Faites attention à l’espacement entre les caractères et les lignes. Lorsque [...]