PX vs REM vs EM | Quelle unité CSS devriez-vous utiliser ?
Soyons honnêtes un instant : essayer de comprendre comment dimensionner les éléments en CSS peut donner l’impression d’apprendre une langue totalement différente. Vous vous installez pour styliser une simple page web, et soudain, vous vous retrouvez face à une soupe de lettres d’unités diverses.
« Ce paragraphe doit-il faire 16px ? Ou 1rem ? Attendez, c’est quoi exactement un em ? »
Si vous vous êtes déjà retrouvé à deviner des unités au hasard jusqu’à ce que votre mise en page finisse par ressembler à quelque chose, vous n’êtes absolument pas seul. C’est pratiquement un rite de passage pour tout développeur frontend. Mais une fois que vous comprenez comment ces trois unités fonctionnent réellement en coulisses, le CSS cesse de ressembler à de la magie noire pour devenir une boîte à outils prévisible.
Décomposons px, em et rem sans jargon complexe, en utilisant des analogies concrètes pour que tout devienne clair.
Pixels (px) : La règle têtue
Pensez au pixel comme à un costume sur mesure fabriqué dans un tissu qui ne s’étire jamais. Si vous demandez à un bouton d’avoir une largeur de 200px et une taille de texte de 16px, c’est exactement ce que vous obtiendrez. Point final. C’est une unité absolue.
Les pixels ne se soucient pas de savoir si vous regardez le site sur un écran 4K massif, un petit smartphone vieux de cinq ans, ou si l’utilisateur a augmenté la taille de police par défaut de son navigateur parce qu’il a oublié ses lunettes de lecture. Un pixel est un pixel.
Le bon côté : Ils sont prévisibles. Vous savez exactement ce que vous allez obtenir, ce qui les rend incroyablement faciles à utiliser lorsque vous construisez des mises en page précises.
Le mauvais côté : Ils sont terribles pour l’accessibilité. Si vous fixez vos tailles de police en pixels et qu’un utilisateur malvoyant tente d’augmenter la taille de police par défaut de son navigateur, votre texte en 16px refusera obstinément de grandir.
Ems (em) : Le jeu du téléphone arabe
Si les pixels sont rigides, les unités em sont tout le contraire. (Petite anecdote : le nom vient d’une mesure typographique traditionnelle basée à l’origine sur la largeur de la lettre majuscule « M » !). Un em est une unité relative, ce qui signifie qu’il base sa taille sur son environnement — plus précisément, sur son élément parent direct.
Pensez aux unités em comme à un jeu de téléphone arabe, ou peut-être comme à des poupées russes. Si un conteneur parent a une taille de police de 16px et que vous donnez à un élément enfant une taille de police de 2em, l’enfant sera deux fois plus grand que le parent (soit 32px).
Ça a l’air génial, non ? Jusqu’à ce que vous commenciez à les imbriquer.
Disons que vous avez une liste, à l’intérieur d’une liste, à l’intérieur d’une liste. Si vous réglez toutes les balises li sur 1.5em, la première liste fait 1,5 fois la taille normale. La liste imbriquée fait 1,5 fois cette taille. La troisième liste fait 1,5 fois encore cette taille. Soudain, votre texte hurle à l’utilisateur avec des lettres massives qui remplissent l’écran. C’est ce qu’on appelle le « problème de composition » (compounding problem), et c’est la raison pour laquelle beaucoup de développeurs fuient les unités em en hurlant.
Comme les calculs peuvent devenir étrangement compliqués lors de l’imbrication d’éléments, vous ne voulez vraiment pas calculer tout cela de tête. Faites-vous une fleur et mettez en favori un convertisseur pixel vers em pour préserver votre santé mentale quand les choses se corsent.
Rems (rem) : Régler sa montre sur l’heure de Greenwich
L’unité rem a été inventée spécifiquement pour résoudre le cauchemar de composition de l’em.
« Rem » signifie Root Em (Em racine). Au lieu de regarder son parent immédiat pour déterminer sa taille, un rem regarde tout en haut de la page web : la « racine » (l’élément <html>).
Pensez aux unités rem comme au réglage de votre montre sur un standard mondial comme l’heure de Greenwich. Peu importe où vous vous trouvez dans le monde (ou à quel niveau de profondeur votre élément est imbriqué dans l’arborescence HTML), tout le monde se réfère à la même horloge.
Par défaut, la plupart des navigateurs fixent la taille de police racine à 16px. Ainsi, 1rem égale 16px. 2rem égale 32px. 0.5rem égale 8px. Si vous n’avez pas envie de faire du calcul mental chaque fois que vous devez traduire une maquette en code, utilisez simplement un convertisseur pixel vers rem pratique pour accélérer votre flux de travail.
La magie absolue du rem : Si un utilisateur modifie les paramètres de son navigateur pour passer sa taille de texte par défaut à 24px parce qu’il a besoin d’un texte plus grand, l’ensemble de votre site s’adapte automatiquement de manière proportionnelle et harmonieuse. Pourquoi ? Parce que tout ce qui est construit avec des rem est basé sur ce chiffre racine !
Alors, lequel devriez-vous réellement utiliser ?
Voici le secret : vous n’avez pas à en choisir un seul et abandonner les autres. Les meilleurs développeurs utilisent les trois, mais pour des tâches très spécifiques.
Voici exactement comment vous devriez l’aborder :
1. Utilisez rem par défaut pour presque tout.
Tailles de police, marges, espacements (padding), largeurs maximales — utilisez rem. Cela rend votre site incroyablement accessible et garantit que tout s’adapte proportionnellement si l’utilisateur modifie les réglages de son navigateur. C’est la norme absolue pour le web design moderne.
2. Utilisez px pour les éléments qui ne doivent jamais changer d’échelle.
Si vous mettez une fine bordure de 1px autour d’une carte, vous ne voulez probablement pas que cette bordure devienne un bloc de 3px épais et disgracieux simplement parce que l’utilisateur a augmenté sa taille de police. Utilisez px pour les bordures, les ombres portées (box shadows) et occasionnellement pour un positionnement précis dans des mises en page complexes.
3. Utilisez em pour les composants modulaires.
Utilisez em quand vous voulez que l’espacement s’adapte spécifiquement à la taille de police de cet élément précis. Par exemple, imaginez un bouton. Vous voulez que l’espacement intérieur (padding) autour du texte reste toujours proportionnel, qu’il s’agisse d’un bouton géant « Acheter maintenant » ou d’un petit bouton « Envoyer ». Si vous réglez le padding du bouton en em, il vous suffit de changer la taille de police du bouton, et le padding s’agrandira ou rétrécira automatiquement pour correspondre parfaitement.