Convertisseurs

PX vers REM en CSS : guide complet du dimensionnement responsive des polices et de la conversion d'unités

Apprenez quand et comment utiliser REM au lieu de PX en CSS. Couvre la formule de conversion px-vers-rem, les tailles de police par défaut des navigateurs, la technique 62,5 %, les différences EM vs REM, les bénéfices d'accessibilité et l'intégration pratique avec Tailwind CSS.

Publié sur 19 mars 2026
11 min lire
Guides CaesarCipher.org

PX vers REM en CSS : guide complet du dimensionnement responsive des polices et de la conversion d'unités

Choisir la bonne unité CSS fait partie de ces décisions qui semblent triviales au début et deviennent critiques à grande échelle. Une page construite entièrement en pixels paraît correcte sur l'écran du développeur, mais peut casser pour les utilisateurs qui s'appuient sur les réglages de taille de police du navigateur, les contrôles de zoom ou les technologies d'assistance. Une page construite avec des unités REM, à l'inverse, s'adapte élégamment à tous les appareils et à toutes les préférences utilisateur.

Ce guide parcourt tout ce que vous devez savoir sur la relation PX-vers-REM : la formule de conversion, pourquoi REM existe, quand chaque unité est le bon choix, et comment les frameworks modernes comme Tailwind CSS et Bootstrap gèrent la conversion pour vous. Utilisez notre convertisseur PX vers REM gratuit pour suivre n'importe quel exemple ci-dessous.


Que sont les unités PX, REM et EM ?

CSS offre plus d'une douzaine d'unités de longueur, mais trois dominent le développement front-end : PX, REM et EM. Comprendre ce que mesure chacune est la base de toute décision de conversion.

PX (pixels)

Un pixel CSS est une unité de longueur absolue. Sur un écran à densité standard, 1px correspond à un pixel physique de l'appareil. Sur les écrans haute densité (Retina), le navigateur mappe les pixels CSS aux pixels appareil avec le device pixel ratio, mais du point de vue CSS, 1px signifie toujours la même taille fixe.

Les pixels sont prévisibles. Un border: 1px solid black s'affiche toujours comme une ligne d'un pixel, indépendamment de la taille de police, du parent ou des préférences utilisateur. Cette prévisibilité est à la fois la force et la limite de l'unité.

REM (Root EM)

REM signifie Root EM. C'est une unité relative qui se réfère toujours à la taille de police de l'élément racine <html>. Si la taille de police racine est 16px (valeur par défaut du navigateur), alors 1rem = 16px, 1.5rem = 24px et 0.75rem = 12px.

La propriété clé de REM est qu'il possède exactement un point de référence : l'élément racine. Peu importe la profondeur d'imbrication d'un composant, 1rem se résout toujours à la même taille calculée. REM est donc à la fois prévisible et scalable.

EM (relatif au parent)

EM est également une unité relative, mais elle se réfère à la taille de police calculée de l'élément lui-même (ou, pour les propriétés autres que font-size, à la taille de police du parent). Si un élément parent a font-size: 20px, alors 1em dans ce parent vaut 20px. Si un enfant dans ce parent définit aussi font-size: 1.2em, sa taille calculée devient 24px, et toutes les valeurs em à l'intérieur de cet enfant référencent désormais 24px.

Ce comportement cumulatif rend EM puissant pour la mise à l'échelle au niveau du composant, mais dangereux dans les structures très imbriquées.


La formule de conversion

La formule PX-vers-REM est une simple division :

REM = PX / taille de police racine

Et l'inverse :

PX = REM x taille de police racine

Avec la taille de police racine par défaut du navigateur, 16px :

  • 16px / 16 = 1rem
  • 24px / 16 = 1.5rem
  • 14px / 16 = 0.875rem
  • 10px / 16 = 0.625rem

La formule ne change jamais. Seul le dénominateur change si vous remplacez la taille de police racine dans votre CSS.


Valeur par défaut du navigateur : la base 16px

Tous les grands navigateurs, Chrome, Firefox, Safari, Edge, livrent une taille de police racine par défaut de 16px. Cela signifie que, sauf si votre feuille de style la modifie explicitement, 1rem = 16px partout.

