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

Convertisseur Em vers Px 2026 | Convertir em en px et px en em

em	px	Usage typique
0.5em	8px	texte très petit
0.75em	12px	texte petit / caption
0.875em	14px	texte secondaire
1em	16px	base (par défaut)
1.125em	18px	légèrement plus grand
1.25em	20px	sous-titre
1.5em	24px	titre h3
1.75em	28px	titre h2
2em	32px	titre h1
2.5em	40px	grand titre
3em	48px	très grand titre

Convertisseur em px : comprendre et maitriser les unités CSS relatives

Em et px : deux philosophies de dimensionnement

Le pixel (px) est l'unité absolue du web. Un élément de 16px fait toujours 16px, quel que soit le contexte. L'em est une unité relative : sa valeur dépend de la taille de police de l'élément parent. Si le parent a un font-size de 20px, alors 1em = 20px, 1.5em = 30px, et 0.75em = 15px. Cette relation contextuelle fait de l'em un outil puissant pour créer des composants proportionnels et adaptatifs.

Le choix entre em et px n'est pas anodin : il impacte l'accessibilité, la maintenabilité et le comportement responsive de votre interface. Les navigateurs modernes permettent aux utilisateurs de modifier la taille de police par défaut (paramètres d'accessibilité) : les unités relatives (em, rem) respectent ce choix, tandis que les pixels l'ignorent.

em vers px : px = em x base font-size
px vers em : em = px / base font-size

16 px

Taille de police par défaut de tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)

Em, rem et px : quand utiliser chaque unité

Le rem (root em) est relatif à la taille de police de l'élément <html>, pas du parent direct. Il élimine le problème de cascade de l'em : 1.2rem dans un conteneur de 1.2rem donne toujours 1.2rem (pas 1.44rem comme avec l'em). Pour la typographie globale et les espacements de page, le rem est généralement préférable. L'em reste idéal pour les composants autonomes dont les dimensions internes doivent s'adapter à leur taille de police locale.

Usage recommandé par type de propriété CSS

font-size (global)

rem

font-size (composant)

line-height

sans unité (1.5)

padding / margin

rem ou em

border / box-shadow

media queries

Recommandations WCAG 2.2 et bonnes pratiques front-end

Bon à savoir

Pour le line-height, la meilleure pratique est d'utiliser une valeur sans unité (par exemple 1.5 au lieu de 1.5em ou 24px). Une valeur sans unité est recalculée pour chaque élément enfant en fonction de son propre font-size, évitant les chevauchements de lignes dans les titres.

Accessibilité et unités relatives : pourquoi c'est essentiel

Les critères WCAG 2.2 (Web Content Accessibility Guidelines) recommandent l'utilisation d'unités relatives pour les tailles de police. Environ 12 % des utilisateurs modifient la taille de texte par défaut de leur navigateur (source : WebAIM 2024). Lorsque vous utilisez des pixels pour la typographie, ces utilisateurs ne bénéficient pas de leur paramètre. Avec des rem ou des em, la taille s'adapte automatiquement.

Les media queries en em sont également plus accessibles. Un breakpoint de 48em au lieu de 768px se déclenche plus tot si l'utilisateur a agrandi sa police, ce qui anticipe correctement la réduction d'espace disponible pour le texte.

px (absolu)

16px fixe

Ignore les préférences utilisateur

rem (relatif)

1rem = variable

S'adapte au zoom et aux préférences

Exemple concret : convertir un design Figma en CSS responsive

Prenons le cas d'une maquette Figma qui spécifie les tailles en pixels. Voici comment convertir les valeurs en unités relatives pour un CSS accessible.

Identifier la base 16 px

La maquette utilise 16px comme body text

Convertir le body text 1 rem

16px / 16 = 1rem

Convertir les titres 3 rem

h1 = 48px / 16 = 3rem, h2 = 36px / 16 = 2.25rem

Convertir les paddings 1.5 rem

padding: 24px / 16 = 1.5rem (ou 1.5em pour un composant)

Le piège de la cascade em

L'inconvénient principal de l'em est la cascade multiplicative. Si un conteneur a un font-size de 1.2em et qu'il contient un enfant également à 1.2em, la taille effective de l'enfant sera 1.2 x 1.2 = 1.44em par rapport à la racine. Avec des imbrications profondes, les tailles deviennent rapidement imprévisibles. C'est précisément pour résoudre ce problème que le rem a été introduit dans CSS3.

En pratique, réservez l'em aux cas où vous souhaitez explicitement que les dimensions internes d'un composant s'adaptent à sa taille de police locale (padding d'un bouton, margin interne d'une carte). Pour tout le reste, utilisez le rem. Pour créer une hiérarchie typographique complète avec des valeurs cohérentes, utilisez notre calculateur d'échelle typographique.

Erreurs fréquentes à éviter

Attention

Ne définissez jamais font-size: 62.5% sur l'élément html pour simplifier les calculs (1rem = 10px). Cette technique brise les préférences utilisateur et oblige à redéfinir la taille de police sur le body, créant une source de bugs subtils.

Mélanger em et rem sans logique. Utilisez rem pour la typographie globale et les espacements de layout, em uniquement pour les dimensions relatives au composant local. Un mélange incohérent rend le CSS imprévisible.
Oublier que la base peut varier. Si votre projet redéfinit font-size sur html ou body (14px, 18px, 62.5%), toutes vos conversions changent. Vérifiez toujours la base réelle avant de convertir.
Utiliser des px pour les media queries. Une media query en pixels (@media (max-width: 768px)) ne s'adapte pas au zoom utilisateur. Préférez @media (max-width: 48em) pour un comportement accessible.
Ignorer les arrondis du navigateur. Les navigateurs arrondissent les valeurs sub-pixel différemment. Un 0.9375rem (15px théoriques) peut être rendu en 14px ou 15px selon le moteur. Pour les bordures et ombres, restez en px pour éviter les artefacts visuels.
Confondre em et rem dans les paddings. Un padding: 1em sur un h1 sera beaucoup plus grand que sur un paragraphe, car l'em est relatif au font-size de l'élément lui-même. Si vous voulez un espacement uniforme, utilisez rem.

Responsive design et unités relatives

Les unités relatives sont un pilier du responsive design. En combinant rem pour la typographie et em pour les media queries, vous créez une interface qui s'adapte non seulement à la taille de l'écran, mais aussi aux préférences de l'utilisateur. Si vous travaillez sur des visuels pour les réseaux sociaux, consultez notre guide des tailles d'images pour les dimensions en pixels de chaque plateforme. Pour vérifier la qualité d'impression de vos visuels, le calculateur DPI convertit les pixels en centimètres.

Sources et références

MDN Web Docs, CSS length units : documentation complète sur em, rem, px et toutes les unités CSS.
W3C, CSS Values and Units Module Level 4 : spécification officielle des unités de longueur.
WCAG 2.2, critère 1.4.4 Resize Text : exigences d'accessibilité pour le redimensionnement du texte.
WebAIM Screen Reader User Survey #10 : données sur les préférences utilisateur en matière d'accessibilité.
Google Developers, Responsive Web Design : bonnes pratiques responsive et unités CSS.

Convertisseur Em / Px

Questions fréquentes