Convertissez les pixels en em avec la taille du parent de votre choix
Avec le réglage par défaut du navigateur, 14 pixels valent 0,875em et 18 pixels valent 1,125em. Saisissez la mesure de la maquette, réglez la taille de police du parent et reportez le résultat dans la feuille de styles. 24 px, par exemple, font 1,5em quand la base vaut 16.
À quoi sert la conversion des pixels en em ?
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].
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 comporte 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 trois endroits où l’on utilise l’em. Le chemin inverse revient au convertisseur d’em en pixels.
Comment calculer les pixels en em à la main ? Formule et exemple
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 peuvent produire 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.
Combien d’em valent les mesures courantes en pixels ?
| Valeur en pixels | Parent 16 px (par défaut) | Parent 14 px (carte) | Parent 20 px (titre) |
|---|---|---|---|
| 1 px | 0,0625 em | 0,0714 em | 0,05 em |
| 2 px | 0,125 em | 0,1429 em | 0,1 em |
| 4 px | 0,25 em | 0,2857 em | 0,2 em |
| 6 px | 0,375 em | 0,4286 em | 0,3 em |
| 8 px | 0,5 em | 0,5714 em | 0,4 em |
| 10 px | 0,625 em | 0,7143 em | 0,5 em |
| 12 px | 0,75 em | 0,8571 em | 0,6 em |
| 13 px | 0,8125 em | 0,9286 em | 0,65 em |
| 14 px | 0,875 em | 1 em | 0,7 em |
| 15 px | 0,9375 em | 1,0714 em | 0,75 em |
| 16 px | 1 em | 1,1429 em | 0,8 em |
| 18 px | 1,125 em | 1,2857 em | 0,9 em |
| 20 px | 1,25 em | 1,4286 em | 1 em |
| 21 px | 1,3125 em | 1,5 em | 1,05 em |
| 22 px | 1,375 em | 1,5714 em | 1,1 em |
| 24 px | 1,5 em | 1,7143 em | 1,2 em |
| 26 px | 1,625 em | 1,8571 em | 1,3 em |
| 28 px | 1,75 em | 2 em | 1,4 em |
| 30 px | 1,875 em | 2,1429 em | 1,5 em |
| 32 px | 2 em | 2,2857 em | 1,6 em |
| 36 px | 2,25 em | 2,5714 em | 1,8 em |
| 40 px | 2,5 em | 2,8571 em | 2 em |
| 44 px | 2,75 em | 3,1429 em | 2,2 em |
| 48 px | 3 em | 3,4286 em | 2,4 em |
| 56 px | 3,5 em | 4 em | 2,8 em |
| 64 px | 4 em | 4,5714 em | 3,2 em |
| 72 px | 4,5 em | 5,1429 em | 3,6 em |
| 80 px | 5 em | 5,7143 em | 4 em |
| 96 px | 6 em | 6,8571 em | 4,8 em |
| 128 px | 8 em | 9,1429 em | 6,4 em |
Où utiliser l’em et où utiliser le rem ?
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 testés[3], tandis que le rem plafonne à 69,05 pour cent de prise en charge et ne fonctionne dans aucune version testée d’Outlook pour Windows, de 2003 à 2019[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.
Quelle unité choisir selon la situation ?
| Situation | Unité | Pourquoi |
|---|---|---|
| Taille de texte des titres et du corps | rem | Le résultat reste le même dans tout le document, quelle que soit l’imbrication |
| Espace autour du texte d’un bouton | em | Le remplissage suit le texte du bouton, une modification agrandit tout l’élément |
| Retrait d’une liste imbriquée | em | Le retrait doit grandir avec le texte de ce niveau de liste |
| Point de rupture en media query | em | Le navigateur compte depuis la valeur initiale de la taille de police, pas depuis l’élément html |
| Mesures dans un modèle de courriel | em | Pris en charge dans tous les logiciels testés, là où le rem échoue dans Outlook pour Windows |
| Épaisseur de bordure et ombre | px | Un filet doit rester un filet quelle que soit la taille de texte |
| Échelle d’espacement du système de design | rem | Une modification de la taille de police de base déplace toute la mise en page |
| Largeur maximale d’une colonne de texte | em | La longueur de ligne se mesure en caractères, la largeur suit le texte de la colonne |
Quand convertir des pixels en em ?
Passer la maquette au code
Le design donne 24 pixels d’espacement et la feuille de styles doit recevoir 1,5em.Un modèle de courriel
Le rem échoue dans Outlook pour Windows : les mesures relatives s’écrivent donc en em. Le convertisseur transforme les pixels de la maquette en valeurs prêtes.Un point de rupture de mise en page
Un 48em se comporte de façon prévisible, car dans une media query le navigateur compte depuis la taille de texte par défaut.Un composant réglé par un seul paramètre
Le remplissage et l’arrondi d’un bouton écrits en em grandissent avec son texte : une déclaration change toute la taille.
Le pixel et l’em côte à côte
| Caractéristique | px | em |
|---|---|---|
| Point de référence | Aucun, c’est une valeur absolue | Taille de police de l’élément parent |
| Valeur par défaut | 1 px = 1/96 de pouce | 1em = 16 px |
| À l’imbrication | Toujours la même valeur | Se cumule à chaque niveau |
| Réaction aux réglages du lecteur | Reste identique | Suit ces réglages |
| Où la valeur est indiquée | Maquettes, logiciels de design, fichiers image | Feuilles de styles, modèles de courriel |
| Emploi habituel | Bordures, ombres, filets | Espace autour du texte, retrait, point de rupture |
Convertir Pixels en d'autres unités
Sources
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Toutes les valeurs des tableaux ont été calculées à partir des définitions des unités et vérifiées par le calcul avant publication. Les données historiques et les noms des unités locales proviennent des sources citées ci-dessus.
Dernière révision du contenu : · rédigé et vérifié par l'équipe Arteon
Questions fréquentes
Combien d’em vaut 1 pixel ?
Avec le parent de 16 px par défaut, un pixel vaut 0,0625em. Dans une carte composée en 14 px, ce même pixel donne environ 0,0714em, et dans un titre de 20 px il donne 0,05em.
Comment convertir des px en em ?
Divisez le nombre de pixels par la taille de police du parent. Avec les 16 px par défaut, cela donne 24 ÷ 16 = 1,5em. Le convertisseur ci-dessus effectue cette division pour toute taille de parent de 1 à 200 px.
Combien d’em valent 24 px ?
1,5em pour un parent de 16 px, environ 1,7143em pour 14 px et 1,2em pour 20 px.
Combien d’em valent 14 px ?
0,875em avec le parent de 16 px par défaut. Dans une carte dont le texte mesure déjà 14 px, cette même mesure vaut exactement 1em.
Combien d’em valent 16 px ?
1em avec le parent de 16 px par défaut. Pour un parent de 14 px, cela donne environ 1,1429em, et pour 20 px, 0,8em.
Combien d’em valent 12 px ?
0,75em pour un parent de 16 px. Dans une carte en 14 px, cela donne environ 0,8571em, et pour un parent de 20 px, 0,6em.
Faut-il arrondir le résultat en em ?
Des valeurs comme 0,875 ou 1,125em s’écrivent telles quelles. Le navigateur les calcule exactement, tandis qu’un arrondi à 0,88em déplacerait la mesure d’une fraction de pixel. La division par 14 produit des décimales périodiques, et quatre chiffres suffisent alors.
Quelle unité convient dans une media query ?
L’em. Dans 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 à celle posée sur l’élément html : 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.
Peut-on utiliser l’em dans un modèle de courriel ?
Oui, dans tous les logiciels testés. L’unité rem plafonne à 69,05 pour cent de prise en charge et ne fonctionne pas dans Outlook pour Windows : les mesures relatives des modèles de courriel s’écrivent donc en em.
Faut-il passer toute la feuille de styles en em ?
L’espace autour du texte, les retraits de liste et les largeurs de colonne oui, puisqu’ils doivent suivre le texte de leur contexte. Les tailles de texte et l’échelle d’espacement d’un site entier réussissent mieux en rem, et bordures, ombres et filets restent en pixels.
Quelle différence entre em et rem à mesure égale ?
La même déclaration 1,5em donne un résultat différent à chaque niveau d’imbrication, car elle compte depuis le parent. La déclaration 1,5rem donne 24 pixels dans tout le document, car elle compte depuis l’élément html. Pour des mesures censées être identiques partout, le choix se porte sur le rem.
Les logiciels de design affichent-ils des valeurs en em ?
Figma, Photoshop et Illustrator expriment les tailles de texte et les dimensions des éléments en pixels ou en points, pas en em. Une mesure de maquette se convertit à part, avec ce convertisseur ou en lisant la valeur calculée dans l’onglet Computed des outils de développement.
Aidez-nous à améliorer nos outils
Vous avez une idée de fonction, vous avez repéré une erreur ou vous souhaitez proposer un autre outil ? Écrivez-nous.