Saisissez une valeur dans n’importe quel champ, les deux autres se mettent à jour automatiquement.
| Pixels | Rem | Em |
|---|
Notre convertisseur px / rem / em effectue en temps réel les conversions entre les trois unités CSS les plus utilisées. Saisissez une valeur dans n’importe quel champ, les deux autres se calculent instantanément. Vous pouvez aussi modifier la root font-size si votre CSS utilise une base différente de 16 px (ce que font certains frameworks modernes pour simplifier les calculs).
Quelle est la différence entre px, rem et em ?
Le pixel (px)
Le pixel est l’unité absolue historique du web. Une taille en px est figée : 16 px, c’est toujours 16 px, quel que soit le contexte. C’est simple à manipuler, mais cela ne s’adapte pas aux préférences de l’utilisateur. Un internaute qui a augmenté la taille de sa police par défaut dans les paramètres de son navigateur ne verra aucun changement sur un site entièrement en px. Mauvais pour l’accessibilité.
Le rem (root em)
Le rem est une unité relative à la taille de la police de l’élément racine (le tag <html>). Par défaut, les navigateurs fixent la root font-size à 16 px, donc 1 rem = 16 px. Mais si l’utilisateur modifie sa préférence, ou si vous changez explicitement html { font-size: 18px; }, toutes les valeurs en rem s’adaptent en proportion. C’est l’unité recommandée pour la typographie, les espaces et les breakpoints dans une conception accessible et responsive.
Le em
Le em est relatif à la taille de police de l’élément parent, pas à la racine. Un font-size: 1.2em à l’intérieur d’un parent de 20 px donne 24 px ; à l’intérieur d’un parent de 16 px, cela donne 19,2 px. C’est puissant mais cela peut vite devenir incontrôlable dans des arbres imbriqués. À utiliser pour les paddings et margins relatifs à la taille de police du composant courant.
Quand utiliser quelle unité ?
| Cas d’usage | Unité recommandée | Pourquoi |
|---|---|---|
| Tailles de police globales (h1, h2, body…) | rem | Respecte les préférences utilisateur, accessible |
| Largeurs et hauteurs de composants | rem | S’adapte à la typographie |
| Paddings et margins internes d’un composant | em | Proportionnel à la taille du composant |
| Breakpoints responsive (media queries) | rem ou em | Adaptation aux préférences utilisateur |
| Bordures et détails d’1 pixel | px | Précision au pixel près nécessaire |
| Images, icônes vectorielles | rem ou em | Cohérence avec la typographie |
| Max-width d’un conteneur | rem (ou ch) | Adaptation à la lecture |
Le « 62,5% hack » expliqué
Une astuce très répandue chez les devs front : fixer la root font-size à 62,5 %. Cela ramène 1 rem à 10 px au lieu de 16 px, ce qui rend les calculs mentaux beaucoup plus simples. Au lieu de se demander « 24 px cela fait combien en rem ? », on sait directement que 24 px = 2,4 rem.
body { font-size: 1.6rem; } /* Rétablit la taille de base à 16 px */
Avantage : tous les calculs deviennent triviaux. Inconvénient : il faut expliciter les tailles de police un peu partout, et certaines librairies tierces qui utilisent des rem peuvent afficher du texte trop petit. La plupart des frameworks modernes (Bootstrap, Tailwind) ne font pas ce hack et préfèrent rester sur 16 px.
Tailwind CSS et les unités
Tailwind CSS utilise une échelle de spacing basée sur 0,25 rem (= 4 px). Les classes p-1, p-2, p-4 correspondent à 0,25 rem, 0,5 rem, 1 rem, etc. Si vous souhaitez convertir des pixels en cm pour mieux visualiser les dimensions réelles, cela peut vous aider à comprendre l’impact visuel de ces classes. Retenir cette équivalence est essentiel pour savoir rapidement ce que donnent les classes à l’écran.
| Classe Tailwind | Rem | Pixels (base 16) |
|---|---|---|
| p-0.5 | 0,125 rem | 2 px |
| p-1 | 0,25 rem | 4 px |
| p-2 | 0,5 rem | 8 px |
| p-3 | 0,75 rem | 12 px |
| p-4 | 1 rem | 16 px |
| p-6 | 1,5 rem | 24 px |
| p-8 | 2 rem | 32 px |
| p-12 | 3 rem | 48 px |
| p-16 | 4 rem | 64 px |
Foire aux questions
Pourquoi 1 rem = 16 px par défaut ?
Parce que tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) fixent par défaut la taille de police à 16 px pour l’élément racine <html>. Ce standard date des premiers navigateurs graphiques des années 90 et est maintenu pour la compatibilité.
Un rem peut-il avoir une valeur décimale ?
Oui. 0,5 rem, 1,25 rem, 3,1416 rem sont valides en CSS. Les navigateurs affichent le résultat au pixel près (arrondi à la virgule près).
Faut-il utiliser vh / vw au lieu de rem ?
vh et vw (viewport height/width) sont relatifs à la taille de la fenêtre. Ils sont utiles pour des éléments qui doivent occuper une portion précise de l’écran (hero plein écran, carousels, certains layouts), mais ils ne respectent pas les préférences de taille de police de l’utilisateur. Pour la typographie et les composants, rem reste meilleur.
Les media queries doivent-elles être en rem ou en px ?
Privilégiez rem ou em dans les media queries pour améliorer l’accessibilité : un utilisateur qui zoome avec la police augmentée verra ses breakpoints se déclencher plus tôt, ce qui peut améliorer la lisibilité sur les écrans intermédiaires. Attention : dans une media query, em et rem sont toujours relatifs à la root font-size, pas à l’élément parent.
