Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données
DOSSIER cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > Technique > La typographie du web > Les contraintes du nouveau media       J.C.Sohm       Révision : 07 novembre 2001
 
LA TYPOGRAPHIE du WEB
1- Les contraintes du nouveau media
 
 Introduction

Version PDF
pour impression

Connaissez-vous le "Virtual Graphic Artist"? C'est un webzine américain, que j'ai découvert en surfant sur le web -- par hasard, parce que les moteurs de recherche ne font pas toujours bien les choses. Son numéro de février 2000 comporte un article intitulé "Typography and the Web" qui mérite d'être consulté. Il s'adresse à tous les concepteurs de sites web issus du monde des arts et industries graphiques, et plus précisément à ceux qui viennent de la PAO. Ces derniers ont abordé le web avec leurs habitudes et leur savoir-faire -- dont la typographie fait évidemment partie -- et ils n'ont pas caché leur déception  : pourquoi le HTML est-il si limité en ce qui concerne la typographie, et pourquoi ne le remplace-t-on pas par Postscript ou PDF ?  Pourquoi ne peut-on pas transmettre les polices avec la page web ? Pourquoi de belles polices s'affichent-elles de manière aussi laide sur l'écran des ordinateurs ? Pourquoi les navigateurs permettent-ils à l'internaute de modifier l'apparence du texte des pages web comme il l'entend ?

 

Sauf erreur de notre part, les documents traitant de ces questions sont plutôt rares sur le web, et l'article du webzine précité représente vraiment une exception. Des sites existent, qui traitent de la typographie classique (celle qui est utilisée en PAO) mais l'adaptation de cette dernière au web n'est généralement pas abordée. C'est la raison pour laquelle nous avons créé et mis en ligne ce dossier.

 
 
 Nouveau média, nouvelles contraintes
  Les différences entre la typographie de la PAO et celle du web ont trois causes principales :  
 
    d'abord, les deux supports d'information sont très différents. Le papier -- d'une part -- fonctionne par diffusion de la lumière, la résolution des procédés d'impression est suffisante, et la reproduction des couleurs par quadrichromie CMJN est satisfaisante. L'écran d'un moniteur -- d'autre part -- fonctionne par émission de lumière, sa résolution (toujours voisine de 72 dpi) est faible, et la reproduction des couleurs par trichromie RVB s'effectue dans un espace colorimétrique différent de celui du CMJN (et sans doute plus étendu). Il n'est donc pas étonnant que les les produits correspondants (l'imprimé d'une part, l'affiché d'autre part) aient des propriétés différentes. Chaque support possède ses avantages et ses inconvénients ;
  ensuite, l'ordre des processus n'est pas le même. Dans les industries graphiques, on imprime d'abord, on distribue ensuite : l'imprimeur, ou son commanditaire, est maître de la présentation du produit imprimé. Sur le web, c'est l'inverse : on distribue d'abord (via Internet), on affiche ensuite. L'internaute, et le système informatique qu'il utilise, influent sur la présentation des pages web reçues ;
  enfin, la transmission des données via Internet est limitée par le débit du réseau, débit généralement faible, et souvent irrégulier.
 
 

Il en résulte que la typographie du web souffre de contraintes qui n'existent pas pour la typographie classique sur papier. Nous examinerons tour à tour les points suivants :

 
 
    Internet est un tout petit tuyau, ce qui incite les concepteurs de pages web à sacrifier un peu la présentation pour limiter la taille des fichiers ;
  l'écran du moniteur présente une résolution médiocre. Certains détails typographiques fins (les empattements en particulier) ne sont pas -- ou sont à peine -- visibles ;
  l'internaute est maître de son système ; il peut modifier à loisir la présentation de l'information qu'il reçoit en jouant sur les réglages de son navigateur. C'est dans l'esprit du web, et il faut s'y faire ;
  le nombre de polices communes à tous les postes d'internaute ne dépasse pas la dizaine ;
  le système informatique utilisé influe sur la qualité de l'affichage, tant à cause du matériel (moniteur) que du logiciel (navigateur). Ainsi, les navigateurs sont encore des produits évolutifs, qui implémentent plus ou moins bien les possibilités récentes (feuilles de style) en matière de typographie du web.
 
 

L'article du webzine a été écrit pour rappeler que le web est un nouveau media, dont les propriétés sont très différentes de celles de l'imprimé. Il faut se faire aux défauts de "la toile", profiter de ses qualités, et faire évoluer la typographie du web (web typography) dans son nouveau cadre. Enfin, on peut se consoler en usant et en abusant de la COULEUR, qui est plus belle sur l'écran d'un moniteur que sur un produit imprimé.

 
 
 Première contrainte : le débit d'Internet

