Quelles fontes utiliser sur le Web ?

samedi 14 novembre 2009, par Florent V.

Si vous n’êtes pas un web­de­signer pro­fes­sionnel, vous vous demandez sans doute quelles polices de carac­tères sont uti­li­sables sur le Web. Peut-​​on uti­liser une fonte per­son­na­lisée ? Quelles sont les prin­ci­pales familles de fontes génériques ?

Vocabulaire : polices de caractères et fontes

À l’origine, une fonte de carac­tères (on dit com­mu­nément fonte, et en anglais font) est une repré­sen­tation d’un alphabet ayant un corps (c’est-à-dire une taille) donné(e), et une graisse (normal, gras…) donnée. Hel­vetica Bold Italic 12pt est une fonte, par exemple.

Une police de carac­tères, aussi appelée police d’écriture, ras­semble l’ensemble des fontes d’une même famille. Hel­vetica, Arial ou Times sont des polices de caractères.

Peut-​​on utiliser n’importe quelle fonte sur un site Web ?

La réponse à cette question est simple : en théorie oui, en pra­tique non pas du tout, mais ça com­mence à être pos­sible, et ça sera bientôt assez lar­gement pos­sible, sauf si ça foire, donc plutôt non mais en fait oui, faut voir.

Simple, non ?

Pour dire les choses un peu plus clai­rement : les méca­nismes pour uti­liser une fonte per­son­na­lisée sur un site web existent. Ils uti­lisent la règle CSS 3 @font-face. Mais aujourd’hui ils ne sont pas encore lar­gement uti­li­sables, et il n’y aucune assu­rance qu’ils deviennent lar­gement uti­li­sables bientôt.

Lisez l’article indiqué dans le précédent paragraphe pour les détails.

En attendant, la logique de l’utilisation des polices de carac­tères sur un site web est la sui­vante : on va dire au navi­gateur d’utiliser une fonte qui est pré­sente sur l’ordinateur de l’utilisateur. Ou plutôt, on va lui demander d’utiliser une police de carac­tères précise en espérant qu’elle sera dis­po­nible sur l’ordinateur de l’utilisateur, et sinon d’en essayer une deuxième, voire une troi­sième et une qua­trième, et enfin si rien ne va plus le navi­gateur devra uti­liser une police « générique ».

En CSS, cela se présente ainsi :

  1. font-family: "Choix 1", choix2, "Choix 3", générique;

On appelle cette accu­mu­lation de polices par priorité décrois­sante une col­lection de polices ou col­lection de fontes (en anglais : font stack). Le nombre de polices indi­quées est libre, il peut aller de zéro à plu­sieurs dizaines si on le sou­haite — mais ne chargez pas trop vos collections !

Au sujet de la syntaxe uti­lisée : les dif­fé­rentes polices sont séparées par des vir­gules, et les noms de police sont entre guillemets droits (ou éven­tuel­lement entre apos­trophes droites) lorsqu’ils contiennent des espaces.

Voici un exemple concret :

  1. body {
  2.     font-family: Arial, Helvetica, sans-serif;
  3. }

Le navi­gateur va d’abord chercher à uti­liser de l’Arial, puis de l’Helvetica si Arial n’est pas dis­po­nible, et enfin il va chercher quelle police cor­respond à la générique sans-serif.

Quelles sont les polices géné­riques ? Eh bien, elles dépendent de la confi­gu­ration du navi­gateur et du système d’exploitation.

Des collections de polices génériques

Le pro­blème du méca­nisme ci-​​dessus, c’est que si on choisit mal les polices de notre col­lection, on peut se retrouver avec deux polices très dif­fé­rentes chez deux uti­li­sa­teurs dif­fé­rents. Il faut donc res­pecter trois principes :

  • Le design ne doit pas reposer sur les épaules d’une police en par­ti­culier. Vous devez tester vos pages en agran­dissant la taille du texte, et vous assurer que le rendu sera correct. Pas for­cément idéal, mais correct (mise en page qui n’explose pas com­plè­tement, contenus qui ne sont pas cachés ou recou­verts les uns par les autres).
    La clé pour y arriver est de s’assurer que tous les éléments qui contiennent du texte ou presque sont exten­sibles en hauteur. N’utilisez la propriété height que lorsque c’est réel­lement néces­saire, et pas par simple commodité. ;)
  • Les polices placées dans une col­lection doivent être proches non seulement par leur style, mais aussi par leur taille, la largeur relative des carac­tères, etc. Sachez que pour un corps donné (par exemple font-size: 12px;), deux polices dif­fé­rentes peuvent avoir une taille variable et occuper un espace variable !
    Ainsi, placer Arial et Verdana dans une même col­lection est une erreur : Verdana est plus haute et surtout beaucoup plus large. Par contre, on sub­stitue faci­lement Arial à Tre­buchet, bien que le style d’Arial soit sen­si­blement différent.
  • On uti­lisera en priorité des fontes popu­laires, répandues sur les ordi­na­teurs des uti­li­sa­teurs. Le plus souvent, il s’agira de polices ins­tallées par défaut avec les sys­tèmes d’exploitation, ou ins­tallées avec cer­tains logi­ciels populaires.

Détailler ce troi­sième et dernier principe serait fas­ti­dieux. Sachez juste que les fontes que nous vous pro­posons ci-​​dessous ont été établies grâce aux cri­tères suivants :

  1. obser­vation et com­pa­raison, et tests lorsque c’était pos­sible ;
  2. données tirées du CSS Font Sampler and Survey (code​style​.org) ;
  3. modeste expé­rience de l’auteur. Elles ne sont sans doute pas par­faites, mais les voici :

Polices à empattements (serif)

  1. font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
  2. font-family: Georgia, "DejaVu Serif", Norasi, serif;

Polices sans empattements (sans-​​serif)

  1. font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  2. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  3. font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
  4. font-family: Tahoma, Geneva, Kalimati, sans-serif;
  5. font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  6. font-family: Impact, "Arial Black", sans-serif;

Polices à chasse fixe (monospace)

  1. font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
  2. font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Res­sources
http://www.w3.org/TR/CSS21/fonts.ht...
http://web.covertprestige.info/test...
http://unitinteractive.com/blog/200...

Cet article a été publié le 2 juillet 2009 sur le site alsa­création