Rapport entre les unités relatives em et ex

À propos des unités em et ex

Ces deux unités définies dans la spécification CSS sont souvent mal comprises.

L'unité em correspond à la hauteur totale d'un caractère. En CSS, elle correspond plus particulièrement à la «taille du texte» définie par la propriété font-size. Pour plus d'explications, on pourra se reporter à l'article suivant: Typographie web: gérer la taille du texte avec les `em` (voir aussi les `em` dans la spécification CSS 2.1 – en anglais).

L'unité ex est moins évidente à manier. Elle correspond à une fraction de la hauteur totale des caractères d'une fonte (police de caractères) donnée. C'est à dire, en CSS, à une fraction de 1em. Quelle fraction exactement? Eh bien, ça va dépendre de la fonte! Pour les fontes qui contiennent des caractères occidentaux (dits parfois «latins»), ex correspond généralement à la hauteur des lettres bas-de-casse les plus simple, comme par exemple le «x» minuscule. On parle parfois de «hauteur d'x» (voire aussi l'unité `ex` dans la spécification CSS 2.1 – en anglais).

Mais, d'une fonte à l'autre, le rapport entre lettres bas-de-casse (minuscules) et capitales (majuscules) n'est pas le même. Les navigateurs sont donc censés extraire des fontes qu'ils affichent l'information sur la «hauteur d'x». Le font-il, et le font-il correctement? C'est ce que nous allons voir.

Résultats

On observe globalement deux types de comportement des navigateurs:

1. ceux qui posent de manière arbitraire que 1ex vaut 0.5em (Internet Explorer, Opera);
2. ceux qui tentent de déterminer la hauteur de l'unité ex en se basant sur les informations contenues par la fonte (Firefox, WebKit).

D'après ces observations, l'emploi de l'unité ex n'est donc pas fiable car inconstant d'un navigateur à l'autre.

On note également que, dans les navigateurs qui implémentent vraiment les ex, les résultats sont légèrement fluctuants. Peut-être un problème dans la méthode de calcul, par exemple un problème d'arrondis.