[Webmaster] Les polices dans les pages web

Dernière mise à jour le 20 novembre 2009 à 12:46 par marlalapocket
Publié par sebsauvage

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

Meilleures réponses pour « Les polices dans les pages web » dans :
[Webmaster] Publier facilement une vidéo dans une page web Voir Publier une vidéo dans une page web n'est pas toujours évident: Selon le format (AVI, MPG, MOV...) tout le monde ne possède pas forcément le bon plugin et le bon codec. En revanche, la quasi-totalité des navigateurs possèdent le plugin Flash (SWF)....
[mythes] On peut protéger une page web/une image contre la copie Voir Mythe On peut empêcher la copie d'une page web ou d'une image. On peut empêcher de voir le source d'une page HTML. On peut empêcher la copie d'une vidéo, d'une musique. Réalité FAUX Explications Quelle que soit la nature d'un document (page...
Enregistrer une page web VoirProblème Je n'arrive pas à télécharger une page web. Y a-t-il un paramétrage à faire ? Solution Quand la page web est affichée dans votre navigateur, faites "Fichier" et choisissez "Enregistrer sous...". Merci à sebsauvage sur le forum pour...
Windows - Problème de fond blanc dans les pages web VoirSi les pages web que vous visitez ne s'affichent plus correctement (il n'y a plus de couleur de fond, tout est blanc), comme sur cette image : Pour résoudre ce problème, suivre les étapes suivantes : Allez dans le "Panneau de...
Collection CommentÇaMarche.net