Typographie sur le web

Assez, c’est assez !

Qui a dit que les règles de typographie fine (parfois qualifiée de micro typographie) n’étaient pas applicables dans une page web ? Nous allons ici démontrer que c’est tout à fait possible.

L’apostrophe

L’apostrophe est probablement le signe typographique le plus malmené de nos jours. Pour rappel, l’apostrophe en typograhie ressemble à ceci : [  ] ; et non à ceci : [ ' ].

Il existe trois méthodes pour y parvenir :

  1. taper directement au clavier :
  2. dans le code HTML inscrire : ’
  3. dans le code HTML inscrire : ’

La première méthode est préférable, car plus lisible, mais ne s’applique qu’aux conditions suivantes :

Exemple de déclaration d’encodage dans l’entête HTML :
<head>
  <meta http-equiv="content-type" content="text/html; 
  charset=utf-8" />
  [...]
</head>
Attention : L’encodage iso-8859-1 ou iso-8859-15 ne peuvent être utilisés pour cette méthode, car ils ne comportent pas l’apostrophe typographique dans leurs spécifications, même si plusieurs logiciels de navigation modernes les reconnaissent quand même.


La seconde méthode utilise une entité HTML décimale et est reconnue par la plupart des logiciels de navigation, y compris ceux de 4e génération (comme Netscape 4). Cette méthode constitue donc une bonne alternative à la première, notamment lorque l’on désire utiliser un encodage iso-8859-1.

La troisième méthode utilise une entité HTML nominale (symbolique ou mnémotechnique) et n’est pas reconnue par tous les logiciels de navigation, dont Netscape 4. (rsquo = RIGHT SINGLE QUOTATION MARK).

Les guillemets

En typographie française, les guillemets se marquent ainsi : « texte » et non comme ceci "texte" ou à l’anglaise, comme ceci “texte”.

Il existe trois méthodes pour y parvenir :

  1. taper respectivement au clavier : « et »
  2. dans le code HTML inscrire respectivement : &#171; et &#187;
  3. dans le code HTML inscrire respectivement : &laquo; et &raquo;

La première méthode est de loin préférable et compatible avec la plupart des encodages utilisés pour les langues de l’europe de l’ouest et des amériques (utf-8 - unicode, iso-8859-1, iso-8859-15 ou windows-1252) ; il faut évidemment que le document soit enregistré dans l’encodage approprié et qu’il soit déclaré dans l’entête du document.

L’espace insécable et la fine

En typographie française, une espace fine (au féminin en typographie) doit être insérée devant les ponctuations hautes, à l’exception du deux points [:] qui exige une espace normale (justifiante) insécable ainsi qu’entre le texte et les guillemets français [« »]. Voici le résultat attendu :

Espace insécable

Pour l’espace insécable, ça ne pose pas de difficulté et il existe, encore ici, trois méthodes pour y parvenir :

  1. taper l’espace insécable directement au clavier,
  2. dans le code HTML inscrire &#160;
  3. dans le code HTML inscrire &nbsp;

La première méthode est encore ici, de loin préférable et compatible avec la plupart des encodages et des logiciels de navigation ; il faut évidemment que le document soit enregistré dans l’encodage approprié et qu’il soit déclaré dans l’entête du document. Sur Macintosh, dans la plupart des éditeurs HTML, on l’obtient à tapant simultanément alt + espace.

Pour l’espace fine, c’est un peu plus compliqué. Bien que les spécifications d’Unicode définissent plusieurs types d’espaces ainsi que leurs entités nominales ou décimales, les logiciels de navigation madernes ne les reconnaissent pas toutes et lorsqu’ils les reconnaissent, ne les traitent pas toutes de la même façon. De plus, les spécifications d’Unicode ne déterminent pas la valeur exacte de chaque type d’espace (en fraction ou pourcentage de cadratin, par exemple, comme le font les logiciels de mise en page en PAO). Pour rappel, voici les différents types d’espaces définis par Unicode :

Type
d’espace
Exemples Entité
nominale
Entité
décimale
normale texte !
insécable texte ! &nbsp; &#160;
thin texte ! &thinsp; &#8201;
ponctuation texte ! &#8200;
hair texte ! &#8202;
insécable+css * texte ! &nbsp; &#160;
*
HTML
texte<span class="fine">&nbsp;</span>texte
CSS
.fine { font-size: 30%; }

Cette dernière méthode utilise l’élément HTML <span> et une classe CSS, combiné à l’espace insécable reconnue par tous les logiciels de navigations et types d’encodage et se comporte de façon identique dans presque tous les navigateurs modernes. Par contre, elle nécessite un codage supplémentaire et à ce titre, ne constitue pas une solution idéale.

Pour l’avenir, l’espace « hair » semble représenter ce qui se rapproche le plus de l’espace fine typographique... quand tous les logiciels de navigation modernes pourront la reconnaître. D’ici là, pour les travaux courants, à défaut de disposer d'une méthode satisfaisante pour produire une espace fine, il demeure quand même préférable d’utiliser une simple espace insécable que pas d’espace du tout devant les ponctuations hautes et à l'intérieur des guillemets, comme le font justement certains gestionnaires de contenu web (CMS), dont SPIP et Dotclear.

Conclusion ?

Oui ! Il est possible d’appliquer correctement les règles de typographie fines à la production de pages web, et ce, de façon suffisamment compatible avec tous les environnements et logiciels de navigation. Mais encore faut-il s’en donner la peine et bien maîtriser les règles de typographie française.

Par contre, au chapitre de la macro typographie, il reste du chemin à parcourir, notamment en ce qui concerne la distribution correcte des espaces dans les lignes de texte justifié ainsi que la gestion automatique des césures. À suivre...

CC 2004 André Vincent

Dernière modification : 20 juillet 2006

Retour à la section Typographie