Si vous n'êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques?
Vocabulaire: polices de caractères et fontes
À l'origine, une fonte de caractères (on dit communément fonte, et en anglais font) est une représentation d'un alphabet ayant un corps (c'est-à-dire une taille) donné(e), et une graisse (normal, gras…) donnée. Helvetica Bold Italic 12pt est une fonte, par exemple.
Une police de caractères, aussi appelée police d'écriture, rassemble l'ensemble des fontes d'une même famille. Helvetica, 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 pratique non pas du tout, mais ça commence à être possible, et ça sera bientôt assez largement possible, sauf si ça foire, donc plutôt non mais en fait oui, faut voir.
Simple, non?
Pour dire les choses un peu plus clairement: les mécanismes pour utiliser une fonte personnalisée sur un site web existent. Ils utilisent la règle CSS 3 @font-face. Ils sont de plus en plus répandus notamment grâce à Google Web Fonts, mais tous les navigateurs ne l'implémentent pas de la même façon. Lisez l'article indiqué dans le précédent paragraphe pour les détails.
La logique de l'utilisation des polices de caractères sur un site web est la suivante: on va dire au navigateur 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 caractères précise en espérant qu'elle sera disponible sur l'ordinateur de l'utilisateur, et sinon d'en essayer une deuxième, voire une troisième et une quatrième, et enfin si rien ne va plus le navigateur devra utiliser une police «générique».
En CSS, cela se présente ainsi:
font-family: "Choix 1", choix2, "Choix 3", générique;
On appelle cette accumulation de polices par priorité décroissante une collection de polices ou collection de fontes (en anglais: font stack). Le nombre de polices indiquées est libre, il peut aller de zéro à plusieurs dizaines si on le souhaite — mais ne chargez pas trop vos collections!
Au sujet de la syntaxe utilisée: les différentes polices sont séparées par des virgules, et les noms de police sont entre guillemets droits (ou éventuellement entre apostrophes droites) lorsqu'ils contiennent des espaces.
Voici un exemple concret:
body {
font-family: Arial, Helvetica, sans-serif;
}
Le navigateur va d'abord chercher à utiliser de l'Arial, puis de l'Helvetica si Arial n'est pas disponible, et enfin il va chercher quelle police correspond à la générique sans-serif.
Quelles sont les polices génériques? Eh bien, elles dépendent de la configuration du navigateur et du système d'exploitation.
Des collections de polices génériques
Le problème du mécanisme ci-dessus, c'est que si on choisit mal les polices de notre collection, on peut se retrouver avec deux polices très différentes chez deux utilisateurs différents. Il faut donc respecter trois principes:
-
Le design ne doit pas reposer sur les épaules d'une police en particulier. Vous devez tester vos pages en agrandissant la taille du texte, et vous assurer que le rendu sera correct. Pas forcément idéal, mais correct (mise en page qui n'explose pas complètement, contenus qui ne sont pas cachés ou recouverts 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 extensibles en hauteur. N'utilisez la propriété
heightque lorsque c'est réellement nécessaire, et pas par simple commodité. ;) -
Les polices placées dans une collection doivent être proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, etc. Sachez que pour un corps donné (par exemple
font-size: 12px;), deux polices différentes peuvent avoir une taille variable et occuper un espace variable!Ainsi, placer Arial et Verdana dans une même collection est une erreur: Verdana est plus haute et surtout beaucoup plus large. Par contre, on substitue facilement Arial à Trebuchet, bien que le style d'Arial soit sensiblement différent.
-
On utilisera en priorité des fontes populaires, répandues sur les ordinateurs des utilisateurs. Le plus souvent, il s'agira de polices installées par défaut avec les systèmes d'exploitation, ou installées avec certains logiciels populaires.
Détailler ce troisième et dernier principe serait fastidieux. Sachez juste que les fontes que nous vous proposons ci-dessous ont été établies grâce aux critères suivants:
- observation et comparaison, et tests lorsque c'était possible;
- données tirées du CSS font sampler and survey (codestyle.org);
- modeste expérience de l'auteur.
Elles ne sont sans doute pas parfaites, mais les voici:
Polices à empattements (serif)
font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;
Polices à chasse fixe (monospace)
font-family: "Courier New", Courier, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;