Convertisseur PX vers REM (et REM vers PX)
Convertissez px en rem et rem en px instantanément. Modifiez la taille de police racine pour l'adapter à votre projet et voyez le résultat en temps réel. Gratuit, sans inscription.
Table de conversion PX vers REM (base 16px)
Valeurs px courantes converties en rem, en supposant une taille de police racine par défaut de 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Astuces
- Par défaut, 1rem équivaut à 16px, mais les utilisateurs malvoyants augmentent souvent la taille de texte par défaut de leur navigateur : les valeurs en rem suivent automatiquement ce réglage, contrairement aux valeurs en px.
- Les points de rupture des media queries sont traditionnellement écrits en px, mais font-size, padding et margin sont de bons candidats pour rem, afin que l'équilibre général de la mise en page soit préservé lorsque l'utilisateur modifie sa préférence de taille de texte.
- Certaines équipes définissent html { font-size: 62.5%; } pour que 1rem équivale à 10px, ce qui simplifie le calcul mental (1,6rem = 16px). Saisissez 10 comme valeur de base ci-dessus pour convertir selon cette convention.
- Une convention courante consiste à utiliser rem pour les valeurs de mise en page au niveau de la page et em pour l'espacement interne d'un composant réutilisable, afin que le composant s'adapte selon sa propre taille de police, où qu'il soit utilisé.
Questions fréquentes
Anecdote — Comment rem est arrivé dans la spécification CSS
L'unité rem a été ajoutée au module CSS Values and Units vers 2011. Avant cela, presque tous les sites web dimensionnaient le texte et l'espacement avec px ou em, et em posait un problème bien connu : basé sur la taille de police de l'élément parent, l'imbrication d'éléments faisait s'accumuler la taille effective de façon difficile à prévoir dans les mises en page complexes.
rem a été conçu précisément pour résoudre ce problème, en se référant à un point d'ancrage unique toujours disponible : l'élément racine, quel que soit le niveau d'imbrication. Durant les années où Internet Explorer 9 ne prenait pas encore en charge rem, il était courant d'écrire d'abord une valeur en px comme solution de repli, puis la valeur en rem (font-size: 16px; font-size: 1rem;). Une fois que les principaux navigateurs l'ont adopté au milieu des années 2010, cette solution de repli est devenue inutile.
Aujourd'hui, construire toute l'échelle typographique et d'espacement d'un site autour de rem est une pratique d'accessibilité courante : elle permet à toute la page de s'agrandir avec élégance lorsqu'un visiteur augmente la taille de texte de son navigateur, plutôt que de se casser ou de tronquer le contenu. Des recommandations comme les WCAG (Web Content Accessibility Guidelines) préconisent explicitement de ne pas dépendre uniquement d'unités fixes pour la taille du texte.