Convertisseur px en rem
Convertissez des pixels CSS en rem, et des rem en pixels, avec une taille de police racine modifiable. L’outil est pensé pour intégrer une maquette, relire un design system, transformer une valeur de Figma en CSS ou vérifier des espacements responsive sans perdre la logique d’accessibilité.
La taille racine correspond généralement à `html { font-size: 16px; }`, mais certains sites la modifient. Les valeurs négatives sont acceptées pour les espacements ou translations, même si elles sont rares pour une taille de police.
Que sont le px et le rem ?
Le pixel CSS, noté px, est une unité de longueur utilisée dans les feuilles de style. Il ne correspond pas toujours à un pixel physique d’écran, car les navigateurs, les densités d’affichage et le zoom adaptent le rendu. Pour les designers et intégrateurs, le px reste pourtant l’unité la plus directe lorsqu’une maquette indique une taille de texte, une marge ou une largeur de composant.
Le rem est une unité relative à la taille de police racine du document. Si la racine vaut 16 px, alors 1 rem vaut 16 px, 1,5 rem vaut 24 px et 0,875 rem vaut 14 px. Son avantage est de respecter plus naturellement les préférences utilisateur et les réglages de zoom. Dans un design system, les rem rendent les tailles et espacements plus cohérents lorsque la base typographique change.
Convertir px en rem n’est pas une simple convention esthétique. C’est une façon de lier le rendu visuel à une échelle typographique. Le calcul dépend toujours de la taille racine. Si votre projet utilise 10 px ou 18 px comme base, les résultats changent immédiatement.
Formules de conversion
rem = px ÷ racine. Avec une racine de 16 px, 24 px donnent 1,5 rem. En sens inverse, px = rem × racine. Avec la même racine, 0,875 rem donne 14 px.
La racine doit être strictement positive. Une base à zéro n’a pas de sens en CSS et rendrait impossible le calcul.
Historique récent
L’historique garde les conversions validées avec la racine actuelle, utile pendant une passe d’intégration ou de refonte.
Exemples de conversion
Taille de texte
Calcul : 18 px ÷ 16 = 1,125 rem. Résultat : une taille de texte de 18 px s’écrit `font-size: 1.125rem;` avec une racine de 16 px.
Espacement de carte
Calcul : 24 px ÷ 16 = 1,5 rem. Résultat : une marge interne de 24 px devient `padding: 1.5rem;`, plus alignée avec l’échelle typographique.
Valeur inverse
Calcul : 2 rem × 16 = 32 px. Résultat : un composant défini à 2 rem représente 32 px avec la base par défaut.
Table px en rem avec racine 16 px
| px | rem | Usage fréquent |
|---|---|---|
| 1 | 0,0625 | Bordure fine. |
| 2 | 0,125 | Petit ajustement. |
| 4 | 0,25 | Micro-espace. |
| 8 | 0,5 | Espacement compact. |
| 10 | 0,625 | Petite valeur. |
| 12 | 0,75 | Texte ou marge. |
| 14 | 0,875 | Texte secondaire. |
| 16 | 1 | Base. |
| 18 | 1,125 | Texte important. |
| 20 | 1,25 | Sous-titre. |
| 24 | 1,5 | Espacement ou titre. |
| 32 | 2 | Grande marge. |
| 48 | 3 | Section. |
| 64 | 4 | Grande respiration. |
Conversions populaires
| Recherche | Résultat avec 16 px | Utilisation |
|---|---|---|
| 12 px en rem | 0,75 rem | Texte petit. |
| 14 px en rem | 0,875 rem | Label. |
| 16 px en rem | 1 rem | Base. |
| 24 px en rem | 1,5 rem | Espace. |
| 0,5 rem en px | 8 px | Petit espace. |
| 1 rem en px | 16 px | Base. |
| 1,25 rem en px | 20 px | Titre compact. |
| 2 rem en px | 32 px | Grande marge. |
Bonnes pratiques CSS
Texte
Les rem sont souvent préférables pour les tailles de police, car ils suivent mieux les préférences de lecture et les réglages du navigateur.
Espacements
Utiliser des rem pour `padding` et `margin` peut garder un rythme cohérent avec la typographie du site.
Bordures
Pour des bordures d’un pixel, le px reste courant. Tout ne doit pas forcément être converti en rem.
Questions fréquentes
Q : Quelle est la formule px en rem ?
R : Divisez la valeur en px par la taille racine en px. Avec 16 px, 24 px donnent 1,5 rem.
Q : 1 rem vaut-il toujours 16 px ?
R : Non. 16 px est la valeur par défaut fréquente, mais le site ou l’utilisateur peut changer la racine.
Q : Peut-on convertir rem en px ?
R : Oui. Multipliez les rem par la taille racine.
Q : Pourquoi garder des décimales en rem ?
R : Les valeurs comme 0,875 rem ou 1,125 rem correspondent à des tailles courantes de 14 px et 18 px avec une racine de 16 px.
Q : Les valeurs négatives sont-elles valides ?
R : Elles peuvent l’être pour des marges ou transformations, mais pas pour une taille de police standard.
Q : Faut-il convertir tous les px en rem ?
R : Non. Les rem sont utiles pour la typographie et les espacements, tandis que certains traits fins restent naturellement en px.
Conseil d’intégration
Lorsque vous reprenez une maquette, convertissez les valeurs importantes dans une échelle cohérente plutôt que de transformer chaque pixel mécaniquement. Les textes, espacements principaux et hauteurs de composants gagnent souvent à être exprimés en rem. Les ombres, bordures et petites corrections visuelles peuvent rester en px si cela rend le CSS plus clair.
Indiquez toujours la racine utilisée dans votre documentation. Une bibliothèque qui annonce `1.5rem` sans préciser la base peut produire 24 px sur un site et 27 px sur un autre. Le convertisseur vous aide à calculer, mais la cohérence vient surtout d’un design system qui documente sa base typographique.
Bonnes pratiques CSS
Dans une feuille de style, convertir les px en rem aide à conserver une interface plus adaptable aux préférences de lecture. Les bordures très fines, les ombres et certains détails graphiques restent souvent en pixels, tandis que les tailles de texte, espacements de blocs, rayons et hauteurs de composants gagnent à suivre la base racine. Si une maquette fournit tout en pixels, commencez par les valeurs structurantes puis vérifiez le rendu avec une taille racine différente de 16 px. Cette vérification révèle vite les espacements trop rigides.