Il était de bon ton chez les gourous d'Internet, au début de l'année 2000, d'expliquer calculette en main qu'on allait disposer de tellement de "bande passante" (bandwith -- en fait, "débit" est le terme correct en français) qu'on ne saurait plus qu'en faire. Ces messieurs avaient additionné le nombre de kilomètres de fibre de verre posés ces dernières années, extrapolé les futures performances de chaque fibre, et tiré leurs brillantes conclusions. Ils avaient oublié une première chose, c'est qu'aux deux bouts de la fibre il faut mettre de l'optoélectronique, qu'à chaque nœud de la toile il faut installer des ordinateurs puissants et des routeurs costauds, et que si le gros tuyau des dorsales enfle, il faut aussi que les moyens tuyaux, et le petit tuyau qui va jusqu'à l'internaute, en fassent autant. Peut-être nos gourous avaient-ils oublié aussi une deuxième chose, à savoir que le nombre d'internautes augmente à toute vitesse, si bien que les investissements actuels permettent d'accepter les nouveaux utilisateurs, mais ne contribuent guère à l'amélioration du fonctionnement pour ceux qui sont déjà présents -- un processus qui est loin d'être terminé. Toujours est-il que, quelques semaines plus tard, les gourous annonçaient que les gros débits sur Internet n'étaient pas pour demain. Dans cinq ans, peut-être... En attendant, si vous voulez être présent sur le net, il faut vous adapter à ses performances actuelles.

 

Comparé à d'autres systèmes qui véhiculent aussi du texte et des images, Internet présente des performances qui paraissent minables :

 
 
    le débit nominal d'un lecteur de CD-ROM 1X est de 150 Ko/s, soit 1.200 Kbps (Kilobits par seconde). Les appareils actuels sont vendus pour 40X ce qui, le mensonge marketing une fois corrigé, correspond à un peu près à 20X, ou 24.000 Kbps. C'est environ MILLE FOIS le débit moyen de l'Internet français aux heures normales de bureau -- quand tout va bien ;
  le débit nominal d'un réseau local Ethernet courant est de 10 Mbps au niveau du poste de travail (et 10 ou 100 fois plus au niveau de la dorsale de l'entreprise). Même si le débit réel maximum n'atteint guère que les trois quarts de cette valeur, c'est encore TROIS CENTS FOIS le débit moyen de l'Internet français.
 
 

L'expérience montre que si une page web met plus de 20 secondes à se charger, l'internaute s'impatiente et va cliquer ailleurs. Comme il y a plus de 27 millions de sites (chiffre de novembre 2001) et près de deux milliards de pages HTML sur le web, le brave homme n'a que l'embarras du choix. Le débit moyen actuel d'Internet vous donne par conséquent droit à 50 Ko par page web -- 30 Ko même, selon les auteurs les plus sévères. En conséquence, les pionniers du web :

 
 
    ont développé un langage de description de page simplifié, appelé HTML (HyperText Markup Language), qui n'alourdit pas trop le texte saisi, mais dont les possibilités en matière de typographie sont limitées ;
  n'ont pas prévu le téléchargement des polices avec la page web. Cette dernière est donc affichée par le navigateur à l'aide des polices présentes sur la machine de l'internaute.
 
 

Le développement du web, et les exigences toujours plus pressantes des concepteurs de sites, ont amené le W3C (World Wide Web Consortium) à proposer un additif au HTML : les feuilles de style en cascade (CSS : Cascading Style Sheets). Les spécifications correspondantes sont très riches en fonctionnalités typographiques, et le téléchargement de polices avec la page web est prévu. C'est parfait... mais cela ne marche que partiellement pour l'instant La seule typographie utilisable sur le web reste celle que permet le HTML -- c'est du moins la philosophie appliquée par le CERIG jusqu'à nouvel ordre.

 
 

Remarque : la limitation de la taille des pages web ne doit pas être prise à la lettre. Ce qu'il faut éviter à tout prix, c'est que l'internaute reste devant une page vide pendant de longues secondes, à cause d'un fichier lourd qui s'affiche d'un seul coup. Par contre, l'internaute moyen admet très bien que la page continue à se charger, s'il a déjà quelque chose à lire pendant ce temps.

 
 
 Deuxième contrainte : la résolution de l'écran

