Convertisseur PX en REM

Comment convertir des px en rem

1. Indiquez la Taille de police racine (px). Elle vaut 16 dans tous les navigateurs courants, sauf si votre feuille de style la modifie. Les boutons sous le champ passent à 16 px, à 10 px (l’astuce html { font-size: 62.5%; }) ou à 18 px.
2. Si vous travaillez en em, renseignez la Taille de police du parent pour em (px) : la taille calculée de l’élément qui contient celui que vous mettez en forme.
3. Dans Convertir une valeur, saisissez un nombre dans Pixels (px), REM ou EM. Les deux autres champs se mettent à jour pendant la saisie, et la ligne en dessous affiche la division effectuée.
4. Le Tableau de conversion liste des tailles courantes. Remplacez les Valeurs en pixels par votre propre échelle (espacements, tailles de texte…) puis utilisez Copier le tableau pour le coller dans un tableur ou une documentation.
5. Pour migrer du code existant, collez-le dans CSS à convertir, réglez les options et cliquez sur Convertir les px en rem. Charger un exemple affiche une petite feuille de style. Récupérez le CSS converti avec Copier.

Les formules

• rem = px ÷ taille de police racine. Avec 16 px par défaut, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ taille de police du parent. Dans un titre de 20 px, 10px = 0,5em.
• px = rem × taille racine, et px = em × taille du parent.

rem ou em : lequel choisir ?

rem (« root em ») se rapporte toujours à la taille de police de l’élément html : 1.5rem vaut donc la même chose partout dans la page. C’est le choix le plus sûr pour les tailles de texte, les marges, les largeurs maximales et les espacements de grille.

em se rapporte à la taille de police de l’élément lui-même (pour font-size, à celle du parent). Les valeurs se multiplient : une liste à 0.9em imbriquée trois fois descend à 0,9 × 0,9 × 0,9 = 73 % de la taille de départ. L’em est donc pratique pour ce qui doit suivre son propre texte (le padding d’un bouton, une icône à côté d’un libellé) et risqué pour la typographie globale.

Pourquoi le rem compte pour l’accessibilité

Beaucoup de personnes augmentent la taille de police par défaut dans les réglages du navigateur (de 16 à 20 ou 24 px, par exemple) plutôt que de zoomer chaque page. Les tailles écrites en px ignorent cette préférence ; celles en rem ou en em la respectent. Écrire le texte et les espacements en rem permet à toute la mise en page de s’agrandir selon le choix du lecteur, ce qui aide à satisfaire le critère 1.4.4 des WCAG 2.2 (agrandissement du texte jusqu’à 200 %).

Pour la même raison, évitez html { font-size: 16px; } en px : préférez un pourcentage (100%, ou 62.5% si vous voulez 1rem = 10px), afin que le réglage de l’utilisateur continue de s’appliquer.

Ce que modifie le convertisseur CSS

Il remplace les nombres suivis de px dans les déclarations par la valeur divisée par la taille racine. Il ne touche jamais aux commentaires, aux chaînes de caractères ni aux url().

• Garder les bordures et contours en px : border, border-*-width, outline, outline-offset et column-rule restent en px, pour que les traits fins restent nets. border-radius est bien converti.
• Garder les valeurs de 1px : toute valeur comprise entre −1px et 1px reste telle quelle.
• Convertir les media queries en em (base 16px) : dans les conditions @media, rem et em se rapportent toujours à la taille initiale du navigateur, jamais à votre règle html. L’outil divise donc par 16 et écrit des em, quelle que soit votre taille racine. Décochée, l’option laisse les media queries en px.