Soyons honnêtes un instant : définir la taille des éléments en CSS était autrefois un véritable casse-tête. Vous conceviez un site magnifique sur votre ordinateur portable, mais dès que quelqu’un le consultait sur un téléphone ou zoomait, toute la mise en page s’effondrait.

C’est là qu’intervient l’unité rem. Si vous vous êtes essayé au web design, vous l’avez probablement vue partout. Mais qu’est-ce qu’un rem exactement, et plus important encore, comment diable votre navigateur détermine-t-il la taille réelle que cela représente à l’écran ?

Ne vous inquiétez pas, il n’y a pas de calcul intégral ici. Prenez votre café, et décomposons ensemble la façon dont les navigateurs calculent les unités rem à l’aide de quelques exemples simples et concrets.

Que signifie même REM ?

rem signifie « root em » (em de la racine).

Si vous souhaitez approfondir l’histoire des mesures typographiques, Wikipédia propose une analyse passionnante de l’unité em et de ses racines physiques dans les anciennes presses d’imprimerie.

Mais pour le web design moderne, tout ce que vous avez vraiment besoin de comprendre, c’est la partie « root » (racine).

Imaginez un arbre. La racine est la base qui nourrit le reste de l’arbre. Dans un document HTML, la racine est la balise <html>. Ainsi, une unité rem regarde simplement la taille de police de la balise <html> (la racine) et l’utilise comme base de référence.

L’analogie de la « Recette de base »

Considérez le rem comme l’adaptation d’une recette de base en cuisine.

Disons que la recette de base de votre grand-mère permet de faire exactement 16 biscuits aux pépites de chocolat.

Si vous voulez doubler la fournée, vous multipliez la recette par 2. Vous obtenez 32 biscuits.
Si vous n’en voulez que la moitié, vous la multipliez par 0.5. Vous obtenez 8 biscuits.

rem fonctionne exactement de la même manière. La taille de police racine par défaut du navigateur est généralement de 16px (notre recette de base).

Ainsi, lorsque vous écrivez 2rem dans votre CSS, le navigateur fait un calcul rapide :
16px (base) × 2 (valeur rem) = 32px.

C’est vraiment aussi simple que cela !

Regardons quelques exemples simples

Supposons que votre site web utilise la taille de police par défaut du navigateur de 16px pour la racine. Voici comment le navigateur traduit votre CSS en rem en pixels :

Texte de paragraphe (1rem) : 16px × 1 = 16px
Un grand titre (2.5rem) : 16px × 2.5 = 40px
Petit texte de pied de page (0.875rem) : 16px × 0.875 = 14px

Mais que se passe-t-il si vous modifiez la taille de la racine ?

Disons que vous décidez que 16px est trop petit, vous écrivez donc ceci dans votre CSS :

html {
  font-size: 20px;
}

Instantanément, le navigateur met à jour ses calculs pour l’ensemble du site web. Il a remplacé la recette de base. Désormais, ces mêmes valeurs rem correspondent à quelque chose de complètement différent :

1rem est maintenant de 20px (20 × 1)
2.5rem est maintenant de 50px (20 × 2.5)
0.875rem est maintenant de 17.5px (20 × 0.875)

En changeant juste une ligne de code, l’ensemble de votre site s’adapte parfaitement. Magique, non ?

REM vs EM : Le problème des poupées russes

Vous vous demandez peut-être : « Pourquoi ne pas simplement utiliser em ? »

Alors que le rem se base sur l’élément racine, les unités em classiques se basent sur la taille de police de leur élément parent. Cela semble correct jusqu’à ce que vous commenciez à imbriquer des éléments les uns dans les autres, comme une liste à l’intérieur d’un <div> lui-même à l’intérieur d’un autre <div>.

Utiliser des unités em, c’est comme jouer avec des poupées russes. Si un parent fait 1.2em, que l’enfant fait 1.2em, et que le petit-enfant fait 1.2em, le navigateur les multiplie tous ensemble (1.2 × 1.2 × 1.2). Soudain, votre texte est énorme, et vous ne comprenez pas pourquoi !

Parce que le rem revient toujours à l’élément racine unique, vous n’obtenez jamais cet effet de boule de neige cumulatif. C’est prévisible, sûr, et cela vous évite de vous arracher les cheveux.

Pourquoi les navigateurs (et les utilisateurs) adorent le REM

Vous vous dites peut-être : « Si 1rem n’est que 16px, pourquoi ne pas simplement taper 16px et m’épargner les calculs ? »

La réponse est l’accessibilité.

Tout le monde n’a pas une vision parfaite. De nombreuses personnes modifient les paramètres de leur navigateur pour passer la taille de police par défaut de 16px à 20px ou même 24px afin de pouvoir lire confortablement.

Si vous avez construit votre site en utilisant strictement des px, votre texte est obstinément figé. Les paramètres de l’utilisateur sont ignorés, et il ne peut pas lire votre contenu.
Si vous avez construit votre site en utilisant des rem, le navigateur se dit : « Ah ! L’utilisateur a changé sa taille racine à 24px ! » Il recalcule vos valeurs rem sur la base de ce nouveau seuil de 24px, et l’ensemble de votre site s’adapte magnifiquement pour lui convenir.

Votre aide-mémoire rapide pour le REM

Pour vous éviter de faire des calculs à chaque fois que vous écrivez du CSS, voici un aide-mémoire pratique basé sur le défaut standard de 16px. N’hésitez pas à l’ajouter à vos favoris !

Le calcul du navigateur	Ce que vous écrivez (en `rem`)	Ce que vous voulez (en pixels)
`16 × 0.75`	0.75rem	12px
16 × 0.875	0.875rem	14px
16 × 1	`1rem` (Base)	16px
16 × 1.125	1.125rem	18px
16 × 1.25	1.25rem	20px
16 × 1.5	1.5rem	24px
16 × 2	2rem	32px
16 × 3	3rem	48px
16 × 4	4rem	64px

(Conseil de pro : si vous calculez cela vous-même, prenez simplement votre taille de pixel cible et divisez-la par 16. Par exemple : 24px ÷ 16 = 1.5rem).

Si vous préférez éviter complètement les calculs et gagner du temps, vous pouvez toujours utiliser notre convertisseur rem en pixels gratuit pour calculer les tailles exactes instantanément !

En résumé

Et voilà ! Les navigateurs calculent les unités rem simplement en multipliant votre valeur rem par la taille de police racine. C’est juste une recette adaptable qui garde votre code propre, évite les cauchemars de redimensionnement et rend le web beaucoup plus convivial pour tous ceux qui essaient de lire votre contenu.

Y a-t-il des éléments spécifiques sur votre site pour lesquels vous avez du mal à passer des px aux rem ? Dites-le moi, et nous pourrons faire les calculs ensemble !