Cette valeur de 16px n'est pas arbitraire. Elle a été choisie il y a des décennies comme taille de lecture confortable pour le texte courant sur les moniteurs de bureau, et elle est restée standard depuis. Les utilisateurs peuvent modifier cette valeur dans les paramètres de leur navigateur (généralement dans Paramètres > Apparence > Taille de police), ce qui est une fonctionnalité d'accessibilité essentielle.

Comment changer la taille de police de base

Vous pouvez remplacer la taille de police racine dans votre CSS :

html {
  font-size: 18px;  /* Now 1rem = 18px */
}

Après cette déclaration, toutes les valeurs REM sur tout votre site se recalculent relativement à 18px. Un titre défini à 2rem devient 36px au lieu de 32px. C'est la puissance de REM : une modification à la racine se propage partout.

Cependant, définir la taille de police racine en pixels a un gros inconvénient d'accessibilité. Cela remplace la préférence de taille de police du navigateur de l'utilisateur. Un utilisateur qui a réglé son navigateur sur "Large" (typiquement 20px) ne verra pas cette préférence respectée si votre feuille de style force html { font-size: 18px; }.

La meilleure approche est d'utiliser un pourcentage :

html {
  font-size: 112.5%;  /* 16px × 1.125 = 18px for default users */
}

Les tailles racines en pourcentage sont relatives à la valeur par défaut du navigateur. Ainsi, un utilisateur avec une préférence de 20px obtient 20 × 1.125 = 22.5px : sa préférence est respectée et appliquée proportionnellement.


La technique 62,5 %

L'une des astuces les plus populaires en développement CSS est la technique 62,5 %. Elle simplifie le calcul mental en faisant en sorte que 1rem = 10px :

html {
  font-size: 62.5%;  /* 16px × 0.625 = 10px */
}

body {
  font-size: 1.6rem;  /* Reset body to 16px equivalent */
}

Avec cette configuration, les conversions deviennent triviales :

Taille souhaitéeValeur REM
10px1rem
12px1.2rem
14px1.4rem
16px1.6rem
18px1.8rem
20px2rem
24px2.4rem
32px3.2rem

Avantages

  • Le calcul mental est instantané : il suffit de déplacer la virgule.
  • Tous les bénéfices d'accessibilité des tailles racines en pourcentage sont conservés. Un utilisateur avec une valeur par défaut de navigateur à 20px obtient 20 × 0.625 = 12.5px comme base effective, et toutes les valeurs REM évoluent proportionnellement.

Inconvénients

  • Chaque composant doit utiliser REM. Si vous oubliez et utilisez une valeur font-size nue, le texte s'affiche sur la base 10px, ce qui est illisible.
  • Les composants et bibliothèques tiers peuvent ne pas s'attendre à une racine de 10px et s'afficher trop petits.
  • Le reset du body à 1.6rem est facile à oublier, et l'oublier fait rétrécir tout le texte par défaut.

Malgré les compromis, beaucoup d'équipes adoptent la technique 62,5 % parce que le bénéfice de calcul mental dépasse le coût de configuration, surtout sur les nouveaux projets où l'équipe contrôle tous les composants.


EM vs REM : quand utiliser chaque unité

EM et REM sont toutes deux des unités relatives, mais elles servent des objectifs de conception différents.

Le problème d'imbrication avec EM

Considérez cette structure HTML :

<div class="parent">
  Parent text
  <div class="child">
    Child text
    <div class="grandchild">
      Grandchild text
    </div>
  </div>
</div>

Avec ce CSS :

.parent { font-size: 1.2em; }    /* 16px × 1.2 = 19.2px */
.child { font-size: 1.2em; }     /* 19.2px × 1.2 = 23.04px */
.grandchild { font-size: 1.2em; } /* 23.04px × 1.2 = 27.65px */

Chaque niveau s'accumule. Le texte du petit-enfant est 73 % plus grand que la taille de base de la page, alors que chaque élément n'a demandé que "1.2em". Cette accumulation rend EM imprévisible dans les mises en page très imbriquées.

