Convertir px en em Pixels ↔ Em Gratuit En ligne Sûr
Saisissez une valeur en px et lisez-la aussitôt en em. Le calcul se fait dans votre navigateur, rien n'est envoyé nulle part, et ce dont dépend le résultat est écrit plus bas plutôt que supposé.
Rien n'est envoyé
Tailles courantes — Convertir px en em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
D'où viennent ces unités
Le pixel de CSS n'est pas le pixel de votre écran. Quand les affichages ont cessé d'avoir une densité prévisible, une page mesurée en vrais pixels est devenue une page qui rapetissait à mesure que les écrans s'affinaient ; on a donc redéfini le pixel CSS comme une longueur de référence : environ 1/96 de pouce, vu à une distance de lecture confortable. Tout le reste de cette page repose là-dessus. L'em est plus vieux que le web — en typographie plomb, c'était la largeur d'un bloc fondu, nommé d'après le M capital — et il signifie en CSS la taille de police en vigueur, raison pour laquelle il change quand on imbrique les éléments. Le rem fut ajouté pour y échapper : c'est l'em de l'élément racine, et il ne se compose jamais. Le vw est venu avec le responsive : un centième de la largeur de la fenêtre, quelle qu'elle soit.
Où vous les rencontrez
Ce sont les unités de toute feuille de style. Les pixels dimensionnent bordures, ombres et tout ce qui ne doit pas s'échelonner ; le rem dimensionne la typographie, les espacements et la mise en page, de sorte qu'un seul changement à la racine redimensionne une interface entière ; l'em dimensionne ce qui doit suivre son propre texte, comme le remplissage d'un bouton ; le vw dimensionne les titres et les bandeaux qui doivent remplir l'écran sur n'importe quel appareil. Convertir entre eux, c'est l'arithmétique quotidienne qui transforme une maquette livrée en pixels en une feuille de style qui s'adapte.
Questions fréquentes
Pourquoi 16 px comme point de départ habituel ?
Parce que c'est la taille de texte par défaut dans tous les grands navigateurs, et qu'une feuille de style qui ne la redéfinit pas en hérite. Un rem vaut donc 16 px au réglage par défaut : de là viennent les conversions familières, 0,5 rem pour 8 px, 1,5 rem pour 24 px. Si un utilisateur a agrandi la valeur par défaut dans ses réglages, ces mêmes valeurs en rem grandissent avec elle — ce qui est précisément l'intérêt de les employer.
Faut-il employer rem ou em ?
Rem pour tout ce qui doit suivre la page entière — échelle typographique, espacements, largeurs de mise en page —, car il se mesure depuis la racine et ne s'accumule jamais. Em pour tout ce qui doit suivre le texte où il se trouve : le remplissage d'un bouton, l'écart auprès d'une icône, le retrait d'une citation. L'erreur courante est d'imbriquer des éléments dimensionnés en em : 1,2 em dans 1,2 em devient 1,44, puis 1,73, jusqu'à ce que le texte du bas de page fasse le double de la taille voulue.
Le résultat est-il exact ?
Là où les deux unités se définissent l'une par l'autre en nombres entiers, oui — la page le dit au-dessus du chiffre, et le seul arrondi porte sur le nombre de décimales affichées. Là où le rapport n'a pas de décimale finie, la page affiche douze chiffres significatifs et qualifie la relation d'approchée plutôt que de prétendre le contraire.
Ce que je saisis quitte-t-il mon appareil ?
Non. Le calcul se fait dans votre navigateur ; rien n'est envoyé, et il n'y a d'ailleurs aucun serveur pour le recevoir. Une fois la page chargée, elle fonctionne réseau coupé.
Pourquoi on convertit des px en em
L'em est la plus ancienne unité relative de CSS et celle qui provoque le plus de disputes. Vous avez une taille en pixels tirée d'un fichier de maquette, 20 px de marge intérieure sur un bouton, 14 px d'espace à côté d'une icône, 36 px pour un titre, et vous la voulez en em, pour qu'elle suive le texte auquel elle appartient. Quand vous convertissez des px en em, vous posez une question précise : quel multiple de la taille de police actuelle cela représente-t-il ? La réponse dépend d'un nombre que la page ne peut pas deviner, la taille de police en vigueur là où la valeur est utilisée ; le convertisseur place donc ce nombre dans un champ et l'utilise ouvertement.
La raison d'écrire des tailles en em est que les choses qui appartiennent au texte doivent grandir avec le texte. La marge intérieure d'un bouton doit être plus grande quand son libellé est plus grand. L'écart entre une icône et sa légende doit s'élargir quand la légende grandit. La marge basse d'un titre doit rester proportionnée au titre. Dans tous ces cas, la valeur en pixels est fausse dès que la taille de police change, et la valeur en em est juste à n'importe quelle taille. C'est tout l'argument en faveur de l'em, et il est solide.
Le calcul se fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas la formule, la raison pour laquelle l'em demande plus de soin que le rem, le piège de l'imbrication qui produit des tailles surprenantes, les endroits où l'em est la bonne unité, et une méthode pour choisir entre em et rem dans une vraie feuille de style.
La formule et la base
em égale px divisé par la taille de police
La formule est une division : em = px ÷ base. Avec une base de 16 px, une valeur de 24 px devient 1,5 em, 8 px devient 0,5 em et 20 px devient 1,25 em. La page affiche la base à côté du résultat, comme dans 24 px = 1,5 em (16 px), pour que vous voyiez ce qui a été supposé. L'arithmétique est la même que pour le rem. Le sens est différent.
Ce qu'est la base
Pour le rem, la base est la taille de police de l'élément racine. Pour l'em, c'est la taille de police de l'élément où la valeur est utilisée, ou, pour la propriété font-size elle-même, celle du parent. C'est pourquoi l'em n'a pas de réponse unique : la même valeur dans la feuille de style représente des tailles en pixels différentes selon les endroits. Si vous convertissez une marge intérieure pour un bouton dont le texte fait 14 px, saisissez 14 comme base. Si vous convertissez une marge extérieure pour un titre de 32 px, saisissez 32.
La valeur par défaut quand vous ne savez pas
Si vous voulez seulement un chiffre approximatif, laissez la base à 16, la taille du texte ordinaire dans un navigateur que personne n'a modifié. Le résultat est juste pour un bloc de texte courant et vous donne une idée de la proportion, même si l'élément s'avère avoir une autre taille.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la proportion par rapport au texte
Le résultat est la proportion relative à la taille de police en vigueur là où la valeur est utilisée. Écrit en em, un espace grandit et rétrécit avec le texte à côté, et c'est exactement ainsi que doit se comporter l'espacement autour des mots.
Elle ne peut pas vous donner un seul nombre pour la page
C'est le point à surveiller. L'em est relatif à la taille de police de l'élément lui-même, ou, pour font-size, à celle de son parent, et non à la racine. Il n'y a donc pas de réponse unique pour une page : les mêmes 1,5 em valent 24 px dans un élément de 16 px et 36 px dans un élément de 24 px, et l'em dans l'em se multiplie. Le chiffre affiché est juste pour la base saisie dans le champ et pour rien d'autre. Si vous voulez un nombre valable partout, c'est à cela que sert le rem. Pour comparer, Convertir px en rem et voyez comment se comporte la même valeur en pixels.
Arrondi
La division par 16 donne des valeurs rondes pour beaucoup de tailles et des décimales périodiques pour d'autres. Une valeur comme 0,8125 em convient dans une feuille de style, mais vous pouvez préférer arrondir à 0,8 ou 0,85 si la taille exacte n'a pas d'importance. Gardez le chiffre complet là où la précision compte.
Le piège de l'imbrication
Comment l'em se cumule
Supposons qu'une liste ait font-size: 0.875em et que ses éléments aient eux aussi font-size: 0.875em. La liste fait 87,5 % de son parent. Chaque élément fait 87,5 % de la liste, soit environ 76,6 % du parent. Une liste imbriquée dans un élément rétrécit encore, à environ 67 %. Après trois niveaux, le texte est très petit, et personne ne l'a écrit exprès. C'est ce qu'on veut dire en affirmant que l'em se cumule.
Pourquoi c'est important quand vous convertissez des px en em
Si vous convertissez une valeur en pixels en em pour font-size, la base que vous devez utiliser est la taille de police du parent, et non celle de l'élément lui-même. Beaucoup d'erreurs viennent de l'utilisation de la mauvaise. Pour les autres propriétés, comme padding et margin, la base est la taille de police propre de l'élément. La règle est facile à énoncer et facile à oublier : font-size regarde vers le haut, tout le reste regarde vers soi.
Comment éviter les surprises
Utilisez l'em pour les espacements qui suivent le texte, et le rem pour les tailles de police. Ainsi, les tailles de police ne se cumulent jamais, car elles se réfèrent à la racine, et les espacements continuent de suivre leur propre texte. C'est la combinaison sur laquelle se fixent la plupart des feuilles de style modernes.
Tailles courantes
Le tableau en bas de la page
Sous le convertisseur se trouve un tableau de tailles courantes à la base que vous avez réglée : 8 px font 0,5 em, 10 px font 0,625, 12 px font 0,75, 14 px font 0,875, 16 px font 1, 18 px font 1,125, 20 px font 1,25, 24 px font 1,5, 32 px font 2, 48 px font 3 et 64 px font 4. À une base de 16, ce sont les mêmes nombres que pour le rem, et c'est pourquoi on confond les deux. La différence tient à ce que représente ce 16.
Adapter la base à l'élément
Si vous réglez la base à 14 pour un petit bouton, le tableau change : 14 px font maintenant 1 em, 7 px font 0,5 em et 21 px font 1,5 em. Essayez, et vous verrez comment une marge intérieure de 1,5 em a une taille en pixels différente dans un bouton de 14 px et dans un bouton de 18 px, et pourquoi c'est utile.
Comment convertir des px en em ici
Saisissez la valeur en pixels
Entrez la taille en pixels dans le premier champ. Les décimales sont acceptées.
Réglez la taille de police à laquelle l'em se réfère
Saisissez la taille de police de l'élément, ou celle de son parent si vous convertissez une font-size. Si vous avez un doute, laissez 16 et traitez le résultat comme une approximation.
Copiez la valeur en em
Utilisez le chiffre dans votre CSS avec son unité, comme dans padding: 1.25em. Un nombre sans unité n'est pas valide pour la plupart des propriétés.
D'où viennent ces unités
L'em dans le plomb typographique
L'em est plus ancien que le web. Dans le plomb typographique, c'était la largeur d'un bloc fondu, nommée d'après la capitale M, et c'était l'unité naturelle de l'espace horizontal sur la ligne imprimée. Les typographes parlent encore de tirets cadratins et d'espaces cadratins. En CSS, l'idée survit sous une forme plus souple : un em est la taille de la police courante.
Le pixel et le rem
Le pixel CSS est une longueur de référence d'environ 1/96 de pouce vue à une distance de lecture confortable, et non un point de votre écran. Le rem a été ajouté pour donner aux développeurs une unité relative mais qui ne se cumule jamais : c'est l'em de l'élément racine. À eux trois, pixel, em et rem couvrent les trois besoins : taille fixe, taille relative au texte et taille relative à la page.
Où l'em est le bon choix
Marge intérieure des boutons et des champs de formulaire
Un bouton avec padding: 0.5em 1em a la même allure en proportion à n'importe quelle taille de texte. Agrandissez le libellé et le bouton entier grandit avec lui, ce qui est ce que vous attendez d'un composant susceptible d'être utilisé dans une barre d'outils comme dans une grande bannière.
Espacement à côté des icônes
Une icône suivie d'une légende demande un écart qui évolue avec la légende. Une marge de 0.4em y parvient ; une marge de 6px, non.
Marges autour des titres et des paragraphes
Le rythme vertical d'un document est plus facile à tenir quand l'espacement des paragraphes est en em, puisqu'il suit la taille du paragraphe. La marge d'un titre en em reste proportionnée quand le titre change de taille à différents points de rupture.
Requêtes média
Les points de rupture écrits en em réagissent à la taille de texte du lecteur ; la mise en page passe donc plus tôt à sa forme étroite pour quelqu'un qui a agrandi son texte. Dans les requêtes média, l'em se réfère à la valeur par défaut du navigateur et non à un élément ; il ne se cumule donc pas.
Pièges quand vous convertissez des px en em
Utiliser la mauvaise base
L'erreur la plus courante. Pour font-size, utilisez la taille du parent ; pour tout le reste, celle de l'élément lui-même. Vérifiez quelle propriété vous convertissez avant de saisir la base.
Oublier que le parent peut lui aussi être en em
Si la taille de police du parent est elle-même en em, vous devez remonter la chaîne pour connaître la vraie taille. Quand une feuille de style se complique, passez les tailles de police en rem et gardez l'em pour l'espacement.
Attendre un seul chiffre pour tout un composant
Un composant qui contient du texte de tailles différentes n'a pas de valeur en em unique pour ses parties. Convertissez chaque partie par rapport à sa propre base.
Mélanger em et rem pour la même propriété
Une marge intérieure de 1rem à côté d'une marge extérieure de 1em est permise et souvent déroutante. Choisissez une règle, par exemple rem pour les tailles de police et em pour l'espacement, et tenez-vous-y.
Questions que l'on se pose avant de convertir
Combien d'em font 16 px ?
Un, si la taille de police en vigueur est de 16 px. Si la taille de police de l'élément est de 20 px, alors 16 px font 0,8 em.
L'em est-il meilleur que le rem ?
Aucun des deux n'est meilleur. Le rem convient mieux aux tailles de police et à la mise en page globale. L'em convient mieux à l'espacement qui doit suivre son propre texte.
Pourquoi ma marge intérieure est-elle plus grande que prévu ?
Parce qu'elle est relative à la taille de police de l'élément, qui peut être plus grande que vous ne l'aviez supposé. Vérifiez la taille de police calculée dans les outils de développement du navigateur.
Puis-je utiliser des décimales ?
Oui. Des valeurs comme 0.625em et 1.333em sont normales.
Mon nombre est-il envoyé ?
Non. L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé nulle part.
Comment revenir en arrière ?
Avec Convertir em en px, qui multiplie au lieu de diviser.
Bien choisir quand vous convertissez des px en em
Décidez à quoi la valeur appartient
Si elle appartient au texte, l'em convient. Si elle appartient à la page, comme une largeur de colonne ou un écart entre sections, le rem ou une unité de fenêtre d'affichage convient mieux. Convertir px en vw exprime une taille en part de la largeur de l'écran.
Écrivez l'intention dans un commentaire
Une ligne comme padding: 0.75em 1.25em; /* 12px 20px at 16px */ rend le raisonnement visible. Quand la taille de police changera plus tard, vous saurez ce que les nombres devaient représenter.
Gardez la taille de police du composant en un seul endroit
Réglez la taille de police sur l'élément racine du composant et laissez tout ce qu'il contient s'y référer. Les valeurs en em à l'intérieur signifient alors la même chose partout dans le composant, et vous pouvez convertir les px en em par rapport à une seule base.
Bonnes habitudes quand vous convertissez des px en em
Convertissez les px en em un composant à la fois
N'essayez pas de convertir les px en em pour toute une feuille de style d'un coup. Prenez un seul composant, comme une carte ou un bouton, décidez de sa taille de police et convertissez chacune de ses valeurs d'espacement par rapport à cette taille. Une fois le composant terminé, testez-le à deux ou trois tailles de texte. Passez ensuite au suivant.
Utilisez le calculateur pour les valeurs bizarres, pas pour les rondes
Des valeurs comme 8, 16 et 24 pixels se convertissent en nombres d'em nets à une base de 16. Des valeurs bizarres comme 22 ou 13 donnent de longues décimales. Quand vous convertissez des px en em pour celles-ci, décidez si la conception a vraiment besoin du chiffre exact ou si la valeur ronde d'em la plus proche serait tout aussi bonne. Les graphistes sont souvent contents d'arrondir, et une feuille de style bien rangée est plus facile à entretenir.
Gardez une trace de la base
Un court commentaire à côté de chaque valeur en em, disant quelle était la base, aide la personne suivante. Si quelqu'un modifie plus tard la taille de police du composant, il saura que l'espacement la suit par conception et non par accident. L'écrire une fois vaut le temps que cela prend.
Comparez avec l'équivalent en rem
Si vous hésitez entre em et rem pour une valeur, convertissez les px en em et en rem, et demandez-vous ce qui doit se passer quand la taille du texte change. Si la valeur doit suivre le texte propre de l'élément, prenez l'em. Si elle doit suivre la page, prenez le rem.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir aux pixels, utilisez Convertir em en px. Pour les tailles relatives à la racine, il y a Convertir px en rem et Convertir rem en px, et pour les tailles relatives à l'écran, Convertir px en vw et Convertir vw en px. Pour les couleurs de la même feuille de style, Convertir HEX en RGB et Convertir HEX en HSL s'occupent des notations.
Un exemple détaillé
Supposons que le libellé d'un bouton fasse 14 px et que la maquette donne au bouton 10 px de marge intérieure verticale et 20 px de marge intérieure horizontale. Vous saisissez 14 comme base, 10 et lisez 0,714 em, saisissez 20 et lisez 1,429 em. Dans la feuille de style, vous écrivez padding: 0.714em 1.429em. Quand le même bouton est utilisé dans une grande bannière avec un libellé de 18 px, les marges deviennent 12,9 px et 25,7 px, en proportion. Si vous aviez écrit 10px et 20px, le bouton aurait paru maigre autour du texte plus grand.
Une courte liste de contrôle
Avant de convertir
Décidez à quelle propriété appartient la valeur, et trouvez la taille de police à laquelle elle doit être relative.
Pendant la conversion
Saisissez la valeur en pixels et la bonne base, et copiez le chiffre en em avec son unité.
Après la conversion
Modifiez la taille de police du composant dans le navigateur et vérifiez que l'espacement suit. Cherchez les valeurs en em imbriquées qui se cumulent.
Erreurs courantes
Utiliser la taille de la racine comme base pour la marge intérieure
C'est le travail du rem. L'em se réfère à la taille de police propre de l'élément.
Utiliser l'em pour chaque taille de police
Les tailles de police en em imbriquées se cumulent et vous surprennent. Utilisez le rem pour les tailles de police.
Arrondir à un nombre visuellement net mais faux
1,43 n'est pas la même chose que 1,5 quand on multiplie par une grande police. Gardez assez de chiffres.
Vos nombres restent sur votre appareil
Le calcul se fait en local. Vos valeurs sont utilisées par votre propre navigateur et rien n'est envoyé nulle part. Il n'y a rien à supprimer ensuite et aucun compte à créer. C'est la manière simple de convertir des px en em.
Résumé
Pour convertir des px en em ici, saisissez la taille en pixels et la taille de police à laquelle elle est relative, et lisez le résultat aussitôt, d'après la formule em = px ÷ base. La conversion conserve la proportion relative à la taille de police en vigueur là où la valeur est utilisée. Elle ne peut pas donner une réponse unique pour une page : l'em est relatif à la taille de police propre de l'élément, ou à celle du parent pour font-size ; ainsi, les mêmes 1,5 em valent 24 px dans un élément de 16 px et 36 px dans un élément de 24 px, et l'em dans l'em se multiplie. Pour un nombre valable partout, utilisez le rem. Rien n'est envoyé.