rem vs em vs px : quelle unité CSS utiliser pour chaque propriété

Em vs rem tient à la référence de la taille. rem est relatif à la taille de police de l’élément racine, donc 1rem vaut la même chose partout sur la page. em est relatif à la taille de police de l’élément lui-même (ou de son parent, quand on l’utilise dans font-size), donc il change d’un composant à l’autre. px est un pixel CSS fixe qui ignore la préférence de taille de police de l’utilisateur. Une règle pratique par défaut : rem pour les tailles de police et l’espacement de la page, em pour ce qui doit grandir avec son propre texte (le remplissage d’un bouton, la taille d’une icône), px pour les bordures et les ombres, et em ou rem dans les requêtes média.

Em vs rem : comment chaque unité est calculée

Les trois unités ne diffèrent que par leur point de référence. La référence des longueurs de MDN les définit ainsi (vérifié en octobre 2026) :

La valeur de 16px est la valeur par défaut courante des navigateurs, pas une constante. MDN note que les préférences de l’utilisateur peuvent la changer, et c’est toute la raison de préférer les unités relatives pour le texte.

Dans un composant :

html { font-size: 100%; }      /* 16px avec les valeurs par défaut */

.card { font-size: 1.25rem; }  /* 20px */
.card h2 { font-size: 1.5em; } /* 1,5 × 20px = 30px */
.card p  { font-size: 1.5rem; }/* 1,5 × 16px = 24px, la carte n'a pas d'effet */
.card .tag { padding: 0.5em; } /* la moitié de la taille de police de l'étiquette */

Le titre en em dépend de sa place. Sortez-le de .card et il devient 24px. Le paragraphe en rem fait 24px partout.

Pourquoi em se compose

Comme em sur font-size multiplie la taille du parent, les éléments imbriqués se multiplient à leur tour :

li { font-size: 0.875em; }

Une liste à trois niveaux de profondeur finit à 0,875 × 0,875 × 0,875 ≈ 0,67 de la taille de base : environ 10,7px à partir d’une racine de 16px. Avec 0.875rem, chaque niveau reste à 14px. Cette composition est la raison pour laquelle rem est le choix le plus sûr pour les tailles de police, et pourquoi em doit être réservé aux endroits où le fait de suivre le texte local est précisément le but.

Quelle unité utiliser pour chaque propriété CSS

Choisissez l’unité en vous demandant ce que la taille doit suivre : la préférence de texte de l’utilisateur, le texte propre du composant, ou rien. Ce sont des recommandations et un choix de design ; aucune spécification ne les impose :

Les largeurs de mise en page en px conviennent quand elles doivent suivre l’écran plutôt que le texte. Une bordure de 1px, un avatar fixe de 44px ou un conteneur de page de 1200px n’ont pas besoin de grandir avec la taille de police. Le texte à l’intérieur de ces boîtes, si.

L’espacement relève du jugement. Un espacement en rem garde le rythme de la page en phase avec le texte quand l’utilisateur l’agrandit. Un espacement en px laisse plus de contenu sur un petit écran à grand texte. Sur un téléphone de 360px de large, ce compromis se voit vite, ce qui justifie de le tester (voir la dernière section).

Rem vs px pour la taille de police et l’accessibilité

Utilisez rem (ou %, ou des mots-clés comme medium) pour les tailles de police, car une taille en px ignore la taille de police par défaut que l’utilisateur a choisie dans le navigateur. Dans Chrome sur ordinateur, ce réglage se trouve dans Paramètres > Apparence > Taille de police, avec davantage d’options dans Personnaliser les polices (aide Chrome). Un utilisateur qui la monte de la valeur par défaut à 20px obtient 20px de texte courant avec 1rem, et reste à 16px avec 16px.

Le zoom du navigateur fonctionne autrement. Le zoom agrandit tout, px compris, donc une mise en page en px s’agrandit aussi quand l’utilisateur appuie sur Ctrl et +. Le réglage de la taille de police est le cas où rem et px se comportent différemment, et c’est le réglage dont dépendent les personnes malvoyantes pour obtenir un texte plus grand sans une page qui défile horizontalement.

Le critère de réussite WCAG 2.2 1.4.4 Redimensionnement du texte (niveau AA) demande que le texte puisse être agrandi jusqu’à 200 % sans perte de contenu ni de fonctionnalité. Ses techniques suffisantes incluent l’usage d’unités em pour les tailles de police. Les unités relatives facilitent ce critère sans le garantir : une boîte à hauteur fixe peut encore couper un texte qui a grandi.

Téléphones et taille de texte du système

Sur téléphone, la situation évolue. Chrome 146 (stable le 10 mars 2026) a ajouté une balise meta optionnelle qui fait suivre la taille de police racine au réglage de taille de texte du système d’exploitation et du navigateur (notes de version de Chrome 146) :

<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">

Avec cette balise, la référence text-scale de MDN indique que rem, em et les mots-clés de taille de police suivent le réglage système, alors que les tailles de police en px ne le suivent pas. En octobre 2026, MDN classe la balise comme expérimentale, à disponibilité limitée, et prévient que l’échelle du texte mobile peut aller de 200 % à plus de 300 %, si bien qu’une page qui l’active doit être testée à ces tailles. Sans la balise, Chrome sur Android propose un curseur de zoom par défaut dans Paramètres > Accessibilité, qui agrandit toute la page (aide Chrome) ; px et rem grandissent donc ensemble dans ce cas.