Le même exemple avec REM

.parent { font-size: 1.2rem; }     /* 16px × 1.2 = 19.2px */
.child { font-size: 1.2rem; }      /* 16px × 1.2 = 19.2px */
.grandchild { font-size: 1.2rem; } /* 16px × 1.2 = 19.2px */

Chaque élément se résout au même 19,2px, car REM référence toujours la racine, pas le parent. Pas d'accumulation, pas de surprise.

Quand EM est le meilleur choix

EM est idéal lorsque vous voulez qu'une propriété évolue avec la taille de police propre de l'élément. Exemples classiques :

  • Padding et margin des boutons : padding: 0.5em 1em rend l'espacement interne d'un bouton proportionnel à la taille de son texte. Si vous augmentez ensuite la taille de police du bouton, le padding évolue automatiquement.
  • Taille d'icône à côté du texte : width: 1em; height: 1em garde une icône inline à la même taille que le texte environnant.
  • Line-height : line-height: 1.5em (ou la valeur sans unité 1.5) garantit que l'interligne évolue avec la taille de police.

Règle pratique

Utilisez REM pour les tailles globales : tailles de police, largeurs de layout, systèmes d'espacement et media queries. Utilisez EM pour l'échelle interne des composants lorsque vous voulez un comportement proportionnel lié à la taille de texte du composant.


Accessibilité : pourquoi REM respecte les préférences utilisateur

L'accessibilité est l'argument le plus fort pour utiliser REM plutôt que PX pour les tailles de police. Voici pourquoi.

Les paramètres du navigateur incluent une préférence de taille de police, généralement ajustable de "Very Small" (environ 9px) à "Very Large" (environ 24px). Beaucoup d'utilisateurs malvoyants augmentent ce réglage pour agrandir tout le texte web. Les Web Content Accessibility Guidelines (WCAG) 1.4.4 exigent que le texte puisse être redimensionné jusqu'à 200 % sans perte de contenu ni de fonctionnalité.

Lorsque vous définissez les tailles de police en pixels, la préférence de taille de police du navigateur est ignorée. Un p { font-size: 16px; } s'affiche à 16px que la préférence de l'utilisateur soit 12px, 16px ou 24px. Le seul recours de l'utilisateur est le zoom du navigateur (Ctrl/Cmd +), qui agrandit toute la fenêtre, pas seulement le texte.

Lorsque vous définissez les tailles de police en REM, la préférence du navigateur devient la racine à partir de laquelle tout est calculé. Un utilisateur qui définit sa préférence à 24px obtient 1rem = 24px, et votre p { font-size: 1rem; } s'affiche automatiquement à 24px. Les titres à 2rem s'affichent à 48px. Toute la hiérarchie typographique évolue proportionnellement.

Ce n'est pas un cas marginal. Des études estiment que 20 à 30 % des utilisateurs web ajustent leur taille de police par défaut. Respecter leurs préférences relève à la fois de l'utilisabilité et de la conformité légale dans de nombreuses juridictions.


Quand continuer à utiliser PX

REM n'est pas la bonne unité pour tout. Plusieurs propriétés CSS fonctionnent mieux avec des valeurs fixes en pixels :

Bordures

Une bordure 1px doit rester à 1px quelle que soit la taille de police. Une bordure 0.0625rem (1/16e de rem) s'arrondirait de manière incohérente selon les navigateurs et niveaux de zoom. Utilisez des pixels pour les bordures.

.card {
  border: 1px solid #e2e8f0;  /* PX is correct here */
  border-radius: 0.5rem;       /* REM is fine for radius */
}

Box shadows

Les décalages et rayons de flou des ombres sont des effets visuels qui n'ont pas besoin d'évoluer avec la taille du texte. Les pixels gardent les ombres cohérentes :

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* PX */
}

Media queries

Les media queries définissent des points de rupture de viewport. Vous pouvez utiliser REM dans les media queries (@media (min-width: 48rem)), mais le comportement se base sur la taille de police par défaut du navigateur, pas sur la taille de police racine de votre feuille de style. Utiliser des pixels rend les breakpoints plus prévisibles et plus faciles à raisonner :

