La Typographie du Web

de Russon Wooldridge

Université de Toronto (Canada)

 

bullet1. Introduction
bullet2. La Typographie et le codex
bullet3. La Typographie et le Web
bullet3.1. Typographie de la lecture linéaire
bullet3.2.Typographie de la lecture transversale
bullet3.3. Tableau récapitulatif
bullet4. Conclusion

 

bullet

1. Introduction

En partant d'une observation de ce qui est ou a été la norme de la typographie du codex et des propriétés de la page papier, nous essayons de poser ce qui, d'après les propriétés de la «page» qu'est l'écran, nous semble devoir être la norme de la typographie du livre électronique en ligne. Les propriétés en question sont, d'une part le support lui-même (page papier vs écran), et d'autre part la maîtrise de la surface de lecture (scripteur-imprimeur vs lecteur).

 

bullet

2. La Typographie et le codex

Selon le Trésor de la langue française informatisé (1), la typographie est un «procédé d'imprimerie dans lequel l'impression est réalisée par des caractères en relief assemblés et mis en page» ou encore la «manière dont est composé un texte (qualité des caractères, de la mise en page)». La page existe depuis l'introduction il y a deux millénaires du codex. Pour des raisons de commodité de transport et de maniement, le texte continu du rouleau a été découpé en morceaux correspondant aux dimensions physiques de la page de codex. La mise en lignes et la mise en pages existaient donc depuis de nombreux siècles quand l'imprimerie est venue faciliter la confection de livres et la diffusion du savoir et de la bonne parole. La typographie n'est en fait que la mécanisation de procédés manuscrits tels que la justification de la marge droite, la mise en pages et le choix des types et tailles de caractères. Pendant longtemps on a continué à pratiquer dans les livres imprimés les abréviations conventionnelles pour faciliter la justification des lignes et ce n'est qu'au dix-septième siècle que l'on s'est résolu à se contenter de l'espacement des caractères et des mots et de l'incise typographique pour le faire.

Au départ on a transformé la chaîne de la parole unidimensionnelle (temporelle pour la parole orale, spatiale ou linéaire pour le texte écrit) en surface bidimensionnelle (largeur de la ligne et longueur du texte-rouleau) pour la mise sur rouleau, puis en solide tridimensionnel (ligne, page, livre) en passant au codex. Les découpages pratiqués pour la mise en lignes et en pages étaient (et sont toujours) extrinsèques par rapport au texte, mais ils sont autorisés par les dimensions de la page. Nous aurons à revenir sur la légitimation physique dans la prochaine section.

Dans les dernières années du vingtième siècle, nombre d'éditeurs de l'imprimé ont profité du fait que les auteurs s'étaient équipés en micro-ordinateurs et imprimantes pour leur demander de soumettre une copie prête à reproduire, se rendant ainsi le travail plus facile tout en pratiquant les mêmes prix de vente. Les mauvaises habitudes acquises et les mauvais outils utilisés ont eu leur effet non seulement sur la typographie traditionnelle mais également sur la typographie du Web, comme nous le verrons.

 

bullet

3. La Typographie et le Web

Pour bien rendre compte des différents aspects du livre imprimé, ou plus largement du texte imprimé, et de son expression dans le Web, il faut élargir la définition traditionnelle du mot typographie. Dans un premier temps, la nouvelle définition doit pouvoir faire correspondre le mot davantage à l'anglais book-making («confection du livre»). Il y aurait sans doute lieu de voir ce qui équivaut en ligne à la reliure du livre imprimé, mais nous n'irons pas jusque là dans la présente discussion, sauf à souligner l'importance de la page de départ, qui doit incorporer titre (dont nom d'auteur et date, éventuellement éditeur), copyright et table des matières. Il convient pourtant d'ajouter à la composition et à la mise en page le support qu'est la feuille de papier dans le cas de l'imprimé et la définition du fond de l'écran dans le cas du livre ou texte en ligne.