Rentrez-vous bien cette valeur dans la tête : 72 dpi. C'est à peu près la résolution vous pouvez obtenir sur l'écran de votre moniteur. Nous sommes loin des performances des photocomposeuses, des systèmes d'épreuvage numérique, de l'offset, et des imprimantes "qualité photo". Contrairement à ce pensent certains, cette valeur de 72 dpi n'est qu'un ordre de grandeur, même sur un Mac. Votre ordinateur, qui ne connaît ni la taille exacte de votre moniteur ni la manière dont vous l'avez réglé, ne peut pas vous offrir exactement cette résolution. Vous devez d'abord considérer qu'ici le "d" de "dpi" ne signifie pas "dot", mais "pixel", et ensuite que la valeur 72 est approchée.

  Pour ce qui est des performances des moniteurs, il faut regarder les choses en face :  
 
    une grosse moitié des internautes voient le web dans une fenêtre de 15", à la résolution de 800 x 600 pixels. Si la diagonale réelle de l'écran de leur moniteur vaut 14", le pixel mesure 0,35 mm et la dpi vaut 71 ;
  un bon tiers des internautes est équipé d'un moniteur de 17", et l'exploite à la résolution de 1024 x 768 pixels. Si la diagonale réelle vaut 16", le pixel mesure 0,32 mm et la dpi vaut 80 ;
  environ 5 % des internautes sont mal lotis et surfent sur le web avec un moniteur de 14" exploité à la résolution du VGA (640 x 480 pixels). Si la diagonale réelle vaut 13", le pixel mesure 0,41 mm et la dpi vaut 62.
 
 

En gros, le pixel mesure toujours 1/3 de millimètre. Le moniteur est donc incapable de représenter correctement un empattement, qui est défini au 1/10 de millimètre près. Deux polices qui apparaissent comme très voisines sur l'imprimé deviennent pratiquement indiscernables à l'écran. Le nombre de polices que l'on peut utiliser pour le web serait donc a priori plus limité que pour l'imprimé. Et cette situation ne serait pas près de changer, parce qu'on ne s'attend pas pour l'instant à une évolution rapide de la résolution des moniteurs.

 
 

Un tel point de vue est malthusien. Il serait plus correct de dire que les fondeurs de polices destinées au web s'orienteront dans une direction différente de celle suivie jusqu'ici par leurs collègues travaillant pour l'imprimé. Cette tendance, encore timide, est déjà perceptible. A mon humble avis, le web est un media plus festif et moins guindé que l'imprimé (que les imprimeurs me pardonnent !), et les polices au dessin original, fantaisiste, ou simplement amusant, y connaîtront sans doute un bel avenir. De plus, les facteurs qui gouvernent la lisibilité d'une police ne sont pas les mêmes pour l'imprimé et pour le web. Aussi n'ai-je pas peur d'être iconoclaste : moins de Garamond, plus de Comic, tel est l'avenir de la typographie du web !

 
 
 Troisième contrainte : les polices résidentes communes

