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 ressources typographiques du HTML (2)
      J.C.Sohm        Révision : 20 novembre 2001
 
LA TYPOGRAPHIE du WEB
3- Les ressources typographiques du HTML (suite)
 
 L'utilisation des polices communes
En fait, les polices communes autres qu'Arial et Times peuvent rendre divers services :
 
    rendre plus lisibles les caractères de petite taille, comme le montre le tableau III. Ce point est important car à la faible résolution de l'écran du moniteur (toujours voisine de 72 dpi), les petits caractères sont souvent à peine lisibles. On remarque à l'examen du tableau III que les polices Arial Black et Impact s'affichent de façon fort laide dans les petites tailles -- du moins à notre avis ;
  améliorer l'aspect des titres, pour lesquels les polices sans empattements semblent préférables, comme le montre le tableau IV. On fera attention au comportement particulier de la police Georgia dans l'affichage des chiffres ;
  fournir une police fantaisie (Comic Sans MS).
 
 
Police Exemple
(texte de taille 1)
Vu sur PC (IE5)
(image)
Vu sur Mac (NS4)
(image)
Arial AGJMWY
agjmwy25
Arial Black AGJMWY
agjmwy25
Comic Sans MS AGJMWY
agjmwy25
Courier New AGJMWY
agjmwy25
Georgia AGJMWY
agjmwy25
Impact AGJMWY
agjmwy25
Symbol AGJMWY
agjmwy25
Times New Roman AGJMWY
agjmwy25
Trebuchet MS AGJMWY
agjmwy25
Verdana AGJMWY
agjmwy25
Webdings AGJMWY
agjmwy25
Tableau III : aspect des polices communes petits caractères)
 
 
Police Exemple
(texte de taille 5)
Vu sur PC (IE5)
(image)
Vu sur Mac (NS4)
(image)
Arial AGJMWY
agjmwy25
Arial Black AGJMWY
agjmwy25
Comic Sans AGJMWY
agjmwy25
Courier New AGJMWY
agjmwy25
Georgia AGJMWY
agjmwy25
Impact AGJMWY
agjmwy25
Symbol AGJMWY
agjmwy25
Times
New Roman
AGJMWY
agjmwy25
Trebuchet MS AGJMWY
agjmwy25
Verdana AGJMWY
agjmwy25
Webdings AGJMWY
agjmwy25
Tableau IV : aspect des polices communes (grands caractères)
 
  Quelques auteurs font les recommandations suivantes :  
 
    pour afficher le texte dans une police avec empattements, il suffit... de ne pas utiliser l'attribut FACE dans la balise FONT : par défaut, le navigateur utilisera Times New Roman. Les internautes modifient très rarement la nature de la police par défaut dans les préférences (Mac) ou options (PC) de leur navigateur.
  pour afficher le texte dans une police sans empattements, il suffit de préciser "FACE=Arial". Pour plus de sécurité, il est souvent conseillé d'écrire FACE="Arial, Helvetica" dans la balise FONT, car les anciennes machines d'Apple sont plus souvent dotées de la seconde police que de la première ;
  la police Verdana a été conçue pour être facilement lisible sur l'écran d'un moniteur. La police Tahoma, d'aspect voisin, possède la même propriété. Pour être plus sûr d'obtenir le résultat escompté, vous pouvez écrire FACE="Verdana, Tahoma" dans la balise FONT.
 
 
 La couleur des caractères

Pour comparer les mérites respectifs de l'imprimé et de l'affiché en matière de couleur, il faut considérer les trois points suivants :

 
    l'espace colorimétrique disponible ;
  le nombre de couleurs utilisables dans cet espace ;
  le contraste, et le rendu des couleurs.
 
 

L'espace colorimétrique. L'affiché et l'imprimé ont, bien entendu, des espaces colorimétriques distincts. L'offset classique, qui utilise les quatre couleurs CMJN, est assez limité dans la reproduction des teintes vertes (et oranges). On peut pallier ce défaut en utilisant des presses possédant plus de quatre groupes d'impression.
   Le domaine colorimétrique d'un moniteur est généralement considéré comme plus étendu que celui de l'offset classique, en particulier dans le vert. Il est déterminé par les caractéristiques des luminophores émettant les trois couleurs RVB de base.

 
 