Une différence cruciale entre l'imprimé et le Web est que ce sont l'éditeur et l'imprimeur qui fixent les dimensions de la page papier, alors que c'est l'usager du Web (le lecteur) qui choisit les dimensions et l'apparence de sa «page», l'écran. L'usager peut faire varier la largeur de la ligne de texte affichée sur son écran, comme il peut aussi faire varier la dimension verticale de la surface affichée. L'écran bidimensionnel fonctionne en fait plutôt comme le rouleau en non comme le codex. La troisième dimension, celle de l'épaisseur du livre, l'ensemble des pages, reste virtuelle dans le Web, le lecteur faisant dérouler le texte au fur et à mesure. Comme nous le verrons, c'est le fonctionnement totalement différent de la mise en lignes qui est cause de plusieurs types de malheurs en matière de typographie du Web. Le lecteur de l'écran peut aussi faire varier la taille et l'apparence des caractères, en les agrandissant ou les réduisant, en passant du Times Roman, au Garamond ou à l'Arial.

Dans un deuxième temps, il est nécessaire d'élargir encore le sens du mot typographie pour y inclure l'appropriation du texte par le lecteur. L'avènement du livre ou texte électronique sur CD-ROM et dans le Web a totalement bouleversé les habitudes de lecture. A la lecture linéaire traditionnelle, prévue par l'imprimeur et pratiquée par le lecteur, est venue s'ajouter, ou du moins s'adjoindre de façon systématique, la lecture transversale. La lecture linéaire est prise en charge par l'être humain, alors que la lecture transversale est assurée par la machine, c'est-à-dire la fonction «Recherche» du moteur de recherche (par exemple, Google au niveau du Web) ou du navigateur du document chargé (par exemple, Mozilla au niveau du fichier chargé).

Nous allons examiner ici, d'une part quelques propriétés de la typographie du Web, et d'autre part, et surtout, certains phénomènes qui gênent la lecture soit linéaire, soit transversale des documents publiés dans le Web.

 

bullet 
bullet

3.1. Typographie de la lecture linéaire

Dans cette section, nous allons relever quelques problèmes concernant la justification de la marge droite, les espaces entre les mots et la ponctuation, les polices de caractères et la couleur, en prenant comme exemples des extraits de textes publiés sur différents sites du Web en format HTML. Il s'agit de textes littéraires (des contes de Maupassant) mis en forme pour lecture sur écran.

 

bullet 
bullet 
bullet

3.1.1. Justification de la marge droite

C'est une convention livresque de justifier la marge droite, car - comme le copiste avant lui - l'imprimeur est maître absolu de la police de caractères, leur type et taille, de l'espacement des caractères et des mots, de la largeur de la ligne, de l'incise typographique. Les habitudes de lecture livresque, renforcées par l'habitude de se servir d'un logiciel de traitement de texte pour produire des documents sur du papier A4 (ou équivalent), font que les auteurs trouvent normal, voire «joli», d'avoir une marge droite justifiée. Or, aucun des facteurs de maîtrise du papier évoqués ci-dessus ne joue sur l'écran d'ordinateur. Le logiciel de traitement de texte, capable de produire du joli sur papier, s'avère le plus souvent un très mauvais outil pour créer un document en HTML. La conversion en format HTML produira des paragraphes ayant la balise <P ALIGN="JUSTIFY">, ce qui peut donner le résultat suivant (2):


 

La balise livresque <P ALIGN="JUSTIFY"> devrait être simplement <P> ou <BR>, ce qui donne, par exemple, ceci (3):


Dans un document Web «normal», l'espacement des caractères et des mots ne varie que selon la grandeur des caractères.

 

bullet 
bullet 
bullet

3.1.2. Espaces mous

L'usage du même type de mauvais outil ou la méconnaissance du fonctionnement d'une page Web peut résulter en des espaces mous là où on s'attend normalement à des espaces durs (&nbsp; en HTML) avant les ponctuations «fortes» (deux-points, point-virgule, point d'interrogation, point d'exclamation, guillemets fermants) ou après (guillements ouvrants). Cela pourra donner, par exemple (4):