@media (min-width: 768px) { ... }  /* Clear and predictable */

Cela dit, utiliser REM dans les media queries a un avantage d'accessibilité : si un utilisateur augmente la taille de police par défaut de son navigateur, les breakpoints basés sur REM se déclenchent plus tôt, offrant une mise en page conçue pour l'espace effectif disponible. Certaines équipes considèrent cela comme une bonne pratique.

Outline et détails fins

Les outlines, lignes décoratives fines et autres détails sous-pixel qui ne devraient pas évoluer appartiennent aux pixels.

Tableau récapitulatif

PropriétéUnité recommandéeRaison
Taille de policeremRespecte les préférences utilisateur
Padding / marginrem ou emÉvolue avec le layout ou le composant
Width / max-widthrem ou %Layouts responsives
Largeur de bordurepxLignes fines cohérentes
Box shadowpxEffet visuel, pas contenu
Border radiusrem ou pxLes deux fonctionnent ; rem pour la cohérence
Media queriespx ou remPX pour la simplicité, REM pour l'a11y
Line heightsans unitéProportionnelle à la taille de police

PX vers REM dans Tailwind CSS et Bootstrap

Tailwind CSS

Tailwind CSS utilise REM en interne pour presque tous ses utilitaires d'espacement et de typographie. Quand vous écrivez text-base, Tailwind applique font-size: 1rem; line-height: 1.5rem;, équivalent à 16px/24px avec la racine par défaut.

Voici comment les utilitaires de taille de police Tailwind correspondent aux valeurs PX (avec la racine 16px par défaut) :

Classe TailwindSortie CSSÉquivalent PX
text-xsfont-size: 0.75rem12px
text-smfont-size: 0.875rem14px
text-basefont-size: 1rem16px
text-lgfont-size: 1.125rem18px
text-xlfont-size: 1.25rem20px
text-2xlfont-size: 1.5rem24px
text-3xlfont-size: 1.875rem30px
text-4xlfont-size: 2.25rem36px

L'échelle d'espacement de Tailwind (p-4, m-8, etc.) repose aussi sur REM : p-4 applique padding: 1rem (16px). Les projets Tailwind respectent donc intrinsèquement la préférence de taille de police racine de l'utilisateur.

Si vous avez besoin d'une valeur en pixels précise dans Tailwind, utilisez la syntaxe entre crochets : text-[18px] ou p-[10px]. Mais préférez l'échelle basée sur REM dès que possible.

Bootstrap

Bootstrap 5 utilise également REM comme unité principale. La taille de police de base est définie sur l'élément <html> (par défaut la valeur navigateur de 16px), et toutes les valeurs typographiques et d'espacement sont exprimées en REM :

  • $font-size-base: 1rem (16px)
  • $h1-font-size: $font-size-base * 2.5 (2.5rem = 40px)
  • $spacer: 1rem (16px), avec une échelle d'espacement construite comme multiples

Les variables Sass $enable-smooth-scroll et $font-size-root de Bootstrap permettent de personnaliser la base, mais le comportement par défaut est entièrement basé sur REM.


Table complète de conversion PX vers REM

Cette table utilise la taille de police racine standard de 16px. Divisez toute valeur PX par 16 pour obtenir l'équivalent REM.

PXREMPXREMPXREM
10.0625332.0625654.0625
20.125342.125664.125
30.1875352.1875674.1875
40.25362.25684.25
50.3125372.3125694.3125
60.375382.375704.375
70.4375392.4375714.4375
80.5402.5724.5
90.5625412.5625734.5625
100.625422.625744.625
110.6875432.6875754.6875
120.75442.75764.75
130.8125452.8125774.8125
140.875462.875784.875
150.9375472.9375794.9375
161483805
171.0625493.0625815.0625
181.125503.125825.125
191.1875513.1875835.1875
201.25523.25845.25
211.3125533.3125855.3125
221.375543.375865.375
231.4375553.4375875.4375
241.5563.5885.5
251.5625573.5625895.5625
261.625583.625905.625
271.6875593.6875915.6875
281.75603.75925.75
291.8125613.8125935.8125
301.875623.875945.875
311.9375633.9375955.9375
322644966

