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 (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é.
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.