ou encore:

 

bullet 
bullet 
bullet

3.1.3. Police de caractères

Le lecteur est habitué à lire un texte littéraire composé dans un caractère romain à sérif. Si on lui donne le choix de caractère (option du navigateur), il peut toujours sélectionner un caractère sans sérif ou autre. Le caractère des documents suivants est déterminé à l'avance:

a) <FONT FACE="Genava,verdana,geneva,arial" SIZE=2> (5):


b)
<font face="Arial"> (6):


Ces deux documents pêchent aussi, le premier par son imposition d'une taille de caractères (
<FONT SIZE=2>), le second par l'emploi à travers tout le texte de la mise en gras, ce qui sera cause de fatigue et d'agacement chez la plupart des lecteurs: au lieu de balises <P> pour les paragraphes, on a utilisé dans ce texte des balises d'intitulées <H4>.

 

bullet 
bullet 
bullet

3.1.4. La Couleur

Le Web offre à l'auteur qui veut publier en ligne un choix de millions de couleurs. Alors, pourquoi ne pas en profiter pour faire «joli»? Cependant, le lecteur de son côté n'a peut-être pas les mêmes goûts que l'auteur en matière de couleurs et de toute façon il veut le moins de bruit possible entre le texte écrit et sa propre construction du contenu qu'il renferme. D'où la convention bien plus que millénaire du noir sur blanc. Ce n'est pas à l'auteur d'innover; si le lecteur préfère blanc sur noir, par exemple, il pourra toujours faire ce choix dans son navigateur. Il n'aimera pas peut-être les textes suivants, qui imposent et la couleur du texte et celle du fond (c'est le troisième qui s'éloigne le moins des attentes normales):

a) <body background="../p1.jpg">, <font color="#400000"> (7):


 

b) <BODY BGCOLOR="#447777">, <FONT COLOR="#FFFFCC"> (pour le titre), <FONT COLOR="#990000"> (pour le texte) (8):


c)
<BODY background="../images/fond01.gif" text=darkblue> (pour le texte), <FONT COLOR="#800040"> (pour le titre, le fond restant le même) (9):


 

bullet 
bullet

3.2. Typographie de la lecture transversale

Le mode de lecture normal du livre imprimé est linéaire - on lit un roman du début jusqu'à la fin. Mais distinguons entre texte continu (le roman) et texte discontinu (le journal, le dictionnaire, l'encyclopédie...) Pour le texte discontinu, il faut un système de repérage des unités discrètes: ordre alphabétique pour le dictionnaire, ordre alphabétique et index pour l'encyclopédie, table des matières et index pour le manuel de grammaire, table des matières plus ordre conventionnel des rubriques du journal. Ces systèmes hypertextuels ne permettent jamais qu'une lecture transversale partielle de l'imprimé: par exemple, l'occurrence du mot sabotage dans un exemple d'emploi de l'article SPEAKER du Petit Robert ou de l'article PRONONCIATION du Trésor de la langue française - «Sabotage de la prononciation de notre belle langue par les speakers de la radio» - n'est pas repérable par une lecture transversale; ce sens figuré est quand même important, et courant, mais il n'est pas donné dans l'article SABOTAGE.

Dans la vraie hypertextualité du Web, la lecture transversale est aussi importante, et est normalement aussi totale, que la lecture linéaire. Les systèmes hypertextuels de recherche par mots-clés sont multiples: moteur de recherche pour l'ensemble du Web, fonction «Recherche» ou «Trouver» du navigateur pour une page donnée, fonction «Recherche» souvent offerte pour l'ensemble des documents d'un site ou sous-site (site d'un journal, par exemple), fonction de recherche plein-texte pour une base de données. Reprenons, dans cette dernière catégorie, l'exemple du mot sabotage: en demandant dans le formulaire de requête du Trésor de la langue française informatisé (1) toutes les occurrences du mot sabotage dans le texte des exemples d'emploi, on tombe sur l'occurrence de sabotage de l'article PRONONCIATION citée ci-dessus.

