font-sizeLe 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 nous zoomons sur un glyphe dont font-size vaut 16px,
il n’est pas évident de retrouver cette valeur dans le rendu :
Ces 16 pixels ont en fait servi à dimensionner l’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 :
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.
Si les glyphes apparaissent si haut dans leur EM box, c’est qu’ils reposent sur leur ligne de base, qui prend en considération un éventuel jambage.
Sur le web, nous utilisons 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 !
Les polices matricielles — également appelées polices bitmap — constituent un cas à part. Les fontes d’une telle police nécessitent un fichier par combinaison de taille, graisse et style, car leurs glyphes sont définis comme des images matricielles. En conséquence, chaque police n’en implémente qu’une sélection, comme Terminus.
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.
.jpg){kind=link}