Convertissez les rem en pixels avec la base de votre choix

Le rem se convertit en pixels par une seule multiplication : la valeur en rem fois la taille de police de base. Avec le réglage par défaut du navigateur, cette base vaut 16 px, donc 1rem donne 16 pixels et 1,5rem en donne 24. L’unité renvoie à la taille de texte de l’élément html, la racine du document, d’où son nom, root em [1].

La conversion sert dès que vous travaillez à partir d’une maquette. Le graphiste livre des mesures en pixels, la feuille de styles les conserve en rem, et il vous faut un nombre pour vérifier qu’un titre de 1,875rem fait bien les 30 pixels du design.

La base peut prendre une autre valeur que 16 px. La technique des 62,5 % la fixe à 10 px, et le lecteur peut la relever dans les réglages de son navigateur : le champ accepte donc toute valeur de 1 à 100.

Vous trouverez plus bas un tableau de 26 valeurs pour trois bases, l’échelle complète des tailles de Tailwind CSS et l’explication du statut de la valeur 16. Le chemin inverse revient au convertisseur de pixels en rem.

La formule tient en une opération : pixels = rem × taille de police de base. La taille de police de base est celle que porte l’élément html, et si personne ne l’a modifiée le navigateur retient 16 px.

Exemple avec un espacement de 1,25rem : pour une base de 16 px, cela donne 1,25 × 16 = 20 pixels. La même valeur avec une base de 10 px donne 12,5 pixels, et chez un lecteur qui a réglé 20 px elle monte à 25.

La technique des 62,5 % consiste à écrire html { font-size: 62.5% }, ce qui ramène la base à 10 px, puisque 62,5 % de 16 font exactement 10. Le calcul se fait alors de tête : 2,4rem valent 24 pixels. Une condition l’accompagne : il faut rendre au texte du body une taille lisible, en général 1.6rem, sous peine de voir toute la page composée en corps dix.

L’unité em se calcule de la même manière, à ceci près qu’elle renvoie à l’élément parent plutôt qu’à la racine du document : ce calcul revient au convertisseur d’em en pixels. Ces mêmes 16 pixels valent 12 points typographiques en composition, ce dont s’occupe le convertisseur de points en pixels.

Le nombre 16 vient du navigateur et non de la spécification CSS. C’est la taille de texte attribuée par défaut à un document, et le lecteur la modifie dans les réglages de son programme. Une personne qui voit moins bien y place 20 ou 24 px et attend de la page qu’elle suive.

Toute la différence entre le rem et le pixel tient là. Un élément écrit font-size: 24px reste haut de 24 pixels quel que soit le choix du lecteur. Le même élément écrit 1.5rem grandit avec la base : à 20 px il donne 30 pixels, à 24 px il en donne 36.

Le critère WCAG 1.4.4 demande que le texte puisse être agrandi jusqu’à 200 % sans perte de contenu ni de fonctionnalité [2]. Une mise en page bâtie sur le rem y répond seule, puisqu’elle suit le réglage du lecteur.

En France, ce critère a valeur réglementaire. Le RGAA, dans sa version 4.1.2, reprend la norme européenne EN 301 549 fondée sur les WCAG 2.1 de niveaux A et AA, et s’impose aux services publics en ligne [3]. Une feuille de styles déjà écrite en rem couvre le critère 1.4.4 avant même que l’audit commence.

D’où le partage pratique : les tailles de texte, les espacements et les largeurs de colonne en rem, et le pixel là où une mesure doit rester fixe quel que soit le texte, comme les bordures, les ombres et les filets.