Convertisseur PX ⇄ REM
Optimisez votre workflow CSS et rendez vos sites plus accessibles.
Calculateur d'unités
Table de conversion rapide (Base 16px)
Code CSS
.element {
font-size: 1rem;
}
*Le REM est basé sur la taille de police racine (html) définie par le navigateur de l'utilisateur.
Conseil Accessibilité
L'utilisation des REM permet aux utilisateurs malvoyants de zoomer sur votre texte tout en conservant l'harmonie visuelle de votre site.
Tout savoir sur les unités CSS
1. Le Pixel (px) : Ancre stable mais rigide
Le pixel est une unité absolue. 16px s'affichera toujours comme 16px, quels que soient les écrans.
C'est un problème majeur pour l'accessibilité : si un utilisateur malvoyant augmente sa taille de police par défaut (ex: 24px), un site codé en pixels ne s'adaptera pas et restera petit, rendant la lecture pénible.
2. Le REM : La flexibilité absolue
Le REM (Root EM) est relatif à la racine du document (html).
Par défaut, 1rem = 16px. Mais si l'utilisateur change ses préférences pour 20px, tout votre site s'adapte proportionnellement.
C'est le standard incontournable du web moderne.
En bref : Quelle unité choisir ?
- ✅ Font-size : REM (Toujours)
- ✅ Padding/Margin : REM (ou EM pour composants)
- ✅ Border : PX (1px suffit généralement)
- ✅ Media Queries : EM ou REM
3. L'astuce des 62.5% (Non recommandée)
Historiquement, on définissait html { font-size: 62.5%; } pour que 1rem = 10px, facilitant le calcul mental (1.4rem = 14px).
Pourquoi l'éviter en 2026 ? Cela peut créer des conflits avec des bibliothèques tierces et surcharge le CSS. Les outils de build et convertisseurs comme celui-ci rendent ce "hack" obsolète.
4. TailwindCSS et les REM
Si vous utilisez TailwindCSS, les classes utilitaires sont basées sur le REM par défaut. Voici la correspondance :
| text-sm | 0.875rem | 14px |
| text-base | 1rem | 16px |
| text-lg | 1.125rem | 18px |
| text-xl | 1.25rem | 20px |
Questions Fréquentes
Quelle est la valeur de base par défaut d'un REM ?
Dans la plupart des navigateurs modernes, 1rem est égal à 16px par défaut. Cependant, cette valeur peut changer si l'utilisateur modifie ses préférences ou si le développeur force une taille sur la balise html.
Comment calculer manuellement des PX en REM ?
La formule est : Valeur en PX / Taille de base = Valeur en REM.
Exemple pour une base de 16px : 24px / 16 = 1.5rem.
Quelle est la différence entre EM et REM ?
Le REM (Root EM) est relatif à la racine (html), tandis que le EM est relatif à l'élément parent. Le REM est plus prévisible pour la mise en page globale, limitant les effets de cascade complexes.
Pourquoi mon texte REM ne change pas de taille ?
Assurez-vous de ne pas avoir fixé une taille en pixels sur la balise html ou body (ex: html { font-size: 16px; }). Utilisez plutôt font-size: 100%; pour respecter les réglages utilisateur.
Calculateur TVA
Passez du HT au TTC en un clic.
Lorem Ipsum
Générez du faux texte pour vos maquettes.