La possibilité de faire une lecture transversale d'un texte continu comme le roman permet souvent d'enrichir la lecture linéaire ou la compréhension globale du roman. Prenons deux exemples. Dans Candide de Voltaire, on rencontre dans le chapitre 27 le personnage de Don Fernando d'Ibaraa, y Figueora, y Mascarenes, y Lampourdos, y Souza, gouverneur de Buenos-Ayres. On a vaguement souvenir de l'avoir rencontré déjà, mais pour en situer l'occasion on n'a pas d'autre choix, dans le roman imprimé, que de parcourir les 26 chapitres précédents. Si on a Candide en base de données (10), on le retrouve tout de suite dans le chapitre 13. Dans le roman Bonheur d'occasion de Gabrielle Roy, le thème du sucre d'érable revient à plusieurs reprises; en fait, le mot y est le plus souvent au pluriel, ce qui le distingue de son comportement en français d'Europe. Une recherche, dans la base de données de Bonheur d'occasion, de sucre(s) révèle tout de suite (entre autres occurrences): «les sucres viennent de commencer» (ch. 13), «cabane à sucre» (ch. 13 et 15), «[aller] aux sucres» (ch. 13, 16, 18, 22), «sucre à la crème» (ch. 16), «sucre en pain» (ch. 21) (11).

Nous avons dit que la lecture transversale est «normalement» totale dans le Web. Parmi les obstacles réels ou potentiels, nous allons étudier ceux présentés par la saisie optique (3.2.1), certains fonctionnements particuliers aux documents non conformes que sont les fichiers DOC et PDF (3.2.2) et les textes en mode image (3.2.3).

En revanche, il est un type de lecture transversale particulier qui améliore la lecture transversale et qui se situe, en quelque sorte, entre la lecture du Web visible et celle qu'offrent des logiciels d'indexation spécialisés comme Stella, Philologic ou TACTweb. Il en sera question ci-dessous (3.2.4).

 

bullet 
bullet 
bullet3.2.1. La Saisie optique

Les fautes d'orthographe de la composition typographique sont linguistiques et humaines (par exemple, font ou fonds au lieu de fond); celles de la saisie optique sont visuelles et mécaniques (par exemple, «ISSO» pour «I550» - la lecture transversale révèle l'inconséquence de l'emploi conventionnel de «I» latin dans une séquence de chiffres arabes). Un exemple qui ne gêne pas l'oeil (lecture linéaire), mais cache le mot à la fonction mécanique «Recherche» (lecture transversale) (12):


Le mot «Instruction» de la première ligne est en fait «lnstruction», avec un «l» minuscule. La fonction «Recherche» du navigateur ne trouvera donc pas le mot instruction.

On peut dépister la plupart des fautes de saisie de ce type en dépouillant la liste alphabétique des formes (mots graphiques) du texte. Pour la partie J-M de la liste du premier paragraphe du «Père» de Maupassant, on a:

1  jeune
1  jusqu
2  l
1  les
1  lnstruction
2  matin
1  ministère

On voit tout de suite que «lnstruction» est fautif.

 

bullet 
bullet 
bullet

3.2.2. Particularités de documents conçus pour l'impression

Font partie du Web depuis quelque temps, grâce aux capacités accrues du moteur de recherche Google, des fichiers DOC et PDF téléchargés sur des serveurs. A l'intérieur de ces documents, affichables sur écran mais conçus en premier lieu pour être imprimés sur papier, relèvent du système typographique du Web toutes les parties du texte qui sont correctement repérables par le moteur de recherche. Nous parlerons dans cette section de deux particularités de la mise en forme de fichiers DOC et PDF qui ne sont pas conformes à la typographie du Web.

a) Document en format DOC: les cases à remplir d'un formulaire de commande (13):


Dans la typographie du Web, les cases carrées sont interprétées comme des lettres «o», ce qui crée des «mots» comme «oinfant», «odairy», «oconfectionery», «ocereals», «onuts», «oedible», «ospices», «opasta», «osauces», «ocookware».

