Convertisseur PX en REM
Pour convertir des px en rem, divisez la valeur en pixels par la taille de police racine : rem = px / racine. Avec la racine par défaut du navigateur, 16px, on a 24px / 16 = 1.5rem. Changez la base ci-dessous – 14px pour Ant Design, 10px pour l'astuce des 62,5 % – et les valeurs rem et em la suivent ; la valeur en points, elle, suit les pixels, car 1px vaut toujours 0,75pt.
Le champ em suppose que l'élément hérite de la taille de police de base ci-dessus. En CSS, em se calcule d'après la taille de police de l'élément lui-même – et d'après celle du parent lorsque vous l'utilisez dans la propriété font-size.
Conversion en lot : collez du CSS ou une liste de valeurs en px
Chaque valeur en px est réécrite en rem d'après la taille de police de base ci-dessus.
Comment convertir des px en rem ?
La formule est rem = px / taille de police racine, et l'inverse px = rem x taille de police racine. Seule la taille de police de l'élément html racine compte, quelle que soit la profondeur d'imbrication de l'élément, et c'est ce qui rend le calcul en rem prévisible. Avec la racine par défaut de 16px : 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem et 40px = 2.5rem.
N'arrondissez pas le résultat. 15px valent exactement 0.9375rem avec une racine de 16px ; arrondir à 0.94rem porte la taille rendue à 15.04px et casse l'alignement d'une grille. Les navigateurs calculent les longueurs sous-pixel et les alignent sur la grille de pixels de l'appareil au moment du rendu : copiez donc la valeur exacte donnée par le convertisseur. Le convertisseur affiche jusqu'à six décimales : exactes pour les racines qui tombent juste, comme 16px et 10px, et précises au millionième de rem pour une racine comme 14px qui ne tombe pas juste.
Table px vers rem pour des racines de 16px, 14px et 10px
Une même valeur en pixels donne trois valeurs en rem différentes selon la racine définie par votre projet ; cette table les donne toutes les trois, avec l'équivalent en points (CSS définit 1px comme 1/96 de pouce et 1pt comme 1/72, donc 1px = 0.75pt). Les colonnes 16px et 10px sont exactes. Avec une racine de 14px, la division tombe rarement juste : ces valeurs sont arrondies à quatre décimales et signalées par le signe d'approximation, tandis que le convertisseur ci-dessus affiche plus de décimales.
| Pixels | rem (racine 16 px) | rem (racine 14 px) | rem (racine 10 px) | Points |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem ou em : quelle unité choisir ?
Le partage pratique : rem pour tout ce qui doit suivre la taille de texte du lecteur, em pour les valeurs qui doivent suivre la taille de police de l'élément lui-même, et px uniquement là où une longueur doit rester physiquement fixe. La colonne d'exemple suppose une racine de 16px et un parent à 16px.
| Unité | Relative à | 20px équivaut à | Idéale pour | Suit la taille de texte du lecteur |
|---|---|---|---|---|
| px | Rien : unité absolue (1px = 1/96 de pouce) | 20px | Bordures d'un pixel, anneaux de focus, tailles d'icônes exactes | Non |
| rem | La taille de police de l'élément html racine | 1.25rem | Tailles de police, espacements, points de rupture, échelles typographiques | Oui |
| em | La taille de police de l'élément lui-même (celle du parent pour font-size) | 1.25em | Un remplissage qui doit grandir avec le libellé qu'il entoure | Oui |
| % | La valeur du parent pour cette propriété | 125% | Largeurs fluides et anciennes cascades de font-size | Oui (font-size) |
Faut-il utiliser px ou rem pour les marges intérieures, les marges et les bordures ?
Utilisez rem pour les marges intérieures et extérieures qui doivent respirer quand le texte grandit : remplissage des boutons, gouttières des cartes, espacement des sections, écarts de grille. Gardez px pour les traits fins. Une bordure de 1px vaut un pixel indépendant de l'appareil, bien net, alors que la même bordure écrite 0.0625rem peut être arrondie à zéro ou devenir floue à certains niveaux de zoom, et il en va de même pour les anneaux de focus et les séparateurs de 2px. C'est pourquoi la conversion en lot ci-dessus laisse par défaut les valeurs 1px et 2px intactes et réécrit tout le reste.
Les media queries sont l'autre endroit où rem fait la différence. Dans une media query, rem se calcule d'après la taille de police initiale du navigateur et non d'après votre règle html : un point de rupture à 48rem vaut 768px pour un lecteur aux réglages par défaut et grandit pour celui qui a augmenté sa taille de texte. Un point de rupture en px, lui, ne bouge jamais.
Comment convertir des px en rem dans Figma, VS Code et Tailwind ?
Figma mesure en px, mais le Dev Mode peut produire des rem : ouvrez les réglages d'Inspect, choisissez « Set unit scale » et saisissez votre taille de police racine (1rem = 16px par défaut). Les extensions VS Code comme cssrem convertissent via l'autocomplétion et exposent la racine dans les réglages – cssrem.rootFontSize, 16 par défaut – vérifiez donc qu'elle correspond avant de faire confiance au résultat sur un projet en 14px. Pour un fichier entier, collez-le dans le champ de conversion en lot ci-dessus après avoir réglé la base. L'échelle par défaut de Tailwind est déjà en rem avec une racine de 16px : une unité d'espacement vaut 0.25rem (4px), donc 16px donne 4, 24px donne 6 et 40px donne 10.
Sources
À propos de Convertisseur PX en REM
Ce convertisseur px vers rem répond à une seule question : que devient, dans le CSS, une valeur en pixels de votre fichier de design, avec la taille de police racine que votre projet utilise réellement ? Déplacez le curseur de base – 16px est la valeur par défaut du navigateur, 14px celle d'Ant Design, 10px l'ancienne astuce des 62,5 % – et chaque valeur rem et em de la page est recalculée d'après elle, de sorte que vous n'avez jamais à vous rappeler pour quelle base un nombre a été écrit.
La base à saisir est celle que votre feuille de style applique à l'élément html – pas à body, et pas la taille de police du composant que vous stylez. Si aucune règle ne la fixe, c'est la valeur par défaut du navigateur qui s'applique : 16px, sauf si le lecteur l'a augmentée. Dans les DevTools, sélectionnez le nœud html et lisez sa font-size calculée ; ce nombre est le diviseur de toute la feuille. Les quatre boutons de framework le remplissent pour Tailwind, Bootstrap, Material UI et Ant Design.
La particularité ici, c'est le mode par lot : collez une feuille de style, un export de specs Figma ou une simple liste de nombres et récupérez une version en rem avec le décompte de ce qui a changé, prête à copier ou à télécharger en CSV. Sous l'outil, vous trouverez la formule dans les deux sens, une table de 1px à 96px pour trois racines avec les équivalents en points, un tableau comparatif des unités et dix questions traitées en détail.
Cas d'utilisation
Comment utiliser
Réglez la taille de police de base (racine) : 16px est la valeur par défaut du navigateur, 14px correspond à Ant Design, 10px donne l'astuce des 62,5 %.
Saisissez la valeur en pixels dans le champ Pixels. Les champs rem, em et pt se mettent à jour au fur et à mesure.
Ou faites l'inverse : entrez une valeur en rem et lisez la taille en pixels qu'elle produit avec la racine actuelle.
Touchez une valeur de la table rapide de 8px à 96px pour la charger, ou consultez la table complète pour des racines de 16px, 14px et 10px.
Collez tout un bloc CSS dans la conversion en lot pour réécrire toutes les valeurs en px d'un coup, en conservant les bordures de 1px et 2px.
Copiez la déclaration CSS générée, ou téléchargez les paires px/rem converties au format CSV pour votre transfert vers le design.
Astuces Pro
- Réglez d'abord la taille de police de base : elle détermine chaque valeur rem et em de la page – les champs, les boutons rapides et la conversion en lot –, donc passer à une racine de 14px les réécrit toutes d'un coup.
- Laissez les bordures de 1px et 2px en px. Les bordures sous-pixel peuvent être arrondies à zéro à certains niveaux de zoom, et c'est pour cela que le mode en lot les ignore par défaut.
- pt ne dépend pas de la racine : 24px valent 18pt que votre base soit à 16px ou à 10px, donc le champ Points ne bouge pas quand vous déplacez le curseur.
- Le mode en lot se relance dès que vous déplacez le curseur de base : vous pouvez voir la même feuille de styles avec une racine de 16px puis de 14px sans la coller deux fois.
- Ne prenez em que lorsqu'une valeur doit suivre la taille de police de son propre élément, comme le remplissage d'un bouton autour de son libellé, et gardez le reste en rem pour que rien ne se cumule.
Questions fréquemment posées
Divisez la valeur en pixels par la taille de police racine : rem = px / racine. La racine par défaut du navigateur est 16px, donc 24px / 16 = 1.5rem et 10px / 16 = 0.625rem. Pour rem, seule compte la taille de police de l'élément racine, quelle que soit la profondeur d'imbrication de l'élément – c'est exactement ce qui rend le calcul prévisible sur toute une feuille de styles.
Avec la racine par défaut de 16px, 1rem = 16px, 1.5rem = 24px et 2rem = 32px ; ici on multiplie au lieu de diviser : px = rem x racine. Si la racine est à 14px, comme dans Ant Design, 1rem tombe à 14px et 1.5rem devient 21px. Une valeur en rem ne veut rien dire sans sa racine : indiquez toujours la base à côté.
Une taille de police en px ignore la taille de texte choisie par le lecteur dans son navigateur : quelqu'un qui a réglé sa valeur par défaut sur 20px reçoit quand même vos 14px codés en dur. rem se mesure d'après ce réglage, donc toutes les tailles évoluent ensemble. Le critère de succès 1.4.4 de WCAG 2.2 attend que le texte supporte un agrandissement à 200 %, et une échelle typographique en rem y parvient sans une seule media query supplémentaire.
rem est toujours relatif à la taille de police de l'élément html racine. em est relatif à la taille de police de l'élément sur lequel il est écrit, sauf dans la propriété font-size elle-même, où il se calcule d'après la taille de police du parent. C'est pourquoi les tailles de police imbriquées se cumulent : 0.9em dans 0.9em dans 0.9em donne 0.729 de la valeur d'origine. rem ne se cumule jamais, ce qui en fait le choix le plus sûr pour les échelles typographiques et les espacements de mise en page.
Utilisez rem pour les marges qui doivent respirer quand le texte grandit : remplissage des boutons, gouttières des cartes, espacement des sections. Gardez px pour les traits fins : une bordure de 1px reste nette, alors que son équivalent en rem peut être arrondi à zéro ou devenir flou à certains niveaux de zoom. C'est précisément pour cela que la conversion en lot de cette page laisse par défaut les valeurs 1px et 2px en px.
Restez à 16px sauf si un framework impose autre chose, car cela correspond au réglage par défaut du navigateur. Ant Design livre une racine de 14px. L'astuce des 62,5 % applique html { font-size: 62.5% } pour que 1rem = 10px et que le calcul devienne px / 10 : 24px valent 2.4rem. Elle continue de suivre le réglage du lecteur – 62,5 % d'une valeur par défaut de 20px font 12.5px – mais vous devez ensuite écrire body { font-size: 1.6rem }, sinon chaque paragraphe s'affiche en 10px, et les composants tiers conçus pour une racine de 16px paraissent trop petits. Les trois racines figurent dans la table ci-dessus.
Relevez la valeur dans l'inspecteur et divisez-la par votre racine : un titre de 28px vaut 1.75rem avec une racine de 16px, une légende de 12px vaut 0.75rem. Le Dev Mode peut aussi produire des rem : ouvrez les réglages d'Inspect à côté du menu de langage, choisissez « Set unit scale » et indiquez votre taille de police racine (1rem = 16px par défaut). Collez tout un bloc exporté dans le champ de conversion en lot ci-dessus pour réécrire toutes les valeurs d'un coup.
Oui, et c'est généralement préférable. Dans une media query, rem se calcule d'après la taille de police initiale du navigateur et non d'après votre règle html : un point de rupture à 48rem vaut 768px avec les réglages par défaut et grandit pour les lecteurs qui ont agrandi leur texte. em s'y comporte de la même façon. Les points de rupture écrits en px restent fixes quel que soit le choix du lecteur.
Non. Les navigateurs calculent les longueurs sous-pixel et les alignent sur les pixels de l'appareil au rendu : 0.9375rem donne exactement 15px avec une racine de 16px. Arrondir à 0.94rem le porte à 15.04px, et cette erreur s'accumule sur une grille ou un rythme vertical. Copiez la valeur exacte affichée par le convertisseur et laissez le navigateur faire l'alignement.
CSS définit 1px comme 1/96 de pouce et 1pt comme 1/72, donc 1px = 0.75pt et 16px = 12pt : c'est le rapport derrière la colonne des points dans la table. Le dp d'Android est un système distinct où 1dp = 1px à 160 ppp, et c'est pourquoi un espacement Material de 16dp se retrouve proche de 16px sur le web plutôt que d'une conversion en rem.