Qu'est-ce que le convertisseur EM en PX ?
Le convertisseur EM en PX transforme les unités CSS em en pixels absolus. En CSS, em est une unité relative : 1em correspond à la taille de police de l'élément parent (ou de l'élément lui-même pour les propriétés qui ne concernent pas le texte). Comme les navigateurs adoptent par défaut une taille de police racine de 16 px, 1em équivaut généralement à 16 px — mais la valeur exacte dépend de la taille de police de base que vous définissez.
Comment l'utiliser
Saisissez la valeur en em à convertir, puis indiquez la taille de police de base en pixels. La plupart des navigateurs utilisent par défaut 16 px, c'est donc cette valeur qui est pré-remplie. Cliquez sur « Calculer » pour afficher l'équivalent en pixels. Pratique lorsqu'il faut faire correspondre des maquettes exprimées en pixels avec des feuilles de style rédigées en em.
La formule expliquée
La conversion repose sur une simple multiplication :
$$\text{PX} = \text{EM value} \times \text{Base font size (px)}$$
Par exemple, 1.5em avec une base de 16 px donne \(1{,}5 \times 16 = 24\ \text{px}\). Pour l'opération inverse, divisez les pixels par la base : \(\text{px} \div \text{base} = \text{em}\).
Exemple concret
Imaginons un titre défini à 2.5em avec une taille de police de base de 16 px. La taille en pixels est de \(2{,}5 \times 16 = 40\ \text{px}\). Si la base passait à 18 px, ces mêmes 2.5em s'afficheraient à \(2{,}5 \times 18 = 45\ \text{px}\) — ce qui illustre bien comment l'em s'adapte à la base.
FAQ
1em vaut-il toujours 16 px ? Uniquement lorsque la taille de police de base correspond à la valeur par défaut du navigateur, soit 16 px. Si la taille de police d'un parent ou de la racine diffère, la valeur de 1em change en conséquence.
Quelle est la différence entre em et rem ? rem se rapporte toujours à la taille de police de la racine (élément html), tandis que em dépend du contexte de taille de police le plus proche, qui peut se propager et se cumuler en cascade.
Pourquoi utiliser l'em plutôt que le px ? Les unités em s'adaptent aux préférences de taille de police de l'utilisateur, ce qui améliore l'accessibilité et facilite la gestion d'une typographie responsive.
