[Webmaster] Les polices dans les pages web

Les limites du web

Quand vous utilisez une police dans une page web, elle ne s'affichera que si l'internaute a la même police installée sur son ordinateur.

• Vous n'avez aucun moyen de forcer l'internaute à télécharger et installer une police, pas même automatiquement.
• Vous n'avez non plus aucune garantie sur les polices présentes sur l'ordinateur de l'internaute.
• Vous n'avez donc aucune garantie sur la manière dont votre page sera rendue dans les navigateurs.

Il faut donc faire "au mieux", c'est à dire spécifier des polices (en espérant qu'elles seront présentes), et spécifier d'autres noms de polices alternative (si possible proches de celle que vous souhaiteriez).

Exemple

Par exemple, vous aimeriez que votre page s'affiche avec la police "Trebuchet MS". Spécifiez alors:

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;


En mettant "Trebuchet MS" en premier, vous signalez que vous souhaitez que la page s'affiche avec cette police.

• Si l'internaute a cette police, elle s'affichera avec.
• Si l'internaute n'a pas cette police, le navigateur essaiera successivement avec chaque police suivante (Verdana, Arial...) jusqu'à en trouver une qu'il possède.

Il suffit de spécifier des polices qui sont graphiquement proches de la police que vous souhaitez utiliser.

Les types par défaut

Il existe 3 types de polices par défaut que tous les navigateurs reconnaissent:

• serif : Police à empattement ("Times New Roman" sous Windows)
• sans-serif : Police bâtons ("Arial" sous Windows)
• monospace : Police à espacement fixe ("Courrier New" sous Windows)

Quand vous spécifiez des polices à utiliser, il est de bon ton de toujours spécifier l'une de ces 3 polices génériques en dernier recours.

Typiquement, comme dans notre exemple ci-dessus:
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

sans-serif (police bâton) est la police qui sera la plus proche de "Trebuchet MS" et permettra (dans le pire des cas), d'avoir une page dont le "look" ne soit pas trop éloigné de ce que vous souhaitiez.

L'aspect des polices par défaut

Chaque système d'exploitation et navigateur interprète différement ces polices par défaut.

• serif : C'est du "Times New Roman" sous Windows, et du "Times" sur Macintosh (qui est différente de celle de Windows).
• sans-serif : C'est de l'"Arial" sous Windows, et de l'"Helvetica" sur Macintosh.
• monospace : "Courrier New" sous Windows, "Courrier" sur Macintosh, et souvent "VeraSans" ou "DejaVuSans" sous Linux.

Voici l'aspect de ces polices sous Windows (dans Internet Explorer):


Même chose sous Windows, mais avec ClearType activé:


Sous MacOS X (dans Safari):


Sous Linux (Ubuntu) (dans Firefox):

Recommandations

Pour les polices à empattement, spécifiez:
"Times New Roman", Times, serif;

Pour les polices bâton:
Verdana, Arial, Helvetica, sans-serif;

(Verdana a une meilleure lisibilité à l'écran qu'Arial, même s'il y a des controverses sur l'utilisation de cette police).

Pour les polices à espacement fixe:
"DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace;

DejaVu et Vera sont des familles de police opensource très lisibles qui permettent (contrairement à l'horrible Courrier) de bien distinguer les 0 des O et les 1 des l.
Elles sont à préférer à Courrier tant que c'est possible.
(Elles sont présentes par défaut dans la plupart des distributions Linux récentes.)
(Tant que c'est possible, évitez la police "Courrier".)

Liens

• Les polices présentes dans l'installation de base de Windows XP.