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

Le pixel se convertit en em par une seule division : le nombre de pixels divisé par la taille de police du parent. Avec le réglage par défaut du navigateur, ce parent vaut 16 px, donc 24 pixels donnent 1,5em et 14 pixels donnent 0,875em. L’unité em renvoie à la taille de texte de l’élément qui la contient [1].

C’est le sens le plus fréquent au quotidien. La maquette arrive avec des mesures en pixels, puisque les logiciels de design comptent ainsi, et la feuille de styles s’écrit en em pour qu’une mesure suive la taille de texte de sa place dans la mise en page.

Le résultat porte quatre décimales, car pour un parent de 16 px un seul pixel vaut exactement 0,0625em et les tailles de texte produisent des nombres comme 0,875 ou 1,125.

Vous trouverez plus bas un tableau de 30 mesures pour trois tailles de parent, un tableau de huit situations avec la réponse sur l’unité à choisir, et deux endroits où l’em l’emporte sur le rem. Le chemin inverse revient au convertisseur d’em en pixels.

La formule tient en une opération : em = pixels ÷ taille de police du parent. C’est l’inverse de la multiplication qui transforme les em en pixels.

Exemple avec un espacement de 20 px : pour un parent de 16, cela donne 20 ÷ 16 = 1,25em. La même mesure dans une carte composée en 14 px donne environ 1,4286em, et dans un titre de 20 px elle donne exactement 1em.

Les mesures d’une maquette produisent souvent des fractions : 18 pixels valent 1,125em, 22 pixels valent 1,375em et 30 pixels valent 1,875em. Les trois sont exactes et s’écrivent telles quelles dans la feuille de styles.

Si une mesure doit donner le même résultat dans tout le document quelle que soit l’imbrication, ce même pixel s’écrit en rem grâce au convertisseur de pixels en rem. La différence entre les deux unités est tranchée par le tableau de la page du convertisseur d’em en pixels.

Le premier endroit est la media query. À l’intérieur d’une media query, le navigateur résout les unités relatives par rapport à la valeur initiale de la taille de police, et non par rapport à ce que vous avez posé sur l’élément html : la spécification dit explicitement que les unités ne reposent jamais sur les résultats de déclarations [2]. Un point de rupture écrit 48em se comporte donc de façon prévisible même dans un projet qui modifie la taille de police de base.

Le deuxième endroit, ce sont les modèles de courriel. L’unité em fonctionne dans tous les logiciels du panel de test [3], tandis que le rem plafonne à 69,05 pour cent de prise en charge et ne fonctionne dans aucune version testée d’Outlook, ni sous Windows ni sous macOS [4]. Pour un modèle de courriel, le logiciel du destinataire tranche donc à votre place.

Le troisième endroit est un composant censé s’agrandir en entier avec son texte. Donnez à un bouton font-size: 1.125em et écrivez son remplissage et son arrondi en em : une seule modification de la taille de texte fait grandir tout le bouton proportionnellement.

Partout ailleurs – pour les tailles de texte et l’échelle d’espacement d’un site entier – la prévisibilité du rem pèse davantage. Le tableau ci-dessous détaille huit situations concrètes, et la conversion dans ce sens revient au convertisseur de pixels en rem.