Convertissez les pixels en rem avec la base de votre choix
Avec le réglage par défaut du navigateur, 24 pixels valent 1,5rem et 14 pixels valent 0,875rem. Saisissez la mesure de la maquette, réglez la taille de police de base et reportez le résultat directement dans la feuille de styles. 32 px, par exemple, font 2rem quand la racine vaut 16.
À quoi sert la conversion des pixels en rem ?
Le pixel se convertit en rem par une seule division : le nombre de pixels divisé par la taille de police de base. Avec le réglage par défaut du navigateur, cette base vaut 16 px, donc 24 pixels donnent 1,5rem et 14 pixels donnent 0,875rem. L’unité rem renvoie à la taille de texte de l’élément html, la racine du document[1].
La maquette arrive avec des mesures en pixels, puisque les logiciels de design comptent ainsi, et la feuille de styles s’écrit en rem pour que la mise en page réponde aux réglages du lecteur.
Le résultat est donné avec quatre décimales, car pour une base de 16 px un seul pixel vaut exactement 0,0625rem et les tailles de texte de 14 et 18 px donnent 0,875 et 1,125rem.
Vous trouverez plus bas un tableau de 30 valeurs pour trois bases, la marche à suivre pour automatiser la conversion dans le projet et un tour des propriétés CSS avec la réponse sur celles à passer en rem. Le chemin inverse revient au convertisseur de rem en pixels.
Comment calculer les pixels en rem à la main ? Formule et exemple
La formule tient en une opération : rem = pixels ÷ taille de police de base. C’est l’inverse de la multiplication qui transforme les rem en pixels.
Exemple avec un espacement de 20 px : pour une base de 16, cela donne 20 ÷ 16 = 1,25rem. La même valeur avec la base de 10 px de la technique des 62,5 % donne 2rem, puisque diviser par dix se fait de tête.
Les mesures d’une maquette peuvent aussi donner des fractions : 18 pixels valent 1,125rem, 30 pixels valent 1,875rem et 22 pixels valent 1,375rem. Les trois sont exactes, si bien que vous les écrivez directement dans la feuille de styles.
L’unité em se calcule de la même manière, en divisant par la taille de police de l’élément parent au lieu de celle de la racine : ce calcul revient au convertisseur de pixels en em. Si la mesure part vers le papier, le même fichier relève du convertisseur de pixels en pouces.
Combien de rem valent les valeurs courantes en pixels ?
| Valeur en pixels | Base 16 px (par défaut) | Base 10 px (62,5 %) | Base 20 px (texte agrandi) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Comment convertir les pixels en rem automatiquement dans un projet ?
Pour une valeur isolée, le convertisseur ci-dessus suffit. Pour une feuille de styles entière, le calcul passe à un outil qui l’exécute à chaque compilation du projet.
Dans un préprocesseur, vous écrivez une fonction qui divise le nombre par la base. En Sass, cela donne @function rem($px) { @return math.div($px, 16) * 1rem; }, puis dans la règle vous posez padding: rem(24) et obtenez 1.5rem. La base tient alors en un seul endroit et se modifie une fois.
La deuxième voie travaille sur la feuille terminée et laisse votre façon d’écrire intacte. Le module postcss-pxtorem, branché sur l’étape de compilation, parcourt le fichier de sortie et remplace les pixels par des rem selon la base configurée. En août 2026, le registre npm en a enregistré plus de 880 000 téléchargements[2].
La troisième voie passe par les variables CSS. Vous écrivez --space-6: 1.5rem une fois dans la feuille, puis vous appelez le nom plutôt que le nombre. La conversion se fait alors une seule fois, à la définition de l’échelle, et non dans chaque règle.
Quelles propriétés passer en rem et lesquelles laisser en pixels ?
| Propriété CSS | Passer en rem ? | Pourquoi |
|---|---|---|
| font-size | Oui | Le cœur du sujet : la taille de texte doit répondre au réglage du navigateur |
| padding et margin | Oui | L’espace autour du texte doit grandir avec lui, sinon un corps plus grand se retrouve à l’étroit |
| largeur d’une colonne de texte | Oui | La longueur de ligne se mesure en caractères, la largeur suit donc la taille de texte |
| line-height | Non, sans unité | Un multiplicateur nu comme 1.5 s’hérite correctement à toute profondeur |
| border-width | Non | Un filet doit rester un filet, quelle que soit la taille de texte |
| box-shadow | Non | L’ombre est un effet graphique sans rapport avec la taille du texte |
| border-radius | En général non | Le rayon décrit la forme de l’élément, pas son contenu |
| points de rupture des media queries | Oui, mais en em | Dans une media query le navigateur compte à partir de la taille de texte par défaut et non de l’élément html, l’em s’y comporte donc de façon prévisible[3] |
Quand convertir des pixels en rem ?
Passer la maquette au code
Le design donne 24 px d’espacement et la feuille de styles doit recevoir 1,5rem.Fixer l’échelle du projet
Plutôt que de convertir dans chaque règle, vous définissez une fois des variables CSS ou une fonction dans le préprocesseur et appelez les noms.Réécrire une ancienne feuille
La migration des pixels vers les rem porte sur les tailles de texte et les espacements, tandis que bordures et ombres restent en place.Contrôle d’accessibilité
Les valeurs écrites en rem grandissent avec la taille de texte choisie par le lecteur. Le critère WCAG 1.4.4 demande que le texte puisse être agrandi sans perte de contenu ni de fonctionnalité, jusqu’à 200 %[4].
Le pixel et le rem côte à côte
| Caractéristique | px | rem |
|---|---|---|
| Point de référence | Aucun, c’est une valeur absolue | Taille de police de l’élément html |
| Valeur par défaut | 1 px = 1/96 de pouce | 1rem = 16 px |
| Réaction aux réglages du lecteur | Reste identique | Suit ces réglages |
| Où la valeur est indiquée | Maquettes, logiciels de design, fichiers image | Feuilles de styles, systèmes de design |
| Emploi habituel | Bordures, ombres, filets | Tailles de texte, espacements, largeurs |
| Automatisation | Valeur écrite telle quelle | Fonction du préprocesseur ou module à la compilation |
Convertir Pixels en d'autres unités
Sources
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Toutes les valeurs des tableaux ont été calculées à partir des définitions des unités et vérifiées par le calcul avant publication. Les données historiques et les noms des unités locales proviennent des sources citées ci-dessus.
Dernière révision du contenu : · rédigé et vérifié par l'équipe Arteon
Questions fréquentes
Combien de rem vaut 1 pixel ?
Avec la base de 16 px par défaut, un pixel vaut 0,0625rem. Avec la base de 10 px de la technique des 62,5 % ce même pixel donne 0,1rem, et avec un texte agrandi à 20 px il donne 0,05rem. Le sens inverse, des rem vers les pixels, est calculé par le convertisseur de rem en pixels.
Comment convertir des px en rem ?
Divisez le nombre de pixels par la taille de police de base. Avec les 16 px par défaut, cela donne 24 ÷ 16 = 1,5rem. Le convertisseur ci-dessus effectue cette division pour toute base de 1 à 100 px.
Combien de rem valent 24 px ?
1,5rem pour une base de 16 px, 2,4rem pour une base de 10 px et 1,2rem pour 20 px.
Combien de rem valent 14 px ?
0,875rem avec la base de 16 px par défaut. Pour une base de 10 px, cela fait 1,4rem, et pour 20 px, 0,7rem.
Combien de rem valent 20 px ?
1,25rem pour une base de 16 px. Avec une base de 10 px la valeur tombe sur 2rem ronds, ce qui plaide pour la technique des 62,5 % dans les projets à large échelle d’espacement.
Combien de rem valent 12 px ?
0,75rem pour une base de 16 px. Pour une base de 10 px, cela fait 1,2rem, et pour 20 px, 0,6rem.
Combien de rem valent 40 px ?
2,5rem pour une base de 16 px, 4rem pour une base de 10 px et 2rem pour 20 px.
Combien de rem valent 80 px ?
5rem avec la base de 16 px par défaut. Avec une base de 10 px cela fait 8rem et avec 20 px cela fait 4rem.
Faut-il arrondir le résultat en rem ?
Des valeurs comme 0,875 ou 1,875rem s’écrivent telles quelles. Le navigateur les calcule exactement, tandis qu’un arrondi à 0,88rem déplacerait la taille de texte d’une fraction de pixel.
Comment convertir les pixels en rem automatiquement ?
Dans un préprocesseur, vous écrivez une fonction qui divise par la base puis posez rem(24) à la place d’un nombre. Sur une feuille terminée, le module postcss-pxtorem s’en charge à la compilation. La troisième voie passe par les variables CSS, avec l’échelle définie une fois.
Faut-il passer toute la feuille de styles en rem ?
Les tailles de texte, les espacements et les largeurs de colonne, oui, puisqu’ils doivent grandir avec le réglage du lecteur. Bordures, ombres et filets restent en pixels, et la hauteur de ligne s’écrit sans unité, en simple multiplicateur. Les espacements qui doivent suivre la taille de texte locale peuvent passer en em, que calcule le convertisseur de pixels en em.
Quelle unité convient dans les media queries ?
L’em. Dans une media query le navigateur résout les unités relatives par rapport à la taille de texte par défaut et non par rapport à la valeur posée sur l’élément html : un point de rupture écrit en em se comporte donc de façon prévisible même si le projet emploie la technique des 62,5 %.
Aidez-nous à améliorer nos outils
Vous avez une idée de fonction, vous avez repéré une erreur ou vous souhaitez proposer un autre outil ? Écrivez-nous.