C’est l’argument le plus fort pour des tailles de police en rem aujourd’hui : un site dimensionné en rem est prêt pour l’échelle de texte du système le jour où il ajoute une seule balise meta.

La taille de police racine et l’astuce des 62,5 %

Laissez la taille de police racine tranquille, ou réglez-la en pourcentage. Définir html { font-size: 16px; } écrase la préférence de l’utilisateur pour toute la page, car chaque rem pointe désormais vers 16px fixes.

L’astuce des 62,5 % bien connue règle html { font-size: 62.5%; } pour que 1rem vaille 10px avec les valeurs par défaut et que 1.6rem vaille 16px. Elle conserve le redimensionnement par l’utilisateur, puisque le pourcentage s’applique à la valeur par défaut de l’utilisateur. Son inconvénient : tout composant tiers écrit pour un rem de 16px s’affiche à 62,5 % de sa taille prévue. Si vous voulez des calculs simples, une fonction Sass ou une propriété personnalisée CSS fait la conversion sans toucher à la racine.

Tableau de conversion de px en rem

Avec la taille de police racine par défaut, rem = px / 16 :

Gardez les champs de saisie à 16px (1rem) ou plus : Safari sur iOS zoome sur les champs de formulaire dont le texte est plus petit.

Em, rem ou px dans les requêtes média

Utilisez em ou rem dans les conditions de requête média, car les points de rupture suivent alors la taille de police par défaut de l’utilisateur. Dans les requêtes média, les deux unités ont le même sens : la spécification Media Queries Level 4 indique que les unités relatives y sont basées sur la taille de police initiale, définie par le user agent ou les préférences de l’utilisateur, et non sur votre règle html.

/* 48em = 768px avec une valeur par défaut de 16px, 960px avec 20px */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

Prenez une tablette en mode portrait avec une fenêtre large de 820px (820x1180 représentait 5,06 % des résolutions de tablette dans le monde selon les données StatCounter de septembre 2026). Avec les réglages par défaut, la mise en page à deux colonnes s’active à 768px, donc la tablette reçoit deux colonnes. Un utilisateur avec une valeur par défaut de 20px reçoit la colonne unique jusqu’à 960px, la mise en page qui tient encore avec son texte plus grand. Une requête min-width: 768px lui imposerait deux colonnes et comprimerait le texte.

Comment choisir les valeurs des points de rupture est expliqué dans choisir des points de rupture responsive, et la syntaxe des requêtes elle-même dans le guide des requêtes média CSS.

Vérifiez vos unités à la largeur d’un téléphone

Pour voir si vos unités réagissent à la taille de texte de l’utilisateur, agrandissez la police par défaut et regardez la page à une petite largeur de téléphone :

1. Dans Chrome sur ordinateur, ouvrez Paramètres > Apparence > Taille de police et choisissez une taille plus grande, ou fixez une taille exacte dans Personnaliser les polices.
2. Ouvrez la page dans un viewport de téléphone de 360px de large. Mobile View Extension recharge l’onglet comme un téléphone avec un user agent mobile et une taille d’écran mobile ; choisissez un préréglage ou saisissez 360 × 800 comme résolution personnalisée. Le mode appareil de DevTools convient aussi.
3. Vérifiez que le texte courant a grandi. Si ce n’est pas le cas, quelque chose fixe une taille de police en px ou une taille racine en px.
4. Cherchez le texte qui déborde des boutons, les étiquettes coupées dans les boîtes à hauteur fixe, et la navigation qui passe sur deux lignes.
5. Remettez le réglage par défaut et comparez les deux états côte à côte.

Cela ne teste que le réglage de taille de police de bureau. L’aperçu tourne dans Chrome sur ordinateur, à la souris ; il ne reproduit donc ni la taille de texte du système d’un téléphone, ni le rendu de Safari, ni la balise text-scale sur Android. Pour cela, utilisez un vrai téléphone ou un émulateur et augmentez la taille de police système là-bas.

Pour savoir comment des mises en page fluides se construisent avec ces unités, voir ce qu’est le design web responsive.

Questions fréquentes

Faut-il utiliser rem ou px pour la taille de police ?

Utilisez rem pour la taille de police. Une taille en px ignore la taille de texte par défaut que l’utilisateur a choisie dans le navigateur, alors que rem la suit ; et ce sont aussi les tailles en rem que la balise text-scale de Chrome fait évoluer sur téléphone.

Quand utiliser em plutôt que rem ?

Utilisez em quand une taille doit suivre le texte propre de l’élément : remplissage des boutons et badges, icônes dans le texte, interlettrage, et conditions de requête média. Évitez em pour les valeurs font-size imbriquées, car elles se composent.

1rem vaut-il toujours 16px ?

Non. 1rem vaut la taille de police de l’élément racine, qui n’est de 16px qu’avec la valeur par défaut courante du navigateur. Un réglage de l’utilisateur, un pourcentage sur html ou la balise text-scale peuvent la modifier.

Em et rem se comportent-ils différemment dans les requêtes média ?

Non. Dans les requêtes média, les deux sont basés sur la taille de police initiale issue du navigateur et des préférences de l’utilisateur ; 48em et 48rem donnent donc le même point de rupture. Une taille de police définie sur html dans votre feuille de style n’a pas d’effet sur eux.