Comprendre font-size

Le W3C nous informe que font-size indique la hauteur désirée des glyphes de la police.

Un glyphe est la représentation graphique d’un signe typographique. Par exemple « A », « A » et « A » sont trois glyphes différents représentant un seul et même caractère (ce sont des allographes).

Si la hauteur des glyphes dépend de font-size, ce sont toutefois deux valeurs distinctes.

<span style="font-size: 16px;">A<span>

Nos 16 pixels ont en réalité servi à dimensionner l’EM box.

EM box

Attention nous ne parlons pas ici de l’unité CSS. En typographie, l’EM est une unité qui référence la taille (aussi appelée corps) d’une fonte. Chaque glyphe est positionné dans un cadre d’un EM de haut, d’où le terme EM box. Prenons un caractère typographique :

Daniel Ullrich, Threedots [CC BY-SA 3.0]

Son glyphe est gravé sur une surface appelée épaule dont les contours illustrent l’EM box. Le caractère typographique ci-dessus provient d’une fonte de 12 points ; c’est donc la hauteur de son épaule ainsi que la valeur de son EM.

Polices vectorielles

Cependant le web utilise des polices numériques dont les glyphes n’ont ni existence physique, ni dimensions intrinsèques. Au lieu d’être gravés sur un caractère typographique (ou coupés dans une frisquette), ils sont définis comme des images vectorielles dont le canevas est l’EM box.

Pour afficher un tel glyphe il faut donner une valeur à son EM. C’est exactement ce que fait font-size !

Polices matricielles

Les polices matricielles — également appelées polices bitmap — constituent un cas à part. Les fontes d’une telle police nécessitent un fichier par taille, car leurs glyphes sont définis comme des images matricielles. En conséquence, chaque police n’implémente qu’une sélection de fontes. Par exemple Terminus implémente 19 fontes, combinaisons de neuf tailles et trois graisses.

Leur seul cas d’usage sur le web est de les définir comme police par défaut sur les navigateurs qui les supportent. C’est très limité, mais des adeptes existent toujours !

Dans ce cas, le navigateur va devoir piocher dans la liste des fontes disponibles celle qu’il juge le mieux correspondre à notre CSS.