En tant que webmestre, on se pose très fréquemment la question de savoir quelles polices utiliser pour quel cas, à quel moment, à quel endroit, etc.
Et il est assez dur d'y répondre, surtout sachant que lorsqu'un internaute ne possède pas une police donnée, son navigateur la remplacera par une autre, standard, qui risque fort de ne pas convenir du tout, voir même de dénaturer tout le design.
Après m'être longtemps posé ces questions, et à force de trainer de ci de la sur le web, j'ai finis par trouver quelques réponses.

Classes de Polices

Commençons par le commencement.
Il existe 5 classes de polices, définies par le W3C.
  • Serif (avec empattements)
  • Sans-Serif (sans empattements)
  • Monospace (taille de tous les caractères identique)
  • Cursive (manuscrite)
  • Fantasy (fantaisiste, décorative)
Chaque classe possède avantages et inconvénients et bien les comprendre peut être un réel avantage.
Il faut également noter que les navigateurs récents sont en mesure de comprendre les classes de polices, et de les interpréter.
Par exemple, voici des propriétés CSS qui afficheront toutes des polices différentes :
Code (CSS) body
{
font-family: Serif;
font-family: Sans-Serif;
font-family: Monospace;
font-family: Cursive;
font-family: Fantasy;
}
Evidement, si vous essayez l'exemple ci dessus, la dernière propriété annulera toutes les autres, donc il faut les essayer en les retirant toutes pour n'en laisser qu'une seule à chaque fois.
Faites également attention à ne pas utiliser de guillemets pour une classe.

Pour quelle utilisation ?

Plusieurs, les deux principales, à mon avis sont les suivantes.
Premièrement, afin de gagner du temps et de ne pas avoir à s'inquiéter de la présence de la police utilisée sur les ordinateurs des internautes.
Parfois ca peut également se retourner contre nous étant donné qu'on peut difficilement prévoir le résultat en terme de marge et décalage.
Deuxièmement, la plus fréquente, utiliser les classes avec des polices pour limiter la casse au cas ou l'internaute ne possède pas la police.

Explications :
La propriété CSS "font-family" peut être utilisée pour spécifier plusieurs polices.
Dans ce cas, le navigateur tentera d'utiliser la première en partant de la gauche, puis - s'il ne parvient pas à la trouver sur l'ordinateur - la seconde, puis la troisième, etc.
Ceci jusqu'à la dernière (tout à droite, donc).
Et dans ce cas, utiliser une classe en tout dernier permet donc d'au moins afficher une police proche de ce qu'on veut. Ou en tout cas, aussi proche que possible.

Exemple :
Code (CSS) font-family: Verdana, Sans-Serif;
Dans ce cas, la police Verdana sera affiché, ou - le cas échéant - la police de type Sans-Serif par défaut du navigateur.
Donc ca permet de garder une certaine cohérence dans notre fonte.

A propos, qu'elle est la différence entre Fonte et Police ?

L'article dédié de Wikipédia en fait une bonne description, bien que succincte.
Pour faire court, la fonte comprend police, graisse, taille, style, etc.

Et sur internet, quelles sont les polices les plus fréquentes ?

Il serait un peu difficile et surtout illusoire de constituer une liste complète, ou ne serait-ce que valable sur le long terme.
Cependant, certains ont établis des statistiques à ce sujet.
C'est bien sur à prendre avec recul, mais cela permet malgré tout de se faire une petit idée.

Je ne recopierais pas ces listes ici (mais je vous donnerais le lien à la fin ;)), mais je donnerais plutôt des conseils généraux à ce sujet.
A savoir :
  • Les polices Windows sont évidement très fréquemment retrouvées.
  • Les polices Mac également (surtout qu'on les retrouve souvent sur windows, et inversement).
  • Les Sans-Serif redeviennent petit à petit la mode.

Plus précisément (mais aussi bien plus subjectivement), si je devais établir une liste des polices qui tout webmestre peut utiliser pour un site, voici quels seraient mes choix :
  • Verdana
  • Trebuchet MS
  • Arial (et dérivés)
  • Times New Roman
  • Lucida (et dérivés)
  • Tahoma
  • Georgia
  • Helvetica
  • Courier (et dérivés)
  • Impact
Il s'agit ici non pas juste de polices fréquentes sur les systèmes, mais également de polices facilement lisible, et qui peut par conséquent être utiliser pour le contenu principal d'un site.

Pour en revenir aux classes, qu'elle est leur intérêt à chacune ?

Pour ce qui est des Serif et Sans-Serif, il n'y a pas grande différence dans l'utilisation qu'on peut en faire. C'est au final surtout une histoire d'esthétique, à vous de voir selon vos préférences.
Les Monospaces, quand à elles, ont l'énorme avantage de toujours prendre la même place.
C'est à dire qu'avec une police classique, certains caractères sont plus larges que d'autres.
Par exemple un i prendra moins de place qu'un m.
Et bien avec une police Monospace, chaque caractère fait précisément la même largeur.
Alors c'est sur, parfois ca n'est pas très joli. Mais dans certaines situations, c'est bien pratique.
Par exemple, si vous avez besoin de prévoir au pixel près la largeur que doit atteindre un champ de texte, avec une police Monospace vous pouvez.
Il vous suffit de multiplier par le nombre de caractère la largeur d'un caractère de votre police (vous faites un test, un imprim. écran, puis vous mesurez avec un logiciel de retouche photo), et vous avez la taille en pixel de votre chaine.
Ca peut être réellement pratique parfois.
Ou encore pour que verticalement, chaque caractère soit aligné avec celui qui est au dessus et en dessous.
Plus concrètement, on utilise souvent ce genre de police sur internet pour les champs de type "code" des forums.
Mais pas que ! Rien ne vous empêche d'utiliser ces polices pour le corps de votre page (son contenu).
Et pour les Cursives et Fantasystes, leur intérêt sur le web est plutôt limité.
Ce genre de police peut très vite devenir illisible et agacer fortement les internautes.
Par conséquence, mieux vaut les réserver aux titres, ou aux boutons de menu (et encore), ou pour des mots uniques, surtout pas pour de longues phrases, ou encore pire, pour le corps de page.

Conclusion

Finalement, les polices sur le web n'ont plus aucun secrets pour vous. ^^
Je vous met les liens qui m'ont aidés à rédiger cet article :
  • Un sondage sur la présence des polices selon les OS.
  • Un article qui traite justement du choix des polices en matière de webdesign.
  • Une autre page sur les polices et le web.

Ce site ainsi que tout son contenu est sous licence Creative Commons.
XHTML 1.0 | CSS 2.0 | Contact | Statistiques | Firefox | Fam³