Convertissez entre px, rem, em, vw, vh et pt.
Les résultats sont fournis à titre informatif. Vérifiez-les auprès d'autres sources.
Calculé dans votre navigateur. Rien de ce que vous saisissez n'est envoyé.
Imbriquez 1,25em sur quatre niveaux et vous obtenez 39px, pas 20px
em se rapporte au parent, donc l'imbrication le multiplie. Quatre éléments réglés chacun à 1,25em atterrissent à 2,441 fois la racine — 39,06px là où l'auteur voulait presque certainement 20px. rem se rapporte à la racine et ne se cumule jamais : c'est toute la différence pratique entre les deux unités.
Comment ça marche
- Convertit entre px, rem, em, pt et pourcentages à la référence CSS de 96 ppp.
- Rend explicite le cumul de em, puisque c'est de là que viennent les surprises.
- Montre ce que devient une valeur quand l'utilisateur change sa taille de police racine — ce que font justement les réglages d'accessibilité.
rem = px ÷ taille de police racine (16px par défaut) em = px ÷ taille de police du parent 1pt = 96 ÷ 72 = 1,3333px donc 12pt = exactement 16px em imbriqué se multiplie : 1,25em dans 1,25em = 1,5625 × racine
Exemple chiffré
Le même facteur 1,25 appliqué en em puis en rem, sur quatre niveaux.
- niveau 1 — em : 20,00px · rem : 20px
- niveau 2 — em : 25,00px · rem : 20px
- niveau 3 — em : 31,25px · rem : 20px
- niveau 4 — em : 39,06px · rem : 20px
- 1,25⁴ = 2,4414
La chaîne em double presque la taille voulue au quatrième niveau, tandis que chaque élément en rem reste à 20px. Aucune unité n'est défaillante ; elles répondent à des questions différentes, et prendre em quand on pensait rem est l'un des bugs de dimensionnement CSS les plus répandus.
Lire le résultat
- L'échec classique, ce sont les listes imbriquées. Posez ul { font-size: 0,875em } et chaque niveau rétrécit encore : 14,00px, puis 12,25px, puis 10,72px. Au troisième niveau le texte est 33,0% plus petit que la racine, et non les 12,5% que la règle semble annoncer.
- 12pt vaut exactement 16px, et c'est une véritable coïncidence à connaître. La taille de police par défaut du navigateur et la taille de corps standard en impression tombent sur la même valeur à la référence CSS de 96 ppp : pt et px coïncident en exactement un point utile et nulle part ailleurs.
- rem est le choix accessible pour la typographie car il suit le réglage racine de l'utilisateur. Quelqu'un qui a mis son navigateur à 24px voit 1,5rem rendu à 36px, tandis qu'un 24px codé en dur reste 24px et l'ignore complètement.
- em reste la bonne unité quand vous voulez une proportion au texte local — par exemple une marge intérieure de bouton qui doit suivre son propre libellé. La règle empirique : rem pour les tailles de police, em pour les espacements qui appartiennent à l'élément.
Questions fréquentes
- Faut-il utiliser rem ou em ?
- rem pour les tailles de police, em pour les espacements devant suivre le texte propre de l'élément. rem ne se cumule jamais : un composant déposé trois niveaux plus bas s'affiche à l'identique. em se cumule délibérément, ce qui est utile pour les marges intérieures et nuisible pour la typographie.
- Pourquoi mon texte imbriqué rétrécit-il ?
- Parce que em multiplie à chaque niveau. Une règle 0,875em appliquée à trois listes imbriquées donne 14,00px, 12,25px, puis 10,72px. Passez la font-size en rem et chaque niveau s'affiche à la même taille quelle que soit la profondeur.