Que représente 1 rem en pixels ? Le guide complet

Que représente 1 rem en pixels ? Le guide complet

Si vous vous essayez au design web ou à l’écriture de CSS ces derniers temps, vous avez probablement croisé le terme « rem » et vous vous êtes immédiatement demandé : Attends, pourquoi ne pouvons-nous pas simplement utiliser des pixels ? Et plus important encore, qu’est-ce que 1rem en pixels exactement ?

Voici la réponse courte et directe : Par défaut, 1rem est égal à 16 pixels.

Mais avant d’aller coder « en dur » 16px partout, parlons de la raison pour laquelle le rem existe en premier lieu, et pourquoi se fier uniquement à des pixels rigides pourrait rendre votre site web bien moins convivial que vous ne le pensez.

C’est quoi au juste un « Rem » ?

« Rem » signifie Root EM (EM racine). Ne vous inquiétez pas trop de l’histoire séculaire de la typographie d’où vient le « em ». Dans le design web moderne, la « racine » (root) fait simplement référence à votre document HTML de base.

Imaginez que vous préparez des biscuits. La « racine » est votre recette de base. Si la recette de base dit « 1 fournée = 16 biscuits », alors demander 2 fournées (2rem) vous donne 32 biscuits.

Si vous décidez de changer la recette de base plus tard pour qu’une fournée soit égale à 20 biscuits, soudainement 2rem signifie 40 biscuits. Vous n’avez pas eu à parcourir et modifier l’instruction « 2 fournées » partout ; vous avez juste mis à jour le plan directeur, et tout le reste s’est adapté parfaitement.

Pixels vs. Rems : le duel

Les pixels sont rigides. C’est comme graver des instructions sur une tablette de pierre. 16px correspond exactement à 16 pixels sur un écran, quoi qu’il arrive.

Alors, que se passe-t-il si un utilisateur malvoyant modifie la taille de police par défaut de son navigateur en 24px pour pouvoir lire confortablement sans plisser les yeux ? Si votre site est construit strictement avec des pixels, votre texte reste obstinément bloqué à 16px. Vous avez essentiellement ignoré les paramètres de son navigateur.

Si vous utilisez le rem, cependant, votre site écoute activement l’utilisateur. 1rem signifie simplement « 1 fois quelle que soit la valeur par défaut de l’utilisateur ». Si sa valeur par défaut est 16px, il voit du 16px. Si sa valeur par défaut est 24px, votre texte de 1rem passe de manière fluide à 24px. C’est une victoire instantanée pour l’accessibilité qui rend votre site meilleur pour tout le monde.

Faire le calcul (et comment l’éviter)

Convertir des rems en pixels n’est qu’une simple multiplication. Vous prenez votre taille de pixel de base (généralement 16) et vous la multipliez par votre valeur rem.

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

Mais soyons réalistes : personne n’aime faire du calcul mental en plein codage. Si vous essayez de comprendre ce que vaut 2.125rem à la volée, vous n’avez pas besoin de sortir une calculatrice. Laissez les outils faire le gros du travail pour vous.

Ajoutez ces convertisseurs incroyablement pratiques à vos favoris pour gagner du temps :

• Vous avez une valeur rem mais vous avez besoin de savoir quelle taille elle aura réellement ? Utilisez ce Convertisseur Rem en Pixel.

• Vous contemplez un design Figma au pixel près et devez le traduire en CSS ? Rendez-vous sur le Convertisseur pixel en rem.

L’aide-mémoire du développeur

Si vous avez juste besoin d’une référence rapide pour les tailles les plus courantes, voici votre aide-mémoire. Cela suppose la taille de base par défaut du navigateur standard de 16px.

Cas d’utilisation courant	Équivalent Pixel	Valeur REM
Petit espacement UI ou bordures	4px	0.25rem
Marges, padding, petits espaces	8px	0.5rem
Petit texte, légendes, métadonnées	12px	0.75rem
Texte de corps par défaut	16px	1rem
Sous-titres, paragraphes d’introduction	20px	1.25rem
Titres H3, grands boutons	24px	1.5rem
Titres H2, titres de section	32px	2rem
Titres H1, texte hero	48px	3rem