Les polices que l'on trouve sur les micro-ordinateurs proviennent de diverses sources : le système d'exploitation, certains pilotes et logiciels d'application, et les recueils de polices que l'on peut se procurer en ligne ou sur CD-ROM. Le système d'exploitation Windows 98, par exemple, en fournit une cinquantaine (on les trouve dans C:\WINDOWS\FONTS). Le concepteur de site peut-il spécifier l'une de ces 50 polices dans ses pages web, et être sûr qu'elle sera utilisée par le navigateur de tous les visiteurs ? Hélas non ! Car si les internautes équipés de Windows 3.x ont disparu, ceux qui se servent de Windows 95 existent encore un petit peu, et ceux qui utilisent Windows NT sont légion -- et la liste des polices résidentes est différente dans chaque cas. Et puis, il y a les utilisateurs de Mac : en moyenne mondiale, il ne représentent plus que 4 % des visiteurs environ, mais rares sont les webmestres qui affectent de les ignorer. Cela tient sans doute à l'importance que le Mac a conservée dans le monde des arts et industries graphiques, dont la conception de sites web fait partie. Une spécialiste (L. Weinman) a même pu écrire que les pages web étaient conçues sur Mac et regardées sur PC... (ce qui n'est pas très logique, et tend à se modifier). L'analyse du trafic du CERIG montre que 18 % de ses visiteurs utilisent un Mac : au CERIG, on ne peut pas négliger la plate-forme Apple ! Les diverses plates-formes Unix, par contre, ne sont guère utilisées par les internautes, du moins pour l'instant.

 

En pratique, donc, ne peuvent être considérées comme présentes chez tous les internautes, que les polices que l'on trouve à la fois sur les machines Mac et PC relativement récentes. Cela représente une dizaine de polices communes, et nous verrons au chapitre 3 tout le parti que l'on peut en tirer pour la typographie du web. Un nombre aussi faible est surprenant, car en 1997 Apple et Microsoft avaient enterré la hache de guerre, et depuis les deux firmes auraient pu s'entendre pour que la liste des polices communes soit plus étoffée. La typographie du web ne s'en porterait que mieux.

 
 

Ces regrets exprimés, on peut se dire que dix polices, c'est mieux que rien. Malheureusement, beaucoup de concepteurs de sites agissent comme si la typographie du web ne disposait que de deux polices : l'une avec empattements, l'autre sans -- le Times et l'Arial. Ce préjugé tire son origine des faits suivants :

 
 
    si aucune police n'est précisée dans le code HTML, le navigateur utilise la police proportionnelle par défaut. Si, comme c'est généralement le cas, l'internaute n'a pas modifié les préférences (Mac) ou les options (PC) de son navigateur, cette police par défaut est une variété de Times ;
  si le concepteur d'une page web ne veut pas que sa page s'affiche en Times, il précise en général la police Arial (ou parfois Helvetica), parce qu'il sait qu'elle a toutes les chances de résider sur la machine de l'internaute.
 
 

Remarque : vous disposez d'une police de plus que vous ne le pensez... mais elle ne sert pratiquement à rien. En remplaçant la balise <p> par la balise <pre>, vous générez du texte écrit en une police à chasse fixe très voisine de Courrier. Cette police a été conçue pour que l'on puisse simuler du listing informatique tel que le produisaient les imprimantes à aiguilles. C'est une possibilité dont on ne se sert plus guère aujourd'hui.

 
 
 Quatrième contrainte : l'internaute est maître chez lui

L'internaute est maître de la fenêtre de son navigateur, et il n'aime pas qu'on lui dispute cette prérogative. Dans les préférences (Mac), ou options (PC), de son navigateur, il peut :

    préciser la nature et la taille de la police proportionnelle par défaut, c'est à dire celle qui est utilisée lorsque le document affiché ne précise rien à ce sujet ;
  demander que la police par défaut remplace celle qui est précisée dans le document original ;
  imposer la couleur de texte et d'arrière plan de son choix ;
  imposer la couleur des liens en fonction de leur état (non visité, activé, visité).

Cependant, peu d'internautes modifient le réglage par défaut de leur navigateur, du moins en ce qui concerne les polices de caractères -- à l'exception des personnes handicapées qui ont des problèmes de vision. En général, le texte s'affichera avec la nature et la taille de police que vous préconiserez -- si la police en question est disponible localement.

 
 Cinquième contrainte : le système informatique

Même si votre ordinateur galope à 2 GHz, il ne peut pas faire plus que ce que lui permet le logiciel d'application -- c'est à dire, en l'occurrence, le navigateur. Ce ne sont pas les spécifications du HTML 4, ou celles des feuilles de style, qui comptent, mais la manière dont les navigateurs les implémentent. Sous cet aspect, la typographie du web n'est pas gâtée.

 

Par exemple, le HTML ne permet de régler ni le crénage (c'est à dire l'accroissement de la distance entre caractères, en sus de ce que prévoit la police), ni l'interlignage (c'est à dire la distance entre les lignes de texte), ni la graisse (c'est à dire l'épaisseur des caractères). Les feuilles de style le permettent, mais seules les versions 4 ou postérieures des navigateurs prennent les feuilles de style en charge, et ce de manière fort incomplète (la version 6 du navigateur de Netscape, disponible depuis novembre 2000, marque sur ce point un net progrès par rapport aux versions antérieures). Les feuilles de style sont donc pour l'instant peu utilisables... et sont effectivement utilisées de façon modérée. Pour la typographie du web, nous en sommes presque toujours réduits à ce que le HTML permet. Nous reviendrons sur ce point au chapitre 5.

 
 

Enfin, tous le moniteurs ne se valent pas : certains affichent les caractères lissés nettement moins bien que d'autres... quoiqu'en dise la publicité !

 
Retour au sommaire
Sommaire
       Chapitre suivant
Chapitre suivant
  Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données  
 

Copyright © CERIG/EFPG 1996-2001