Convertisseur PX → REM, gratuit
Convertissez les pixels en rem et inversement, avec une taille de police de base configurable.
Table de référence
| PX | REM |
|---|
Comment ça marche
REM signifie « root em » et est relatif à la taille de police de l'élément racine. Par défaut, les navigateurs utilisent 16 px. La formule est simple : rem = px ÷ base et px = rem × base. Modifiez la taille de base ci-dessus si votre projet utilise une racine différente.
Questions fréquentes
Pourquoi utiliser rem au lieu de px ?
Les unités REM s'adaptent au réglage de taille de police de l'utilisateur dans son navigateur, améliorant l'accessibilité. Si un utilisateur augmente sa taille de police par défaut, les mises en page basées sur rem s'ajustent automatiquement, contrairement aux valeurs en pixels qui restent fixes.
Quelle est la différence entre em et rem ?
EM est relatif à la taille de police de l'élément parent et peut se cumuler dans les éléments imbriqués. REM est toujours relatif à la taille de police de l'élément racine (<html>), ce qui le rend plus prévisible.
Quelle base utiliser ?
La plupart des projets utilisent la valeur par défaut du navigateur de 16 px. Certains développeurs définissent html { font-size: 62.5%; } (10 px) pour des calculs plus simples. Utilisez la taille de police racine définie pour votre projet.
Ce qu'est réellement le rem
« Rem » signifie root em. La spécification W3C CSS Values Level 3 le définit comme « égal à la valeur calculée de font-size sur l'élément racine », c'est-à-dire sur l'élément <html>. Les navigateurs définissent <html> à 16px par défaut, sauf si on le remplace, de sorte que sur une page standard, 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, 2rem = 32px.
Si une feuille de style déclare html { font-size: 20px }, alors 1rem = 20px pour le reste du document. Si l'utilisateur a augmenté la valeur par défaut de son navigateur à 24px (un ajustement courant pour la basse vision), 1rem = 24px même sans aucune surcharge dans la feuille de style, et c'est tout l'argument d'accessibilité du rem en une phrase.
Pourquoi le rem compte : l'argument de l'accessibilité
Les navigateurs exposent aux utilisateurs deux mécanismes de mise à l'échelle différents, qui se comportent différemment vis-à-vis des unités :
- Le zoom du navigateur (Cmd/Ctrl + ou pincement) met à l'échelle uniformément l'ensemble du viewport. Un élément de 16px à un zoom de 200 % occupe le même espace à l'écran qu'un élément de 32px à un zoom de 100 %. Les
pxcomme lesremse mettent à l'échelle de façon identique sous le zoom, de sorte que le zoom à lui seul ne justifie pas le rem. - La préférence de taille de police par défaut du navigateur : enfouie dans les paramètres du navigateur (Firefox
about:preferences, la personnalisation des polices de Chrome). Lorsque l'utilisateur change la « taille de police par défaut » de 16 à 24 (très courant pour les utilisateurs malvoyants), l'élément<html>commence à se calculer à 24px. Chaque valeurremse met automatiquement à l'échelle de 1,5× ; chaque valeur enpxfixe reste exactement la même.
C'est pourquoi une mise en page construite en rem respecte la préférence d'accessibilité de l'utilisateur, alors qu'une mise en page construite en px ne le fait pas. Le critère de succès WCAG 2.2 1.4.4 (Redimensionnement du texte, niveau AA) exige que le texte puisse être agrandi à au moins 200 % sans perte de contenu ni de fonctionnalité. Le zoom du navigateur seul satisfait techniquement à ce critère, mais les mises en page basées sur rem le satisfont plus proprement, car elles respectent le mécanisme de taille de police par défaut plus granulaire, qui est ce que les utilisateurs malvoyants ajustent réellement au quotidien.
Le piège de cumul de l'em qui motive le rem
Avant le rem, la seule façon d'obtenir une typographie évolutive en CSS était l'em, qui est relatif à la taille de police de l'élément parent, pas à celle de la racine. Le problème classique : les éléments imbriqués dont les tailles de police sont basées sur l'em se cumulent.
.list { font-size: 1.2em; }
.list .list { font-size: 1.2em; } /* renders at 1.44× the grandparent */
.list .list .list { font-size: 1.2em; } /* now 1.728× */Trois listes imbriquées gonflent jusqu'à près du double de la taille du corps, ce qui n'est presque jamais voulu. Le rem résout cela en s'ancrant à la racine à chaque fois : trois éléments imbriqués à 1.2rem font tous 19,2px quelle que soit la profondeur d'imbrication. C'est pourquoi la plupart des feuilles de style modernes utilisent le rem pour la font-size et réservent l'em aux proportions internes d'un composant (tailles d'icônes qui doivent correspondre au texte d'un bouton, remplissage dans un bouton qui évolue avec son libellé).
L'astuce des 62,5 %, des calculs pratiques, une accessibilité discutable
Un modèle popularisé par Jonathan Snook dans son article de mai 2011 : définir html { font-size: 62.5% }. Comme 62,5 % × 16 = 10, cela fait 1rem = 10px par défaut, un calcul mental pratique. 1.6rem = 16px, 2.4rem = 24px, 4.8rem = 48px. Les designers l'ont apprécié parce qu'il supprime l'arithmétique malcommode du « diviser par 16 » de chaque valeur.
La critique d'accessibilité (soulevée à l'époque et renforcée dans des écrits ultérieurs) : définir la taille de police racine à 62,5 % réduit en réalité ce que l'utilisateur a choisi dans les préférences de son navigateur. Un utilisateur qui a réglé sa valeur par défaut à 24px parce qu'il est malvoyant verrait le corps de texte à 15px, ce qui anéantit tout l'intérêt d'utiliser le rem. La réfutation moderne consiste à régler la racine à 62,5 % mais à déclarer explicitement la taille de police du corps à 1.6rem (de retour à 16px) pour que la surcharge de l'utilisateur se propage correctement. De nombreuses équipes sautent entièrement l'astuce et vivent avec des calculs un peu moins élégants.
Quand utiliser rem, quand utiliser px : le cadrage de Comeau
L'article de Josh W. Comeau, « px or rem? » (mai 2022, mis à jour en mai 2025), propose l'heuristique à une seule question la plus utile pour cette décision. Demandez-vous : « Cette valeur doit-elle augmenter à mesure que l'utilisateur augmente la taille de police par défaut de son navigateur ? » Si oui, utilisez rem. Si non, utilisez px.
Selon ce test :
- Utilisez rem pour : la taille de police, les marges/remplissages verticaux (qui sont liés au rythme typographique), les largeurs de boutons et autres conteneurs façonnés par le contenu, les largeurs maximales de longueur de ligne, les points de rupture (pour que la mise en page change à la bonne taille agrandie pour les utilisateurs malvoyants).
- Utilisez px pour : les bordures (un filet de 1px doit rester un filet), le remplissage/la décoration horizontale, les rayons d'ombre, les tailles d'image lorsque l'image a une intention en pixels fixe, les dimensions fines d'icônes.
Le test à une seule question produit des réponses cohérentes sur des milliers de décisions dans une base de code, ce qui est le vrai gain : les feuilles de style obtenues se comportent comme les utilisateurs s'y attendent, à la fois sous le zoom et avec la personnalisation de la taille de police.
Tailwind CSS 4 est passé au tout-rem
Tailwind CSS v4.0 (janvier 2025) est livré avec une échelle par défaut entièrement basée sur le rem. Chaque jeton de typographie (text-xs 0,75rem jusqu'à text-9xl 8rem) et chaque jeton d'espacement (p-1 0,25rem, p-4 1rem, m-8 2rem) est en rem d'emblée. Tailwind 4 laisse délibérément la racine <html> à la valeur par défaut du navigateur de 16px (ils n'appliquent explicitement pas l'astuce des 62,5 %) pour que les préférences d'accessibilité de l'utilisateur se propagent proprement. Des dizaines de millions de projets livrent désormais des systèmes de design basés sur le rem par défaut, ce qui est l'argument le plus fort en faveur de la convergence de l'écosystème.
Table de conversion avec la racine par défaut de 16px
| Pixels | Rem | Usage courant |
|---|---|---|
| 8 px | 0,5 rem | La moitié de l'unité de base, petit espacement |
| 12 px | 0,75 rem | Légende / petits caractères |
| 14 px | 0,875 rem | Texte secondaire |
| 16 px | 1 rem | Corps de texte par défaut |
| 18 px | 1,125 rem | Corps légèrement accentué |
| 20 px | 1,25 rem | Paragraphe d'introduction |
| 24 px | 1,5 rem | Titre H4 ; grand texte d'interface |
| 32 px | 2 rem | Titre H3 |
| 48 px | 3 rem | Titre H2 / héros |
| 64 px | 4 rem | Titre H1 / d'affichage |
La place du rem dans la boîte à outils moderne
Le rem est le bon choix par défaut pour la typographie et l'espacement ancré à la typographie, mais ce n'est pas la réponse à tous les problèmes de mise en page. La boîte à outils moderne comprend aussi :
- clamp() pour la typographie fluide :
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem)définit un plancher et un plafond en rem avec un milieu piloté par le viewport. Convertisseur d'unités CSS, gratuit - Les unités de viewport (
vw,vh, et les plus récentessvh/lvh/dvhpour mobile), pour les sections héros et les éléments pleine largeur qui devraient s'adapter au viewport plutôt qu'à la typographie. - Les unités de requête de conteneur (
cqw,cqh), pour une conception pilotée par les composants où le même composant peut apparaître à différentes largeurs.
Pour tout le reste (corps de texte, titres, remplissages, largeurs de boutons, points de rupture), le rem est la solution de facilité et le choix par défaut le plus accessible.
Autres questions
Et si mon projet utilise une taille de police de base non standard ?
Changez le champ Taille de police de base ci-dessus pour la valeur que résout le html { font-size: … } de votre projet. Le calcul de conversion reste rem = px ÷ base quelle que soit la base. Si votre base de code utilise 18px, 32px devient 1.78rem ; à 10px (l'astuce des 62,5 %), elle devient 3.2rem. Sachez que remplacer la taille de police racine a des implications d'accessibilité pour les utilisateurs qui personnalisent la valeur par défaut de leur navigateur, voir la discussion sur l'astuce des 62,5 % ci-dessus.
Pourquoi 0,625rem ne s'affiche-t-il pas exactement à 10px ?
C'est le cas, mathématiquement, avec la racine par défaut de 16px : 0.625 × 16 = 10. Mais les navigateurs effectuent le rendu avec une précision au sous-pixel et peuvent aligner les valeurs finales sur des pixels d'appareil entiers, de sorte qu'une bordure 0.625rem peut occasionnellement apparaître légèrement différente d'une bordure 10px codée en dur selon le DPR du moniteur. Pour des filets d'un pixel parfaits, utilisez 1px directement ; pour tout le reste, la valeur basée sur le rem convient.
Puis-je mélanger rem et px dans la même feuille de style ?
Oui, et vous le devriez. Utilisez le rem pour les choses qui devraient s'adapter à la préférence de taille de police de l'utilisateur (typographie, rythme vertical, points de rupture) et le px pour celles qui ne le devraient pas (bordures, détails d'icônes, ombres décoratives). La question « cette valeur doit-elle s'adapter ? » de Comeau est le filtre pratique ; la réponse correspond proprement à l'une ou l'autre unité presque à chaque fois.
Les outils de build convertissent-ils automatiquement px en rem ?
Oui, des plugins PostCSS comme postcss-pxtorem et postcss-rem-to-responsive-pixel peuvent réécrire les valeurs en px de votre CSS source vers le rem pendant l'étape de build, avec des seuils configurables (par ex. « convertir tout ce qui est ≥ 12px »). Ils sont utiles lors de la migration d'une base de code existante chargée en px. Un convertisseur en direct comme cette page reste utile pour les cas ponctuels, les consultations de spécifications de design et l'apprentissage des calculs à la main.
Des données sont-elles envoyées à un serveur ?
Non. La conversion est une seule division, de l'arithmétique JavaScript pure qui s'exécute en local dans votre navigateur. Rien de votre saisie ne quitte la page ; l'outil fonctionne hors ligne une fois chargé.