Comprendre font-size

Posons comme simple exemple :

<span>A</span>  
span { font-size: 16px; }  

J’obtiens alors un « A » d’une hauteur de 11 pixels.

Vous pouvez tester, vous n’obtiendrez peut-être pas la même hauteur mais il est très peu probable qu’elle soit de 16 pixels. Qu’avons nous donc défini avec font-size alors ?

Pour le savoir, tournons nous vers la spécification du W3C, qui nous dit que la taille de police donnée correspond au em square.

The font size corresponds to the em square, a concept used in typography.

Retour aux sources

L’em square trouve son origine dans l’imprimerie où chaque glyphe est gravé sur une pièce en métal appelée caractère typographique.

Photographie d’un caractère typographique
« Garamond type fi-ligature 2 » par Daniel Ullrich, Threedots — Photographie personnelle.
Sous licence CC BY-SA 3.0 via Wikimedia Commons.

Pour permettre à ces pièces d’être alignées correctement dans un composteur, leur hauteur doit être uniforme. Les glyphes peuvent alors également être alignés.

Photographie d’un composteur
« Handsatz » par Wilhei — Travail personnel.
Sous licence CC BY 3.0 via Wikimedia Commons.

Cette hauteur appelée corps est la base du cadratin, unité qui se traduit en anglais par… em (à ne pas confondre avec l’unité em de CSS).

En imprimerie, l’em square correspond donc aux contours de la surface du caractère typographique sur laquelle est gravé le glyphe. Cette dernière est nommée l’épaule.

« Metal type ».
Sous licence Public domain via Wikimedia Commons.

À l’origine, la taille du em était donnée par la largeur du glyphe « M ». Ainsi l’épaule du « M » était carrée, ce qui a donné « em square ».

Retour vers le présent

En informatique, le caractère typographique n’est plus utilisé mais l’em square est encore nécessaire pour permettre d’aligner les glyphes d’une fonte donnée. Il s’agit dans ce cas d’un simple cadre invisible.
Lorsque vous écrivez font-size: 16px; vous définissez sa hauteur à 16px pour tous les glyphes affectés.

Attention toutefois, l’em square n’ayant ici aucune existence physique, rien n’empêche un glyphe d’en déborder. C’est souvent le cas pour les majuscules accentuées par exemple.

Allons plus loin

La taille et position d’un glyphe dans son em square sont données par la police d’écriture utilisée via plusieurs dimensions que nous pouvons découvrir grâce à un logiciel comme FontForge :

« A » affiché par l’éditeur de glyphe de FontForge

L’em square est représenté par le plus grand rectangle. Sa hauteur est de 1000 unités, la police (Source™ Sans Pro) définit donc 1000 UPM.
Le glyphe quant à lui prend 656 unités de haut. Avec un em de 16px on aura donc un « A » haut de 16px × 656 / 1000, soit 10,496px, ce qui correspond aux 11px observés plus haut.

Et voilà, vous savez maintenant comment font-size influe sur la taille de votre texte, félicitations !