Le Web a sa propre typographie

Le système informatique
cuy copyleft
  See You Why?  

 


Chapitre pr�c�dent
La typographie et le HTML (03)
        Retour au sommaire
Sommaire (00)
        Chapitre suivant
Les feuilles de style (05)

 Introduction : le syst�me n'est pas indiff�rent

En affichant la m�me page web sur l'�cran d'un Mac et sur celui d'un PC, on constate en g�n�ral que le texte appara�t plus flou, que les caract�res sont plus petits, et que les couleurs sont plus claires, sur le premier que sur le second. La plate-forme joue donc un r�le notable dans la reproduction de la typographie d'une page web.

 

En affichant la m�me page web sur l'�cran d'un ordinateur portable et sur celui d'une tour avec écran CRT d'une machine de bureau (les deux ordinateurs utilisant le m�me syst�me d'exploitation), on constate que les caract�res sont un peu plus nets sur le premier, et les couleurs beaucoup plus vives sur le second. La technologie du moniteur joue donc �galement un r�le dans la reproduction de la typographie d'une page web.

 
 

En affichant la m�me page web sur les moniteurs de deux ordinateurs de bureau utilisant le m�me syst�me d'exploitation, on peut constater des diff�rences importantes dans le rendu de la couleur. Le r�glage du gamma par voie logicielle joue un r�le important dans la reproduction de la couleur, et donc de la typographie lorsque le texte et/ou le fond sont color�s.

 
 

Enfin, le navigateur peut �galement jouer un r�le dans l'affichage du texte. Certains sites ont une bien meilleure typographie quand ils sont affich�s gr�ce � une version r�cente du navigateur de Netscape. C'est le probl�me des polices dynamiques.

 
  Cela nous am�ne � examiner tour � tour :  
 
le lissage des caract�res sur Mac, puis sur PC ;
  le passage du point au pixel ;
  la gestion de la couleur sur le web ;
  les polices dynamiques.
 
 
 Le lissage des caract�res sur le Mac : ATM

Le PC de 1986 affichait des caract�res ANSI dans une seule taille, avec une seule chasse et ne repr�sentait pas la police choisie parmi un nombre incroyable de polices (5 maximum). Le tout �tait affich� sur l��cran en orange du plus bel effet. Dur de rester des heures devant l��cran !

Le syst�me d'exploitation du Mac a comport� tr�s vite l'utilitaire ATM (Adobe Type Manager). On y acc�dait via le menu pomme, � la rubrique "Tableaux de bord".

Aujourd�hui, le lissage est directement effectu� par les syst�mes d�exploitation Windows XP et sous Mac OSX et leurs successeurs. Adobe Type Manager n�est donc plus n�cessaire.

 

Dans son r�glage par d�faut, ATM lisse les polices PostScript � l'�cran, quelle que soit leur taille. Pour supprimer ce lissage ou le r�tablir, il suffit d'agir sur la case � cocher intitul�e "Disable Smoothing at Screen Font Point Sizes" (figure 1). L'op�ration ne n�cessite pas le red�marrage de la machine, ce qui est fort commode.

 
Adobe Type Manager Figure 1 : l'utilitaire ATM du Mac
 

Sur le Mac, les navigateurs utilisent par d�faut la police Times comme police proportionnelle. Comme il s'agit d'une police PostScript, cela donne un aspect un peu flou au texte affich� par les navigateurs sur le Mac -- lorsqu'on ne modifie pas les r�glages d'origine d'ATM et/ou des navigateurs. Si l'on aime, tant mieux. Si l'on n'aime pas, en quelques clics de souris, on supprime l'effet.

 
 

Dans la liste des polices communes Mac/PC (chapitre 3), seul Symbol est une police PostScript sur le Mac ; la police Times New Roman ne l'est pas. Par d�faut, les navigateurs affichent en Times, qui est une police PostScript.

 
 
 Le lissage des caract�res sur PC

Le syst�me d'exploitation du PC ne comporte pas ATM. Le lissage �ventuel des caract�res affich�s � l'�cran est r�gl� par le syst�me d'exploitation Windows. Sous Windows XP, un clic droit sur le bureau ouvre un menu contextuel dans lequel on choisit "Propri�t�s", La boite de dialogue "Propri�t�s de Affichage" appara�t : on choisit l'onglet "Apparence", puis l'onglet "Effets", et enfin on fait son choix pour l'option "Utiliser la méthode suivante pour lisser les polices d'écran" (figure 2). En regardant le nouvel aspect du bureau, on peut avoir un coup au c�ur : tout d�pend du moniteur que l'on poss�de !

Propri�t� de l'affichage Figure 2 : lissage des polices sur PC,
Windows 98
Propri�t� de l'affichage Figure 2 : lissage des polices sur PC,
Windows XP sp. 2
 

Lors de son affichage � l'�cran, le texte n'est liss� que si la taille des caract�res est assez grande. Le tableau V pr�cise ce point dans le cas des polices communes Mac/PC, et pour les tailles permises par le HTML. Par d�faut, les navigateurs utilisent Times New Roman comme police proportionnelle sur PC.
 

 
Police Liss�e par indows si :
Arial taille > 3
Arial Black taille > 3
Comic Sans MS taille > 2
Courier New taille > 6
Georgia taille > 3
Impact taille > 4
Symbol taille > 3
Times New Roman taille > 3
Trebuchet MS taille > 3
Verdana taille > 3
Webdings taille > 5
Tableau V : lissage des polices sur l'�cran d'un PC
 
 Du point au pixel

Depuis toujours, même avant Gutemberg, le point était une unité de mesure typographique qui correspond à 1/72 de pouce.
Pour tous aussi, les écrans informatiques (les photos numériques et les téléviseurs à écran numériques) sont définis par des points élémentaires (pouvant chacun prendre une couleur propre), appelés 'pixels' pour 'picture element'.
Mac (Appple) a décidé de travailler avec des écrans d'une résolution de 72 pixels par pouce ; Windows a préféré travaillé avec une résolution différence (plus précise) de 96 pixels par pouce. Ces décisions ont amené les confusions suivantes :

Chez Mac, 1 point = 1/72 de 72 pixels, soit  1 pixel ;
chez Windows, 1 point = 1/72 de 96 pixels, soit 1,33 pixel.

Un caractère d'une police d'un 'corps' de 10, apparaitra :

chez Mac, sur 10 points donc 10 pixels ;
chez Windows, sur 10 points donc 13,3 pixels.

Juste pour vérifier si nous l'avons compris : un navigateur qui tombe sur l'indication <FONT size="4"> la convertit toujours en 12 points - peu importe s'il tourne sous Mac ou sous Windows. Jusqu'à là, pas de problème, tous les ordinateurs sont d'accord.
Or, avant d'afficher ces 12 points, le navigateur est obligé de les convertir encore une fois, c'est-à-dire en pixels. Il "interroge" donc son ordinateur, à combien de pixels correspondent ces 12 points. Un Mac, en ce moment, l'informe qu'un point égale un pixel - il a donc affaire à 12 points = 12 pixels. Un ordinateur sous Windows, par contre, répond à son navigateur qu'un point égale 1,3 pixels : les 12 points de la taille "4" égalent, par conséquent, 12 x 1,3 pixels, donc 15,6 ou, arrondis, 16 pixels.

Le Mac et le PC n'affichent donc pas les caract�res de m�me taille (exprim�e en points) avec les m�mes dimensions. Ainsi :

 
sur le Mac, la r�gle est "un point = un pixel" ;
 
  sur le PC, le r�glage par d�faut est "un point = 4/3 pixel". C'est la raison pour laquelle certains auteurs �crivent que le Mac a une dpi de 72 et le PC une dpi de 96. Tout d�pend de la d�finition du "dot" de dpi (pixel ou point).
 
 
 

Le m�me texte appara�t donc plus petit sur Mac que sur PC, comme le montrent les tableaux II, III et IV du chapitre 3.

 
 

En fait, la situation r�elle est encore un peu plus complexe, et d�pend du type de moniteur utilis�. � l'aide d'une loupe de grossissement moyen, on peut faire les observations suivantes :

 
 
    pour les ordinateurs portables, et pour les écrans plats (LCD pour 'liquid crystal display') qui sont �quip�s d'�crans � cristaux liquides, l'affichage est effectivement constitu� de petits carr�s adjacents (un carr� = un pixel, � moins que l'on ne r�gle la r�solution � une valeur inf�rieure). Chaque carr� est divis� en trois bandes verticales, qui constituent les trois luminophores (un rouge, un vert et un bleu) ;
 
  pour les autres ordinateurs, qui sont encore �quip�s d'�crans � rayon cathodique (CRT : Cathode Ray Tube), l'unit� d'affichage est la triade, groupe de trois luminophores dont la forme (ronde, carr�e, rectangulaire, etc.) varie d'un constructeur � l'autre. Contrairement au cas pr�c�dent, les triades ne sont pas adjacentes, et les pixels ne sont pas mat�rialis�s. La distance moyenne entre les triades (pitch) est de l'ordre du quart de millim�tre.
 
 
 

Sur un �cran CRT, afficher les pixels � partir des luminophores implique un s�rieux lissage de la part du syst�me. Il faut en effet simuler des pixels, c'est � dire des carr�s d'un tiers de millim�tre de c�t�, distribu�s dans deux directions rectangulaires, � l'aide de luminophores distants d'un quart de millim�tre, distribu�s suivant un dessin en nid d'abeille. L'op�ration est effectu�e par le processeur de la carte graphique (le ramdac). Il en r�sulte que les caract�res n'apparaissent jamais parfaitement nets, quelle que soit la plate-forme et sa configuration. Bien entendu, le passage des luminophores aux pixels n'arrange pas l'aspect des caract�res, on s'en doute ! Comme les luminophores n'ont pas la m�me forme sur tous les �crans, et que le motif de leur r�p�tition varie d'un fabricant � l'autre, un oeil exerc� d�c�lera que les m�mes caract�res s'affichent de mani�re l�g�rement diff�rente sur des moniteurs de marques distinctes. Les plus mauvais r�sultats sont obtenus avec les moniteurs CRT dont les luminophores ont la forme de bandes verticales, moniteurs pour lesquels il est parfois pr�f�rable de d�sactiver le lissage des caract�res.

 
 
 Le probl�me de la couleur

Les couleurs affichées sur votre écran peuvent se régler. La dynamique des gris, c'est le nombre de gris que vous pouvez discerner sur votre �cran. Le petit test suivant vous permettra de juger de la qualité de votre écran... et de celle de vos yeux. Vous devriez voir ci-dessous une image pr�sentant 16 rectangles de gris diff�rents, du noir pur � gauche au blanc pur � droite. Les connaisseurs retrouveront la notation hexadécimale des couleurs. Si votre �cran est correctement calibr�, vous devez distinguer les 16 rectangles, et le noir et le blanc doivent vous para�tre purs (noir profond et blanc franc) :
 

                               
 000000  111111  222222  333333  444444  555555  666666  777777  888888  999999  aaaaaa  bbbbbb  cccccc  dddddd  eeeeee  ff ff ff 

Les yeux mieux aiguisés et les écrans plus précis devraient encore distinguer les nuances de gris plus fines, nuances entre deux valeurs consécutives du tableau ci-dessus, not�es sur fond jaune... si vous n'observez pas ces nuances, ne courez pas chez votre revendeur d'ordinateur, mais une éventuelle visite chez votre opticien ou ophtalmologue pourrait peut-être vous aider :
 

                                   
 666666  676767  686868  696969  6a6a6a  6b6b6b  6c6c6c  6d6d6d  6e6e6e  6f6f6f  707070  717171  727272  737373  747474  757575  767676  777777

Les yeux tr�s bien aiguisés et les écrans les plus précis devraient encore distinguer les nuances de gris encore plus fines, nuances entre deux valeurs consécutives du tableau ci-dessus, not�es sur fond jaune... si vous n'observez pas ces nuances, ne courez pas chez votre revendeur d'ordinateur, et une éventuelle visite chez votre opticien ou ophtalmologue ne devrait probablement pas vous aider... seul un nouvel �cran, une nouvelle carte vid�o vous permettrait, mais � quel prix, et � condition d'avoir d'excellents yeux... d'y voir plus clair :
 

               
 6d6d6d  6e6d6d  6d6e6d  6d6d6e  6e6e6d  6e6d6e  6d6e6e  6e6e6e

Les couleurs affich�es par le moniteur d'un Mac sont g�n�ralement plus claires que celles affich�es par le moniteur d'un PC, et cela s'applique aussi bien au texte qu'aux images. La diff�rence provient principalement d'un r�glage diff�rent de la correction du gamma sur les deux plates-formes (le coefficient gamma caract�rise la non-lin�arit� des moniteurs). D'autres facteurs jouent un r�le dans l'affichage de la couleur : le r�glage de la luminosit� et du contraste, l'espace chromatique du moniteur, et les conditions de son emploi.

 

Les couleurs affich�es par le moniteur LCD d'un portable sont plus fades que celles affich�es par le moniteur CRT d'un ordinateur de bureau, le m�me syst�me d'exploitation �tant utilis� dans les deux cas. En d'autres termes, l'espace chromatique du premier moniteur est plus petit que celui du second. Cela tient au fait que les deux moniteurs n'utilisent pas la m�me technologie : cristaux liquides pour le premier, tube � rayonnement cathodique (CRT) pour le second.

 
 
 Les polices dynamiques

Un fichier de police complet p�se typiquement 150 � 300 Ko. Voici quelques exemples, provenant d'un PC : Arial (266 Ko), Courier New (290 Ko), Garamond (181 Ko), Times New Roman (315 Ko). D'o� viennent de pareilles tailles, alors que les caract�res sont d�finis comme des images vectorielles ? Du fait que les grandes polices classiques contiennent les 635 caract�res de la WGL4 (Windows Glyph List 4). Cette liste, qui a �t� �tablie par Microsoft, comporte tous les caract�res utilis�s en Europe occidentale (caract�res accentu�s inclus), plus les caract�res grecs, turcs et cyrilliques. Chaque lettre existe sous forme majuscule et sous forme minuscule, chaque caract�re est repr�sent� dans les quatre styles (normal, italique, gras et gras italique). Enfin, des formules permettent d'affiner localement certaines lettres pour l'affichage dans les grandes tailles. Une police compl�te, c'est un monde !

 

Il est �videmment impensable d'accompagner le t�l�chargement d'une page web — dont on tentait de limiter la taille � 50 Ko, mais qui aujourd'hui atteignent facilement les 500, voire 1000 Ko — de celui d'un ou de plusieurs fichiers de polices pesant chacun plusieurs centaines de Ko. De fait, il est rarissime de voir l'auteur d'une page web proposer aux internautes le t�l�chargement d'une police sp�cifique.

 
 

Bien entendu, on n'utilise jamais qu'un petit sous-ensemble de tout ce que contient une police compl�te. À la transition des XXe et XXIe siècles, plusieurs �diteurs de logiciel ont donc imagin� de ne transmettre avec la page web que les caract�res effectivement utilis�s. Le proc�d� s'appelle "font embedding" ou "dynamic font" en anglais, et "police dynamique" en fran�ais. Bitstream a été l'un des �diteurs de logiciel permettant cette op�ration. Voici un agrandissement d'une police ClearType affiché sur écran LCD (et oui, pour les écrans CRT, chaque point était formé de trois points de chacune des couleurs fondamentales RGB, pour les écrans LCD, chaque point est formé de trois bandes colorées de chacune des couleurs fondamentales RGB.

Et voilà comment le Windows XP en 2001 affichait du texte lissé ou non (attention, la qualité de votre écran peut perturber la visibilité de la différence entre ces deux textes) :

 
 

Windows 7 proposera les mêmes options de lissage de texte que ne le faisait Windows Vista :
"Windows 7 maintains the same defaults as Windows Vista. There are several ways for the user to change the default values for font rendering in Windows 7. For those that want the default rendering to be bi-level, the user interface for this selection is in the performance section of the Control Panel. From the root of the control panel you can access it by selecting System and Security > System > Advanced System Settings > Performance (Settings &). An easier way is to enter Appearance into the start menu search, and then select Adjust the appearance and performance of Windows. The setting that should be changed under the custom option is: Smooth edges of screen fonts, as shown in the figure."
[1]

 
Avertissement de s�curit� (module externe) Figure 3 : paramètres de lissage (Windows Vista, Windows 7)

[1] cf. http://blogs.msdn.com/e7/archive/2009/06/23/engineering-changes-to-cleartype-in-windows-7.aspx


Chapitre pr�c�dent
La typographie et le HTML (03)
        Retour au sommaire
Sommaire (00)
        Chapitre suivant
Les feuilles de style (05)