Convertisseur de PX en REM

Le Convertisseur de PX en REM transforme les valeurs en pixels en unités rem ou em — et inversement — en utilisant la taille de police racine réellement employée par votre projet. Collez une seule valeur ou toute une échelle typographique pour obtenir les nombres convertis, un bloc CSS prêt à copier qui conserve les pixels d’origine dans des commentaires, une règle affichant chaque taille à l’échelle réelle et un aperçu de la réaction de vos valeurs en rem lorsque le visiteur augmente la taille de police de son navigateur.

Formule de conversion px vers rem

La conversion entre les pixels et rem se résume à une division — la seule chose que vous devez connaître est la taille de police racine du document.

Avec la taille racine par défaut du navigateur de 16 px, on obtient 24px ÷ 16 = 1.5rem et 1.5rem × 16 = 24px. Si votre feuille de style définit html { font-size: 62.5%; }, la racine devient 10 px et les mêmes 24 px valent 2.4rem.

Table de conversion px vers rem (racine de 16px)

rem et em : pourquoi l’imbrication change tout

rem est mesuré par rapport à l’élément racine (html), et signifie donc la même chose partout dans le document. em est mesuré par rapport à la taille de police calculée de l’élément parent : des valeurs em identiques se cumulent donc à mesure que vous les imbriquez. Ce diagramme montre le même multiplicateur 1.5 appliqué sur trois niveaux, à partir d’une racine de 16 px :

La règle pratique retenue par la plupart des équipes est la suivante : utilisez rem pour les tailles de police, les espacements de mise en page et les points d’arrêt ; utilisez em délibérément pour les éléments qui doivent évoluer avec leur propre composant, comme le padding à l’intérieur d’un bouton ou la taille d’une icône placée à côté du texte.

Pourquoi utiliser rem plutôt que px ?

• Accessibilité. Un visiteur qui définit la taille de police par défaut de son navigateur à 20 px voit toutes les tailles basées sur rem grandir proportionnellement. Les tailles codées en dur en px ignorent complètement cette préférence.
• Un seul réglage pour la mise à l’échelle globale. Modifiez la taille de police racine dans une media query et toute votre échelle typographique ainsi que votre rythme d’espacement évoluent ensemble — sans remplacement propre à chaque composant.
• Rythme d’espacement cohérent. Exprimer les paddings et les marges en rem maintient le rythme vertical lié à l’échelle typographique au lieu de le laisser dériver.
• Compatible avec les tokens de design. Les systèmes de design modernes (ainsi que l’échelle par défaut de Tailwind) publient leurs tailles en rem ; convertir vos valeurs px existantes facilite donc la transmission.

L’astuce de la taille de police racine à 62,5 %

De nombreuses équipes ajoutent cette règle pour que 1rem corresponde à 10 px, ce qui simplifie le calcul mental :

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* retour à 16px lisibles */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Comme 62.5% correspond à un pourcentage de la valeur par défaut du navigateur plutôt qu’à une valeur fixe en pixels, cette méthode respecte toujours la préférence de taille de police du visiteur. N’oubliez pas de ramener body à environ 1.6rem, sinon votre texte par défaut sera de 10 px. Définissez le champ de taille de police racine ci-dessus sur 10 pour effectuer les conversions avec cette configuration.

rem dans les media queries

Dans une media query, rem est résolu par rapport à la taille de police racine initiale du navigateur — et non à la taille de police html définie dans votre CSS. Ainsi, @media (min-width: 48rem) vaut toujours 768 px, même si votre feuille de style déclare html { font-size: 10px }. Les points d’arrêt en rem sont donc sûrs et prévisibles ; c’est aussi l’un des rares endroits où em et rem se comportent de manière identique.

Quand continuer à utiliser px

• Bordures très fines et séparateurs — une bordure de 1 px doit rester à 1 px ; la mettre à l’échelle produit des lignes floues en sous-pixels.
• Ressources de taille fixe — décalages de sprites, décalages précis d’ombres et images dont la taille intrinsèque est connue.
• Canvas et impression — lorsque la mesure physique ou en pixels d’écran correspond réellement à ce que vous voulez exprimer.

Comment utiliser ce convertisseur

1. Choisissez un sens : px → rem, rem → px, px → em ou em → px.
2. Saisissez vos valeurs : un nombre ou toute une échelle séparée par des virgules ou des espaces (jusqu’à 20 à la fois). Les unités finales telles que 24px sont acceptées et ignorées.
3. Définissez la taille de police racine : gardez 16 pour les valeurs par défaut du navigateur ou appuyez sur une puce prédéfinie pour 10 (astuce des 62,5 %), 12, 14, 18 ou 20.
4. Cliquez sur Convertir : consultez le tableau des résultats, la règle à l’échelle réelle, l’aperçu d’accessibilité et le bloc CSS.
5. Copiez le CSS : un bouton copie toutes les déclarations font-size en conservant la valeur en pixels dans un commentaire.

Questions fréquentes

Comment convertir des px en rem ?

Divisez la valeur en pixels par la taille de police racine. Avec la racine par défaut du navigateur de 16 px, 24 px ÷ 16 = 1.5rem. Pour faire l’inverse, multipliez la valeur en rem par la taille de police racine : 1.5rem × 16 = 24 px.

Combien de px vaut 1rem ?

1rem équivaut à la taille de police racine de la page. Dans les principaux navigateurs, la valeur par défaut est de 16 px : 1rem vaut donc 16 px, sauf si l’élément html ou les paramètres du navigateur du visiteur la modifient.

Quelle est la différence entre rem et em ?

rem est toujours relatif à la taille de police racine de l’élément html : 1.5rem a donc la même taille partout dans le document. em est relatif à la taille de police de son propre élément parent ; les éléments imbriqués se cumulent donc : 1.5em dans un autre 1.5em s’affiche à 2.25 fois la taille de base.

Quelle est l’astuce de la taille de police racine à 62,5 % ?

Définir html { font-size: 62.5%; } fait passer la racine à 10 px au lieu de 16 px : 1rem vaut alors 10 px et le calcul mental devient simple, puisque 24 px valent 2.4rem. L’échelle continue de suivre la préférence de taille de police du navigateur du visiteur, car 62.5 % est relatif et non une valeur absolue en pixels.

Faut-il utiliser px ou rem pour les tailles de police ?

Utilisez rem pour les tailles de police, les espacements et les media queries afin que la mise en page grandisse lorsqu’un visiteur augmente la taille de police par défaut de son navigateur. Réservez px aux valeurs qui ne doivent pas changer d’échelle, comme les bordures très fines, les séparateurs d’un pixel et certains décalages d’ombres.

Les valeurs en rem doivent-elles être des nombres entiers ?

Non. Les navigateurs gèrent très bien les valeurs rem fractionnaires et calculent les tailles en sous-pixels en interne. Si vous préférez des nombres simples, choisissez une taille de police racine qui divise régulièrement votre échelle, comme 10 px ou 8 px, ou utilisez l’option de précision décimale de ce convertisseur.

rem fonctionne-t-il pour le padding, la marge et les media queries ?

Oui. rem est valide partout où CSS accepte une longueur, notamment pour padding, margin, width, gap et border-radius. Dans les media queries, rem est résolu par rapport à la racine initiale de 16 px plutôt qu’à votre taille de police html personnalisée : un point d’arrêt de 48rem vaut donc toujours 768 px.

Ressources supplémentaires

• Unités de longueur CSS - MDN
• Longueurs relatives à la police - Valeurs CSS du W3C