Comment convertir les pixels en rem en CSS (guide simple)

Avez-vous déjà conçu un site Web magnifique, au pixel près, pour réaliser qu’il semble complètement cassé dès qu’un utilisateur augmente la taille de police par défaut de son navigateur ? Oui, moi aussi. C’est généralement le moment précis où nous, les développeurs, apprenons à nos dépens que coder les pixels (px) en dur pour absolument tout est la recette d’un cauchemar en matière d’accessibilité.

C’est là qu’intervient l’unité rem.

Si vous avez l’habitude de raisonner strictement en pixels, passer au rem peut donner l’impression d’apprendre une langue étrangère sur le tas. Mais ne vous inquiétez pas : une fois que vous avez compris le concept, cela facilite énormément votre vie de développeur.

Voyons comment convertir les px en rem sans avoir besoin d’un diplôme en mathématiques.

Pourquoi parlons-nous même du Rem ?

Considérez les pixels comme une mesure absolue. Imaginez que vous construisiez une maison et que vous disiez à votre entrepreneur : « Faites cette fenêtre d’exactement 40 pouces de large ». Cette fenêtre fera 40 pouces de large, peu importe ce qui arrive au reste de la maison. C’est un pixel.

Maintenant, considérez le rem comme une mesure relative. Au lieu d’utiliser des pouces fixes, vous dites à l’entrepreneur : « Faites cette fenêtre exactement 3 fois plus large que nos briques de fondation standard ». Si vous décidez d’utiliser des briques plus grandes plus tard, la fenêtre s’agrandira automatiquement de manière proportionnelle.

En CSS, rem signifie « root em » (em racine). Cela signifie simplement « relatif à la taille de police de l’élément racine HTML ». Étant donné que les utilisateurs peuvent (et le font) aller dans les paramètres de leur navigateur pour modifier leur taille de police par défaut pour une meilleure lisibilité, l’utilisation du rem signifie que l’intégralité de votre site Web s’adaptera de manière fluide à leurs préférences. Votre mise en page ne se cassera pas et votre texte restera parfaitement lisible. C’est du gagnant-gagnant.

Le calcul standard : comment convertir

Voici la règle d’or à mémoriser : Par défaut, presque tous les navigateurs Web modernes fixent la taille de police racine à 16px.

Cela signifie que, sauf si vous la remplacez spécifiquement dans votre CSS, 1rem est égal à 16px.

Pour convertir toute valeur de pixel que vous avez en tête en une valeur rem, il vous suffit d’utiliser cette formule de base :

Valeur cible en pixels ÷ Valeur de base en pixels (16) = Valeur en rem

Disons que vous regardez un design Figma et que vous avez besoin d’un titre de 24px. Vous divisez simplement 24 par 16.

24 ÷ 16 = 1,5
Ainsi, dans votre CSS, vous écrivez : font-size: 1.5rem;

Besoin d’une légende plus petite de 14px ?

14 ÷ 16 = 0,875
Ainsi, vous écrivez : font-size: 0.875rem;

Écoutez, je comprends. Faire des divisions de tête alors que vous êtes à fond dans le code est un vrai tue-l’amour. Si vous préférez éviter complètement la gymnastique mentale, je vous recommande vivement de garder un outil comme ce Convertisseur Pixel en Rem ouvert dans un onglet. Il vous suffit de saisir vos pixels, et il fait le plus gros du travail pour vous instantanément.

L’astuce des « 62,5 % » (pour simplifier le calcul au maximum)

Maintenant, si vous ne voulez pas utiliser une calculatrice pour chaque ligne de CSS, les développeurs ont inventé une petite astuce astucieuse appelée l’astuce des 62,5 %.

Voici comment cela fonctionne. Vous définissez la taille de police racine html à 62.5% tout en haut de votre feuille de style :

html {
  font-size: 62.5%;
}

Pourquoi 62,5 % ? Parce que 62,5 % du défaut 16px font exactement 10px.

En faisant cela, vous avez essentiellement redéfini votre « brique de fondation standard » pour qu’elle soit exactement de 10px. Soudain, le calcul devient ridiculement simple. Au lieu de diviser par 16, vous divisez simplement par 10 (ce qui signifie simplement déplacer la virgule d’un rang vers la gauche).

Vous voulez 24px ? Écrivez simplement 2.4rem.
Vous voulez 14px ? Écrivez simplement 1.4rem.
Vous voulez 36px ? Écrivez simplement 3.6rem.

C’est presque magique. Gardez simplement à l’esprit que si vous rejoignez un projet existant où la taille de police racine n’a pas été modifiée, vous devrez toujours vous fier au calcul standard de division par 16.

L’aide-mémoire ultime px vers rem

Que vous divisiez manuellement par 16 ou que vous ayez simplement besoin d’un guide de référence rapide à garder sur votre second moniteur, voici un aide-mémoire pour les tailles de police les plus courantes (en supposant la taille par défaut du navigateur de 16px) :

Ce que vous voulez (px)	Ce que vous écrivez (rem)	Le calcul utilisé
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Taille de base)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

Un dernier conseil avant de partir

Vous n’êtes pas obligé d’utiliser le rem pour absolument tout. C’est fantastique pour les tailles de police, les marges, le remplissage (padding) et les largeurs de mise en page. Cependant, pour les petits éléments décoratifs comme une fine bordure de 1px (border: 1px solid black), il est tout à fait acceptable — et généralement préférable — de s’en tenir aux pixels standards !

Allez-y et codez de manière responsable. Vos utilisateurs (et leur vue) vous remercieront.