Pour des conversions rapides avec n'importe quelle taille de base, utilisez notre convertisseur PX vers REM.


Outils PostCSS et VS Code pour automatiser la conversion

Convertir manuellement chaque valeur pixel en REM est fastidieux et source d'erreurs. Heureusement, plusieurs outils automatisent le processus.

Plugin PostCSS : postcss-pxtorem

La solution automatisée la plus populaire est postcss-pxtorem. Elle transforme automatiquement les valeurs PX de votre CSS compilé en REM :

npm install postcss-pxtorem --save-dev

Configuration dans postcss.config.js :

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,          // Base font size
      unitPrecision: 5,       // Decimal places
      propList: ['*'],        // Convert all properties
      selectorBlackList: [],  // Selectors to ignore
      minPixelValue: 2,       // Ignore values below 2px
    },
  },
};

Avec cette configuration, vous écrivez le CSS en pixels et la sortie de build utilise REM :

/* Input */
.heading { font-size: 24px; margin-bottom: 16px; border: 1px solid #ccc; }

/* Output (border stays in px because 1px < minPixelValue threshold) */
.heading { font-size: 1.5rem; margin-bottom: 1rem; border: 1px solid #ccc; }

Vous pouvez exclure certaines propriétés ou certains sélecteurs de la conversion. Beaucoup d'équipes excluent border et box-shadow en personnalisant propList ou en ajoutant des commentaires /* px-to-rem-disable-next-line */.

Extensions VS Code

Plusieurs extensions VS Code fournissent une conversion en temps réel :

  • px to rem & rem to px (par cipchk) : met en évidence les valeurs PX et montre l'équivalent REM au survol. Prend en charge la conversion par lot du texte sélectionné via raccourci clavier.
  • CSS REM Converter : convertit inline pendant la saisie. Configurez la taille de police de base dans les paramètres de l'extension.
  • PX to REM : extension minimale centrée sur la conversion rapide depuis la palette de commandes.

Ces extensions vous permettent de voir l'équivalent REM sans quitter votre éditeur, ce qui rend la conversion fluide pendant le développement.

Fonction Sass/SCSS

Si vous utilisez Sass, une fonction personnalisée fournit une conversion à la compilation :

@function rem($px, $base: 16) {
  @return calc($px / $base * 1rem);
}

// Usage
.heading {
  font-size: rem(24);      // 1.5rem
  margin-bottom: rem(16);  // 1rem
  padding: rem(12) rem(20); // 0.75rem 1.25rem
}

Cette approche garde votre code source lisible avec des valeurs proches des pixels tout en émettant du REM dans le CSS compilé.


Foire aux questions

Quelle est la différence entre PX et REM en CSS ?

PX est une unité absolue qui s'affiche toujours à la même taille fixe, indépendamment des paramètres utilisateur. REM est une unité relative qui évolue selon la taille de police de l'élément racine <html>. Si un utilisateur augmente la taille de police par défaut de son navigateur, les valeurs REM grandissent proportionnellement tandis que les valeurs PX restent identiques. Pour les tailles de police et l'espacement, REM est préféré parce qu'il respecte les préférences d'accessibilité.

Comment convertir PX en REM ?

Divisez la valeur en pixels par la taille de police racine. Avec la racine par défaut de 16px : REM = PX / 16. Par exemple, 24px devient 24 / 16 = 1.5rem, et 14px devient 14 / 16 = 0.875rem. Si vous avez changé la taille racine (par exemple avec la technique 62,5 % pour une base 10px), divisez par cette base : 24 / 10 = 2.4rem.

Pourquoi 1rem vaut-il 16px ?

Parce que 16px est la taille de police par défaut que tous les grands navigateurs appliquent à l'élément <html>. REM étant défini comme "relatif à la taille de police de l'élément racine", et la racine valant par défaut 16px, 1rem = 16px. Vous pouvez modifier cette valeur en définissant une autre font-size sur l'élément html dans votre CSS.

Dois-je utiliser EM ou REM pour les tailles de police ?

Utilisez REM pour les tailles de police dans presque tous les cas. REM fournit des tailles cohérentes et prévisibles parce qu'il référence toujours la racine, pas le parent. Les valeurs EM se cumulent dans les éléments imbriqués, ce qui peut provoquer des gonflements inattendus. Réservez EM aux propriétés internes de composants, comme padding et margins, lorsque vous voulez que l'espacement évolue avec la taille du texte du composant.

Utiliser REM affecte-t-il les performances ?

Non. Les valeurs REM sont résolues une fois pendant la cascade CSS, comme les valeurs PX. Il n'y a aucune différence de performance à l'exécution entre PX et REM. Le navigateur calcule la valeur finale en pixels pendant le layout et l'affiche de la même manière. Le seul "coût" est le temps développeur pendant la conversion, que les outils comme PostCSS et les extensions VS Code éliminent.

Qu'est-ce que la technique de taille de police 62,5 % ?

Définir html { font-size: 62.5%; } change la taille de police racine de 16px à 10px (16 x 0.625 = 10). Cela rend les calculs PX-vers-REM triviaux : 14px = 1.4rem, 20px = 2rem, etc. Vous devez ajouter body { font-size: 1.6rem; } pour restaurer un texte courant lisible. La technique préserve l'accessibilité parce que les pourcentages sont relatifs à la valeur par défaut du navigateur de l'utilisateur.

Puis-je mélanger PX et REM dans le même projet ?

Oui, et la plupart des projets le font. L'approche courante consiste à utiliser REM pour les tailles de police, padding, margins et largeurs de layout (tout ce qui devrait évoluer avec les préférences utilisateur), tout en utilisant PX pour les bordures, box shadows, outlines et autres détails visuels fins qui doivent rester constants. Cette approche hybride offre à la fois accessibilité et précision visuelle.

Comment le zoom navigateur interagit-il avec REM ?

Le zoom navigateur (Ctrl/Cmd +/-) agrandit proportionnellement toute la fenêtre, affectant les valeurs PX et REM de la même manière. C'est un mécanisme distinct de la préférence de taille de police du navigateur. Lorsqu'un utilisateur zoome à 150 %, un élément 1rem et un élément 16px s'affichent tous deux 50 % plus grands. L'avantage d'accessibilité de REM concerne spécifiquement le respect de la préférence de taille de police, pas le comportement du zoom.


Résumé

La conversion PX-vers-REM est une formule simple avec des implications profondes pour l'accessibilité web et le responsive design. En exprimant les tailles en REM, vous permettez à chaque utilisateur, quelle que soit sa vision, son appareil ou ses préférences, d'utiliser votre site à l'échelle qui lui convient.

Points clés :

  • REM = PX / taille de police racine (racine par défaut : 16px)
  • REM respecte les préférences utilisateur ; PX ne le fait pas
  • La technique 62,5 % facilite le calcul mental (1rem = 10px) tout en préservant l'accessibilité
  • EM se cumule dans les éléments imbriqués ; REM ne se cumule pas : préférez REM pour la plupart des tailles
  • Gardez PX pour les bordures, ombres et détails visuels fins qui ne doivent pas évoluer
  • Tailwind CSS et Bootstrap utilisent déjà REM en interne, donc leurs classes utilitaires sont accessibles par défaut
  • PostCSS et les extensions VS Code automatisent la conversion afin que vous n'ayez jamais besoin de faire le calcul manuellement

Prêt à convertir ? Utilisez notre convertisseur PX vers REM gratuit pour traduire instantanément n'importe quelle valeur pixel en REM avec n'importe quelle taille de base, une table de référence complète et une sortie CSS prête à copier.

À propos de cet article

Cet article fait partie de notre collection de guides Convertisseurs. Explorez les outils, exemples et workflows pratiques associés sur CaesarCipher.org.

Autres Tutoriels Convertisseurs

Essayez l'outil Convertisseurs

Mettez le guide en pratique avec des outils et exemples liés à convertisseurs.

Essayez l'outil Convertisseurs