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)

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/html/typoweb/chap4.htm

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).