Vous ne savez jamais quelle unité choisir entre les pixels (px) et les rem en CSS ? Vous cherchez comment faire une conversion simple pour un design responsive ? Vous vous demandez lequel est le mieux pour l’accessibilité ?
Ce guide vous explique la différence claire entre px et rem. Vous trouverez des tableaux de conversion, des exemples concrets et des règles simples pour choisir la bonne unité CSS à chaque fois.
Tableau de Conversion Rapide PX ↔︎ REM
Voici les tables de conversion pour les valeurs les plus courantes. Le calcul est basé sur une taille de police par défaut du navigateur de 16px. Mettez cette page en favori pour y revenir facilement.
| Pixels (px) | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px (Base) | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 50px | 3.125rem |
| 60px | 3.75rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 90px | 5.625rem |
| 96px | 6rem |
| 100px | 6.25rem |
| REM | Pixels (px) |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 1.75rem | 28px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 3.125rem | 50px |
| 3.5rem | 56px |
| 4rem | 64px |
| 4.5rem | 72px |
| 5rem | 80px |
| 5.625rem | 90px |
| 6rem | 96px |
| 6.25rem | 100px |
| 7rem | 112px |
| 8rem | 128px |
| 10rem | 160px |
| 20rem | 320px |
| 50rem | 800px |
| 100rem | 1600px |
Qu’est-ce qu’un Pixel (px) ? Définition et Usage
Le pixel, abrégé px, est une unité de mesure absolue en CSS. « Absolue » signifie que sa taille est fixe et ne dépend d’aucun autre élément de la page, comme la taille de la police du parent ou du navigateur. C’est une unité très directe : si vous définissez quelque chose à 10px, il fera 10px sur l’écran.
Cette précision est à la fois son point fort et sa faiblesse. Le pixel est très fiable pour les éléments qui ne doivent jamais changer de taille. Mais ce manque de flexibilité pose problème pour le design responsive et l’accessibilité.
- Avantages du pixel : Il offre une précision millimétrique. C’est parfait pour des éléments fins comme les bordures (
border: 1px solid black;) ou les ombres portées (box-shadow) où chaque pixel compte. - Inconvénients du pixel : C’est une unité rigide. Si un utilisateur malvoyant augmente la taille de police par défaut de son navigateur, les textes en pixels ne grossiront pas. Cela rend votre site difficile à lire et donc moins accessible. La taille en pixels reste la même sur tous les écrans, ce qui complique la gestion du responsive.
Qu’est-ce que l’unité REM ? Définition et Avantages
L’unité rem (pour « root em ») est une unité de mesure relative. Contrairement au pixel, sa valeur n’est pas fixe. Elle dépend de la taille de police de l’élément racine du document, c’est-à-dire la balise <html>.
Par défaut, la taille de police de base sur la quasi-totalité des navigateurs est de 16px. Donc, par défaut, 1rem = 16px. Si vous définissez une taille de 2rem, le navigateur calcule 2 * 16px = 32px. La conversion est simple.
L’énorme avantage de cette unité, c’est l’accessibilité et la flexibilité. Voici pourquoi le rem est devenu la norme pour un développement moderne :
- Excellente accessibilité : Si un utilisateur change la taille de police dans les paramètres de son navigateur (par exemple à 20px), la base de calcul change. Votre 1rem vaudra alors 20px. Tous vos éléments définis en rem s’adapteront proportionnellement, rendant votre site parfaitement lisible.
- Maintenance simplifiée : Vous pouvez changer l’échelle de tout votre site en modifiant une seule ligne de CSS : la
font-sizede la balisehtml. C’est très pratique pour gérer les différentes tailles d’écran (responsive design).
PX vs REM : Lequel Choisir et Quand ? (Tableau Comparatif)
Alors, faut-il choisir les pixels ou les rem ? La réponse est : les deux. Le choix dépend du contexte. Il n’y a pas une unité meilleure que l’autre, juste une unité plus adaptée à une situation.
La règle générale est simple. Utilisez rem pour tout ce qui doit s’adapter à l’utilisateur et à la taille de l’écran (textes, marges, padding, dimensions des blocs). Réservez les pixels pour les éléments qui doivent avoir une taille fixe et précise (bordures, ombres).
| Critère | Pixel (px) | REM (Root EM) |
|---|---|---|
| Type d’unité | Absolue | Relative |
| Référence | L’écran (une unité physique) | font-size de la racine (<html>) |
| Accessibilité | Faible. Ne s’adapte pas aux réglages du navigateur. | Excellente. S’adapte à la taille de police choisie par l’utilisateur. |
| Responsive Design | Limité. Nécessite beaucoup de media queries pour ajuster les tailles. | Idéal. Permet de redimensionner tout le site de manière proportionnelle. |
| Idéal pour… | border, box-shadow, éléments décoratifs fins, conteneurs à largeur fixe. |
font-size, padding, margin, width, height des composants. |
Comment calculer la conversion PX en REM (et inversement) ?
Le calcul pour convertir des pixels en rem est direct. Il vous suffit de connaître la taille de police de base de votre élément racine (html). Si vous ne l’avez pas changée, cette taille est de 16px.
Formule de conversion PX vers REM
La formule est : valeur en rem = valeur en pixels / taille de police racine. Il suffit de diviser la valeur en pixels par 16 (ou la base que vous avez définie).
💡 Exemple de calcul : Vous voulez convertir 32px en rem.
Le calcul est : 32 / 16 = 2. Donc, 32px = 2rem.
Formule de conversion REM vers PX
Pour la conversion inverse, il faut multiplier. La formule est : valeur en pixels = valeur en rem * taille de police racine.
💡 Exemple de calcul : Vous voulez convertir 1.5rem en pixels.
Le calcul est : 1.5 * 16 = 24. Donc, 1.5rem = 24px.
FAQ – px vs rem
Voici les réponses aux questions les plus fréquentes sur l’utilisation des pixels et des rem.
Combien de rem font 1 pixel ?
Sur une base de 16px, 1 pixel équivaut à 0.0625rem. Ce calcul s’obtient en faisant 1 / 16. C’est une valeur très petite, rarement utilisée telle quelle. Elle sert surtout à comprendre la proportion entre les deux unités.
Quelle est la différence entre EM et REM ?
C’est une confusion fréquente. Les deux sont des unités relatives, mais leur référence change :
– REM est relatif à la taille de police de la racine (html).
– EM est relatif à la taille de police de l’élément parent.
Le problème de l’unité `em` est l’effet de cascade. Si vous imbriquez des éléments avec des `font-size` en `em`, les calculs peuvent vite devenir compliqués. Le `rem` évite ce problème en ayant une seule référence stable pour tout le document, ce qui le rend plus simple à utiliser.
Doit-on abandonner totalement les pixels ?
Non, absolument pas. Les pixels gardent toute leur utilité pour des cas précis où la fixité est une qualité. Pensez aux bordures fines (border: 1px solid) ou aux ombres. Utiliser `rem` pour ces éléments pourrait créer des rendus incohérents ou flous. La bonne pratique est de mélanger les deux unités intelligemment.
Comment Webflow ou Elementor gèrent-ils la conversion px/rem ?
La plupart des outils de création de sites modernes comme Webflow, Figma ou Elementor utilisent les pixels par défaut dans leur interface car c’est plus intuitif pour les designers. Cependant, beaucoup d’entre eux proposent des options ou des plugins pour convertir automatiquement les valeurs en rem dans le code final. Cela permet de combiner la facilité du design en pixels avec les avantages techniques du rem.
