Adapter la taille des polices de caractères selon les navigateurs [Web Design]

[niveau: expert]

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.