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 |
Ce que fait ce convertisseur px / rem
Il convertit des mesures exprimées en px vers rem et réciproquement. La valeur de référence — la font-size de l'élément racine (html) — se modifie librement et le résultat se recalcule aussitôt.
Le premier point à saisir est que rem s'appuie sur la taille de police de l'élément racine, et que cette taille peut être modifiée par la personne qui consulte la page. Si la taille de police est augmentée dans les réglages du navigateur, tout ce qui est exprimé en rem grandit avec elle : c'est précisément là le sens de cette unité. Pour cette raison, il ne faut pas écrire html { font-size: 16px } dans la feuille de styles. Cela annule la préférence de la personne et ferme la voie à qui a besoin d'agrandir le texte pour le lire. Pour modifier la référence, employez une notation relative telle que % ou rem.
Ensuite, la différence entre em et rem tient à leur accumulation. em se rapporte à la taille de police de l'élément où il figure et se multiplie donc dans les structures imbriquées ; rem regarde toujours l'élément racine et ne change pas, si nombreux que soient les niveaux.
Un autre point égare souvent : le em d'une media query ne s'appuie pas sur l'élément racine mais sur la taille par défaut du navigateur. Même en réduisant la font-size de html, les points de rupture ne suivront pas.
Comment s'en servir
- Fixer la valeur de référence Dans la plupart des navigateurs, la valeur par défaut est de 16px. Dans le doute, laissez 16.
- Saisir des px ou des rem Écrivez d'un côté ou de l'autre : la conversion apparaît immédiatement en face.
- Copier la notation CSS La chaîne avec son unité se reprend telle quelle.
- Consulter le tableau de correspondance Les tailles d'usage courant sont réunies, prêtes à être choisies.
Astuces pour en tirer le meilleur parti
- 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é.
Cas d'usage
Porter en CSS les mesures d'une maquette
Les maquettes arrivent d'ordinaire en px. La référence une fois fixée, le passage en rem devient mécanique.
Uniformiser les unités d'un projet existant
Pour ranger du code où px et rem se mêlent, le tableau se garde sous la main.
Changer la référence et observer l'effet
Déplacer la valeur de base déplace avec elle tout ce qui est exprimé en rem. On peut en mesurer ici l'ampleur.
Fixer les points de rupture d'une media query
Le em d'une media query s'appuie sur la valeur par défaut du navigateur, non sur la racine. La prémisse de la conversion diffère.
Termes employés
- rem
- Unité relative à la taille de police de l'élément racine (html). Sa référence ne change pas avec l'imbrication.
- em
- Unité relative à la taille de police de l'élément où elle figure. Dans les structures imbriquées, elle se multiplie.
- Élément racine
- L'élément
html, le plus extérieur du document. Toute conversion en rem part de sa taille de police. - Taille par défaut du navigateur
- 16px dans la plupart des environnements. La personne qui consulte peut la modifier, et c'est précisément cela qu'il faut respecter.
- Fixer la font-size de html en px
- Cela annule la préférence de la personne et doit donc être évité. Pour modifier la référence, utilisez une notation relative comme
%. - em dans une media query
- Il s'appuie sur la valeur par défaut du navigateur, non sur l'élément racine. Modifier la font-size de html ne déplace pas les points de rupture.
Questions fréquentes
Anecdote — Comment rem est arrivé dans la spécification CSS
L'unité rem est apparue pour la première fois dans le brouillon du W3C « CSS3 Values and Units », publié en septembre 2006. Avant qu'elle ne se répande, 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. Tant qu'il fallait prendre en charge Internet Explorer 8 et les versions antérieures, qui ne comprennent pas 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;) (IE9 et IE10 ne le prenaient en charge que partiellement, en l'ignorant dans la propriété raccourcie font et sur les pseudo-éléments). Une fois ces anciens IE abandonnés, 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.