Convertissez les em en pixels avec la taille du parent de votre choix

L’em se convertit en pixels par une seule multiplication : la valeur en em fois la taille de police du parent. Avec le réglage par défaut du navigateur, ce parent vaut 16 px, donc 1em donne 16 pixels et 1,5em en donne 24. L’unité renvoie à la taille de texte de l’élément qui la contient [1].

La conversion sert à la lecture de la feuille de styles d’un autre, lorsque vous voulez savoir ce que mesure vraiment un espacement noté 0,75em. La réponse dépend de l’endroit du document où cet espacement se trouve, et c’est précisément ce qui distingue l’em des autres unités relatives.

Le parent ne vaut pas forcément 16 px. Dans une carte ou un tableau il fait souvent 14 px, dans un titre de section 20 px ou davantage : le champ accepte donc toute valeur de 1 à 200.

Vous trouverez plus bas un tableau de 26 valeurs pour trois tailles de parent, le tableau du cumul par imbrication et la règle qui dit quand prendre l’em et quand le rem. Le chemin inverse revient au convertisseur de pixels en em.

La formule tient en une opération : pixels = em × taille de police du parent. Cette taille est la font-size de l’élément dans lequel le vôtre se trouve, et si personne ne l’a modifiée le navigateur retient 16 px.

Exemple avec un espacement de 1,25em : pour un parent de 16 px, cela donne 1,25 × 16 = 20 pixels. La même valeur dans une carte composée en 14 px donne 17,5 pixels, et dans un titre de 20 px elle monte à 25.

Une règle mérite l’attention. Dans la propriété font-size, l’em renvoie au parent, mais dans toute autre propriété de ce même élément – dans padding, margin ou width – il renvoie à la taille de police de cet élément [2]. Un élément portant font-size: 1.5em et padding: 1em avec un parent de 16 px a un texte de 24 px et un remplissage de 24 px lui aussi.

L’unité rem se calcule de la même manière, mais compte toujours à partir de l’élément html, ce qui donne le même résultat dans tout le document : c’est le travail du convertisseur de rem en pixels. Ces mêmes 16 pixels valent 12 points typographiques en composition, ce dont s’occupe le convertisseur de points en pixels.

L’em se mesure par rapport au parent, et ce parent a lui-même un parent. Quand la même déclaration font-size: 1.25em se répète sur des niveaux d’imbrication successifs, chaque niveau multiplie le résultat du précédent. Après six niveaux, 16 pixels deviennent plus de 61.

Cela se voit surtout dans les listes imbriquées, dans les menus à sous-menus et dans les fils de commentaires, car la structure y crée les niveaux d’elle-même. Le tableau ci-dessous montre chaque étape avec son calcul, pour que l’origine de chaque nombre reste visible.

D’où la règle pratique : l’em convient là où une valeur doit suivre la taille de texte de son contexte le plus proche – l’espace autour du texte d’un bouton, le retrait d’une liste, la largeur d’un champ de formulaire. Pour les tailles de texte d’un site entier, le rem convient mieux, car il compte depuis la racine du document et donne toujours la même valeur quelle que soit la profondeur.

Si c’est cette prévisibilité que vous cherchez, le calcul revient au convertisseur de rem en pixels, et une mesure de maquette écrite en rem au convertisseur de pixels en rem.