Convertisseur Em / Px
Convertissez des em en pixels et des pixels en em selon votre base font-size. Tableau de référence inclus.
Résultat
16px
1em × base 16px = 16px
Tableau de référence — base 16px
| em | px |
|---|---|
| 0.5em | 8px |
| 0.75em | 12px |
| 0.875em | 14px |
| 1em | 16px |
| 1.125em | 18px |
| 1.25em | 20px |
| 1.5em | 24px |
| 1.75em | 28px |
| 2em | 32px |
| 2.5em | 40px |
| 3em | 48px |
Questions fréquentes
Quelle est la différence entre em et px en CSS ?
Le pixel (px) est une unité absolue : 16px reste 16px quelle que soit la taille de police parente. L'em est une unité relative à la taille de police de l'élément parent : 1em = taille de police héritée.
Si la police parente est à 16px, 1.5em = 24px. Les em sont utiles pour des composants qui s'adaptent à leur contexte typographique.
Comment convertir des em en px ?
La formule est simple : px = em × base font-size. Si votre base est 16px (valeur par défaut des navigateurs), alors 1em = 16px, 1.5em = 24px, 2em = 32px, 0.75em = 12px.
Pour convertir px en em : em = px ÷ base font-size. Exemple : 24px ÷ 16 = 1.5em.
Quelle est la base font-size par défaut ?
Les navigateurs appliquent par défaut une taille de police de 16px sur l'élément html. Cependant, beaucoup de projets redéfinissent cette base font-size (souvent 14px, 15px, 18px ou 62.5% = 10px pour simplifier les calculs).
Vérifiez le CSS de votre projet sur html ou body pour connaître votre base exacte.
Quelle est la différence entre em et rem ?
L'em est relatif à la taille de police du parent direct, ce qui peut créer des effets de cascade (1.2em dans un 1.2em donne 1.44em). Le rem (root em) est toujours relatif à la taille de police de l'élément racine (html), évitant les cascades.
Pour la plupart des usages modernes, rem est préférable pour sa prévisibilité en design responsive.
Quand utiliser em plutôt que rem ou px ?
Utilisez em pour les composants autonomes dont les dimensions internes doivent s'adapter à leur taille de police locale (padding, margin interne d'un bouton).
Utilisez rem pour les espacements globaux et typographie à l'échelle du site. Utilisez px pour les bordures, ombres et détails où la précision absolue est requise.
Les media queries bénéficient aussi des em/rem pour l'accessibilité.
Découvrez nos autres outils Design :
Formules : px = em × base, em = px ÷ base. Base par défaut des navigateurs : 16px (CSS2 specification). Spécification : W3C CSS Values and Units Module Level 4. rem = relatif à l'élément html racine.