Le nombre de couleurs théoriquement disponible en offset dépend de la dpi de l'imageuse, et de la lpi utilisée dans la presse. Exemple classique : pour une dpi de 2400 et une lpi de 150, la taille du point peut prendre 16x16=256 valeurs différentes (2400/150=16). On dispose donc de 256 valeurs possibles pour chaque couleur CMJN, ce qui est largement supérieur à ce que l'œil peut distinguer. En pratique, le nombre de couleurs réellement disponibles dépend de la qualité de la presse et de l'habileté de son conducteur.
   Sur l'écran d'un moniteur, on peut en théorie afficher 16 millions de couleurs différentes. En pratique, tout dépend de la manière dont est équipé l'internaute en matière de carte graphique. En analysant le trafic des sites, on découvre la situation suivante chez les usagers du web :

 
 
    une bonne moitié possède une carte graphique réglée sur une profondeur de couleur de 2 octets, ce qui permet d'afficher 32.768 couleurs distinctes ;
  un bon tiers des internautes possède une carte graphique réglée sur une profondeur de couleur de 3 ou 4 octets. Avec 3 octets, on peut afficher 16.777.216 couleurs distinctes. Le quatrième octet permet de gérer la transparence (canal alpha), mais les navigateurs ne la prennent pas en charge ;
  le nombre de ceux dont la carte graphique est réglée sur une profondeur de couleur de un octet est inférieur à 10 % et ne cesse de décroître. Avec un octet, on peut créer une palette de 256 couleurs au maximum. La tendance récente consiste donc à ne plus tenir compte de ces internautes sous-équipés, et à jeter le "cube de Netscape" aux orties.
 
 

En pratique, sur le web, vous pouvez spécifier 16 millions de couleurs, et 90 % au moins des internautes en verra 32K ou plus. Mais il y a autant de façons d'afficher la même couleur qu'il y a d'ordinateurs. L'origine du moniteur, la manière dont on le règle, la correction logicielle du gamma, sont autant de facteurs qui influent sur la restitution des couleurs, et qui varient d'une machine à l'autre. La gestion de la couleur sur le web apparait actuellement comme un problème insoluble, même si quelques éditeurs de logiciel proposent des palliatifs. La seule défense consiste à soigner les contrastes au moins autant que les couleurs elles-mêmes, pour assurer une certaine homogénéité de reproduction des pages web entre les différentes machines clientes.

 
 

Le contraste de l'affiché est supérieur à celui de l'imprimé, ce que l'on peut expliquer par le fait que le papier est un système dispersif, alors que le moniteur d'un ordinateur est un système émissif. Enfin -- mais ceci est assez subjectif -- les couleurs sont plus vives et plus belles dans le second cas que dans le premier (cela dépend quelque peu de la qualité du matériel !).

 
 

Quoiqu'il en soit, la facilité dont on dispose pour colorer les caractères est beaucoup plus grande sur le web que sur l'imprimé. A la limite, on peut attribuer une couleur différente à chaque caractère. IL FALLAIT Y PENSER ! Tout de même, il ne faudrait pas en abuser...

 
 
 Les ressources typographiques du HTML

1- La nature de la police. On peut préciser la police de son choix. Si le navigateur ne trouve pas sur place la police indiquée, il utilise par défaut la police Times (Mac), ou la police Times New Roman (PC) -- à moins qu'il n'ait été configuré autrement. 

 

2- La taille de la police. Le HTML ne vous offre que sept choix, qui sont : 8 pts (taille 1), 10 pts (taille 2), 12 pts (taille 3), 14 pts (taille 4), 18 pts (taille 5), 24 pts (taille 6), et 36 pts (taille 7) :

 
Taille 1  Taille 2  Taille 3 Taille 4  Taille 5  Taille 6  Taille 7
  Pour un typographe chevronné, il n'y a pas là de quoi être satisfait ! On notera que dans les navigateurs dont on n'a pas modifié la configuration, la taille par défaut vaut 12 pts (taille 3).  
 

3- La couleur du texte. Une page web étant destinée à être affichée sur l'écran d'un moniteur, les indications de couleur utilisent le système RVB. Chaque coordonnée de couleur peut prendre 256 valeurs, ce qui conduit à plus de 16 millions de couleurs. La couleur qui s'affiche réellement sur l'écran de l'internaute dépend de la carte graphique dont est équipée sa machine, et du réglage de ladite carte.

 
 

4- Le style du texte. Le HTML possède les balises qui permettent d'attribuer à une fraction de texte -- en plus du style normal -- les deux styles particuliers suivants : italique, et gras. Le style gras italique s'obtient en emboîtant les balises précédentes. Pour des raisons historiques, on dispose même de plusieurs balises différentes pour obtenir chacun de ces styles.

 
 

5- Les effets. Le HTML possède les balises qui permettent les quatre effets suivants : souligné, barré, exposant, indice. On notera que les effets "indice" et "exposant" sont réglables, mais que le navigateur de Netscape ne tient compte de ce petit perfectionnement que dans sa dernière version :

 
 
 A1  A2  A3    B1  B2  B3 
 
  On notera que l'effet de clignotement n'a jamais été implémenté dans Internet Explorer, et qu'il a disparu dans la version 6 de Netscape :  
 
 Clignotant ! 
 
  Aucun regret !  
Chapitre précédent
Début chapitre
       Retour au sommaire
Retour au sommaire
       Chapitre suivant
 Chapitre suivant 
  Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données  
 

Copyright © CERIG/EFPG 1996-2000