rem vs px vs em pour les tailles de police

Un site de documentation est livré avec une règle anodine : li { font-size: 0.875em }. Les éléments de liste de premier niveau s’affichent à 14px, exactement comme prévu. Puis quelqu’un imbrique une liste, et les éléments internes s’affichent à 12,25px. Une page de FAQ avec trois niveaux d’imbrication finit par tomber à 10,7px. Personne n’a saisi ces nombres — pour font-size, em se résout par rapport à la taille de police du parent, si bien que chaque niveau d’imbrication multiplie de nouveau par 0,875.

La règle pratique pour les tailles de police : utilisez rem pour presque tout, gardez px pour les détails qui ne doivent pas évoluer avec le texte (bordures, parfois ombres), et réservez em à la rare relation véritablement locale — une icône dimensionnée d’après le texte qui se trouve juste à côté d’elle. rem se résout par rapport à la taille de police racine, il respecte donc le réglage du navigateur du lecteur et ne se cumule jamais. em se cumule à travers l’imbrication, ce qui est exactement le bug de liste ci-dessus. px ignore complètement le réglage du lecteur.

Cet article fait partie de notre guide des échelles typographiques : une fois qu’une échelle a généré les tailles, la question qui reste est de savoir quelle unité les porte dans la feuille de style.

Comment chaque unité se résout-elle réellement ?

• px est fixe : 16px s’affiche à la même taille calculée quelle que soit la préférence de police. Le zoom de la page l’agrandit tout de même — le zoom met tout à l’échelle — mais le réglage de taille de police du navigateur n’a aucun effet sur elle.
• rem (« root em ») se résout par rapport à la taille de police calculée de l’élément racine, qui vaut 16px par défaut et suit le réglage du navigateur du lecteur. 1.5rem fait 24px sur une racine par défaut et 30px sur une racine à 20px — une constante par page, identique à chaque niveau d’imbrication.
• em, appliqué à font-size, se résout par rapport à la taille de police calculée du parent — ce qui en fait une chaîne. 0.875em dans 0.875em dans 0.875em donne 14 → 12,25 → 10,72px. Les trois mêmes niveaux de liste déclarés en 0.875rem s’affichent à 14px à chaque profondeur.

Cet enchaînement est la différence pratique la plus nette entre rem et em, et c’est pourquoi « unités relatives » n’est pas une seule catégorie : l’une est relative à un ancrage stable, l’autre à ce qui se trouve au-dessus d’elle dans l’arbre.

Pourquoi rem respecte-t-il l’utilisateur là où px ne le fait pas ?

Les navigateurs exposent un réglage de taille de police par défaut — généralement 16px — et les personnes qui ont besoin d’un texte plus grand l’augmentent, certaines à 20px, d’autres bien au-delà. Ce réglage modifie la taille de police racine, si bien que chaque valeur en rem le suit ; chaque valeur en px l’écarte silencieusement. La distinction compte parce que le réglage n’est pas la même chose que le zoom : le zoom de la page est un ajustement propre à chaque site qui met à l’échelle toute la mise en page, images comprises, tandis que la préférence de taille de police est une déclaration persistante, valable pour tout le navigateur, sur les yeux du lecteur. Une feuille de style en px écrase cette déclaration sans que personne ne le remarque — la page reste simplement petite.

Le critère de redimensionnement du texte des WCAG (1.4.4) exige que le texte puisse être redimensionné jusqu’à 200 % sans perte de contenu ni de fonctionnalité. Le zoom pleine page y amène la plupart des pages, si bien qu’un dimensionnement en px n’échoue pas automatiquement — mais c’est une hiérarchie fondée sur rem qui permet au réglage par défaut du lecteur lui-même de fonctionner aussi, plutôt que de le forcer à recourir au zoom sur chaque site. Le cas intuitif est plus simple que le cas de conformité : le lecteur a indiqué au navigateur, une fois pour toutes, la taille de texte dont il a besoin. rem transmet le message ; px le laisse tomber.

À quoi ressemble une même échelle en px et en rem ?

Voici une échelle modulaire de quarte juste (ratio 1,333, deux notes par intervalle) sur une base de 16px — les valeurs en px arrondies d’abord, puis converties à raison de 16px par rem, ce qui est le flux de travail habituel des tokens :

Lisez la dernière colonne en regard de la deuxième : avec une valeur par défaut augmentée, la colonne px ne bougerait pas du tout, tandis que la colonne rem reproduit toute la hiérarchie 25 % plus grande — chaque taille mise à l’échelle par le même facteur, proportions intactes. Le lecteur obtient une version plus grande de votre typographie, pas une version déformée.

Ouvrez cette échelle dans Scale Composer — base de 16px, quarte juste, deux notes : les six mêmes pas que le tableau. Changez ensuite la base à 20 et vous avez sous les yeux la colonne de droite en direct — ce que devient chaque taille pour un lecteur qui a augmenté sa valeur par défaut.

Quand em est-il la bonne unité ?

Quand une mesure doit suivre le texte situé juste à côté d’elle, quelle que soit la taille de ce texte. Le cas classique est une icône en ligne : donnez-lui une largeur et une hauteur de 1em et elle s’accorde à son texte dans un bouton, un titre ou une légende sans surcharge propre à chaque contexte. Le padding local à un composant peut fonctionner de la même façon — un bouton dont le padding est en em conserve ses proportions quand le même composant est livré en variante petite et grande. Le test, c’est la localité : si le point de référence de la valeur est « le texte ici », em encode cette relation directement. Pour font-size lui-même, utilisez-le délibérément et sur un seul niveau au plus — les chaînes de tailles de police en em, c’est ainsi que s’écrit le bug de liste imbriquée.

Quand px est-il la bonne unité ?

Quand évoluer avec le texte serait une erreur. Une bordure fine de 1px existe pour séparer des zones ; si un lecteur double la taille de son texte, ce filet qui fait son travail à 1px reste généralement juste à 1px — agrandi, il devient un élément de design que personne n’a demandé. Les ombres relèvent souvent de la même catégorie : elles encodent l’élévation, pas la taille de lecture, même si certains systèmes choisissent de les mettre à l’échelle. Le principe reflète l’argument de rem par l’autre côté : rem pour tout ce qui doit grandir avec le texte du lecteur, px pour les rares choses dont le rôle en est indépendant.

Voyez votre échelle à travers les yeux d’un lecteur

Mettez la règle à l’épreuve : ouvrez la même échelle sur une base de 20px — la dernière colonne du tableau, en direct — et comparez-la à la version 16px. Tout conserve sa forme ; seule la taille change. Auditez ensuite votre propre produit : si ses tailles de police sont déclarées en px, cette version plus grande et non déformée est exactement ce dont les lecteurs ayant augmenté leur valeur par défaut sont privés.