b) Documents en format PDF: les petites capitales

Soit des mots comportant une capitale à l'initiale et des petites capitales pour les autres lettres (14):


Cette séquence est introuvable si, dans le moteur de recherche, on tape «monsieur françois grateau directeur général des hospices civils de lyon»
. En revanche, on trouvera bien le texte en question si on a l'idée saugrenue de taper «monsieur françois grateau d irecteur général des h ospices c ivils de l yon». Autrement dit, l'utilisation de petites capitales dans un document PDF a pour conséquences: a) de couper en deux les mots ainsi affectés («d irecteur», etc.); b) de les rendre introuvables dans le Web; c) de créer des mots fictifs («d», «irecteur», «h», «ospices», «c», «ivils», «l», «yon»); d) de fausser les résultats d'une requête dans le Web.

 

bullet 
bullet 
bullet

3.2.3. Texte et image

En règle générale, dans un document comportant texte et images, c'est le texte analytique qui porte le contenu linguistique et les images synthétiques qui soit illustrent le texte, soit ont une valeur iconique indépendante du texte. Dans le cas du roman, le texte est primaire, les images secondaires; dans celui d'un album de bandes dessinées pour jeunes, les rôles sont inversés. Le fonctionnement du texte et de l'image est le même pour le document en ligne que pour le document papier, à l'exception d'une différence importante. Alors qu'on peut lire ou photocopier indifféremment texte et images imprimés sur papier, on peut lire sur écran ou sauvegarder des fichiers texte ou image, mais on ne peut interroger transversalement (moteur de recherche ou fonction «Recherche» du navigateur) que des fichiers textes, comme on ne peut faire du copier-coller que dans ces derniers. On trouvera cette différence normale dans la plupart des documents du Web, mais lorsque tout le texte est porté par des images, il y a rupture.

Un exemple, qui s'explique par le fait qu'il s'agit d'une pure publicité, donc objet synthétique connotatif plutôt que document analytique dénotatif (15):


Le titre «daily facials» est affiché au moyen de la commande
<img src="images/home_title.gif"> et le texte qui le suit est appelé par la commande <img src="images/home_text2.gif">. Le contenu textuel du champ HTML <title> - "Home Page - Daily Facials" - suffit pour rendre la page trouvable par un moteur de recherche si on demande des occurrences de «daily facials», mais non pas si on cherche des occurrences de «lingette(s)» ou de «massage facial».

 

bullet 
bullet 
bullet

3.2.4. Repérage dans le Web et dans les caches

La mise en relief de mots-clés est un moyen d'optimiser la lecture transversale. Elle se fait par la mise en gras dans les pages de résultats de Google, mais elle est absente de l'affichage des documents en ligne correspondants. Dans des logiciels d'indexation et de recherche spécialisés - comme Stella (utilisé pour le Trésor de la langue française informatisé et Frantext, Nancy), Philologic (ARTFL, Chicago) ou TACTweb (FreBase, Toronto) - la mise en relief s'effectue de différentes façons, dont le regroupement des occurrences du mot-clé dans des affichages KWIC, ou des graphes de distribution. Pour connaître la distribution de plusieurs mots-clés, ainsi que la dispersion ou la concentration de leurs cooccurrences, il faut, dans ces logiciels spécialisés, passer par plusieurs requêtes.

Or il existe entre les deux un Web caché dans lequel la mise en relief se fait automatiquement à l'intérieur du texte linéaire au moyen du marquage en couleur de chaque occurrence d'un mot-clé - une couleur différente pour chaque mot-clé. Il s'agit des versions que Google met en cache pour les documents HTML ou de ses versions en HTML de documents mis en ligne dans d'autres formats, comme les fichiers PDF ou DOC.

Par exemple, dans le conte «L'Enfant» de Maupassant, on rencontre dans un même paragraphe les mots fille, maîtresse, enfant, mère et femme. En mode linéaire ordinaire dans le Web, cela donne (16):


