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?

C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs.

Dans cet excellent billet, l’auteur nous propose plusieurs polices de caractères:

/* Polices à empattements (serif) */
font-family: Times, "Times New Roman", "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, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Enfin vous pouvez retrouver un tableau très bien fait chez Dustin sur « Web safe and common fonts ».

OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.

Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:

body { font-size: 15px; } /* défini la taille par défaut de tout le texte */

A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.

Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :

Ainsi, notre CSS donnera :

body { font-size: 96%; } /* équivaut à 15px */

Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.