Rapport entre les unités relatives em et ex

Florens Verschelde

À 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.

Série de tests

La série de tests que voici permet de visualiser le rapport, pour une fonte donnée, entre em et ex. La hauteur d'un em ne devrait pas varier d'une fonte à l'autre, contrairement à celle d'un ex.

Les blocs bleus et rouges ci-dessous auront la même taille si la valeur de ex pour la fonte testée est de 0.5em.

font-size: 0.8em

Verdana
10em 20ex

Arial
10em 20ex

Trebuchet MS
10em 20ex

Times New Roman
10em 20ex

font-size: 1em

Verdana
10em 20ex

Arial
10em 20ex

Trebuchet MS
10em 20ex

Times New Roman
10em 20ex

font-size: 1.2em

Verdana
10em 20ex

Arial
10em 20ex

Trebuchet MS
10em 20ex

Times New Roman
10em 20ex

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.