Dans la version que Google met en cache, cela devient, suite à la requête «+enfant +mère +fille +femme +maîtresse +maupassant»:


En parcourant rapidement le reste du texte à l'oeil nu, on voit tout de suite qu'il y a plusieurs autres occurrences de ces mots, dont quelques cooccurrences concentrées telles que:


La requête «
+enfant +mère +fille +femme +maîtresse +maupassant» dans les pages francophones de Google produit le chiffre de 592 résultats. Parmi ceux-ci, on peut citer, en regardant les versions cachées de Google, d'autres cas de cooccurrences concentrées. Par exemple (17):


Ou (18):


Ou encore (19):




 

bullet 
bullet

3.3. Tableau récapitulatif

Reprenons les phénomènes commentés ci-dessus pour les résumer d'après la pratique courante du livre imprimé (deux premières colonnes) et selon ce que nous considérons souhaitable dans la typographie du Web (colonnes 1 et 3).
 

Livre imprimé Livre en ligne
Justification de la marge droite Oui Non
Espaces durs Oui Oui
Police de caractères Choisie par l'imprimeur Choisie par le lecteur
Couleurs Normalement noir sur blanc Créateur: noir sur blanc ou similaire
Lecteur: possibilité de changer
Oeil/machine Lecture par l'oeil Lectures par oeil et machine
Spatialité de la lecture Lecture linéaire primaire et totale
Lecture transversale secondaire et partielle
Lectures linéaire et transversale primaires et totales
Spatialité de l'espace de lecture Fixe Variable

 

bullet

4. Conclusion

La typographie du Web cherche encore sa voie. La très grande majorité des réalisations de livres en ligne sont actuellement typographiquement imparfaites. Cet état des choses est dû en partie à la méconnaissance généralisée des exigences du médium, qui favorise lectures linéaire et transversale totales et qui pousse à remplacer l'imprimeur et l'éditeur par le lecteur dans la définition de la spatialité et de l'apparence du texte. Il est dû en partie également à l'utilisation de mauvais outils dans la production du texte.

 

 

bulletRéférences
 

1 - Trésor de la langue française informatisé <http://atilf.atilf.fr/tlf.htm>.

2 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/fdp.html> .

3 - <http://maupassant.free.fr/textes/femmpaul.html> .

4 - <http://perso.wanadoo.fr/hypopolo/didac/nouvelle/vagabond.htm> .

5 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/bonheur.html>.

6 - <http://perso.wanadoo.fr/hypopolo/didac/nouvelle/folle.htm>.

7 - <http://www.contes.net/contes/maupassant/h39.html> (= lien mort).

8 - <http://www.fh-augsburg.de/~harsch/gallica/Chronologie/19siecle/Maupassant/mau_j_hi.html> .

9 - <http://maupassant.free.fr/textes/histoire.html>.

10 - Voir, par exemple, <http://www.chass.utoronto.ca/~wulfric/frebase/candide/>.

11 - Cf. R. Wooldridge, «Lectures-écritures verticales: construction culturelle», <http://www.chass.utoronto.ca/~wulfric/articles2/vertic94/index.html#4>.

12 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/pere.html> .

13 - <http://www.sccci.org.sg/announcements/AVACircular.doc> (= lien mort; on peut retrouver le texte en format HTML dans Google, en demandant, par exemple, +onuts +ocereals).

14 - <http://www.arteb.com/infos/Actualite/AFIB%20Program.pdf>.

15 - <http://www.dailyfacials.com/fr_CA/>.

16 - <http://tactweb.chass.utoronto.ca/french/enfant.htm>.

17 - Une Vie de Maupassant sur le site @ la lettre.

18 - «La Confession» de Maupassant, texte saisi par Thierry Selva, sur le site Athena.

19 - «Allouma» de Maupassant, texte en format PDF sur le site Pitbook.com.

 

2004 

 

Voir dans l'encyclopédie de l'Astrolabe:

L'Avenir de la lecture interactive

Critique de la lecture informatique

L'Edition électronique