En CSS, on a tous nos petites habitudes. Certains jurent par les pixels, d’autres ne parlent plus que de rem. Et au milieu, il y a cette question qui revient sans cesse : quelle unité utiliser pour un design vraiment responsive, propre, maîtrisé ?
Si vous avez déjà eu un site parfait sur votre écran… mais totalement bancal sur mobile avec une typo minuscule, vous savez à quel point ce choix peut faire la différence. Alors aujourd’hui, on va décortiquer ensemble les rem et les pixels, sans dogme, avec une approche pragmatique de designer-développeur : à quel moment choisir l’un, à quel moment préférer l’autre, et surtout comment les faire cohabiter intelligemment.
Pixels : la fausse impression de contrôle total
Commençons par les pixels, les fameux px. Pendant longtemps, c’était l’unité reine du web. Simple, rassurante, presque tangible. Vous voulez un bouton de 200px de large ? Vous écrivez 200px. Terminé.
Un pixel en CSS représente un “pixel logique”, pas forcément un pixel physique de l’écran. Mais pour simplifier, retenons ceci : avec le px, vous définissez une taille absolue. Elle ne dépend ni de l’utilisateur, ni des paramètres du navigateur, ni du zoom du système (ou très peu en pratique).
Pourquoi les pixels plaisent tant ?
- Prédictibles : ce que vous codez est ce que vous obtenez (ou presque).
- Idéals pour les éléments très graphiques : icônes, bordures fines, ombres, détails de layout.
- Parfaits pour tester : quand on prototype vite, le px a ce côté “plug and play”.
Mais ce contrôle apparent a un prix.
Sur un mobile à forte densité de pixels, un texte à 14px peut devenir péniblement petit. Et si un utilisateur augmente la taille de police par défaut dans son navigateur pour lire plus confortablement, votre texte en pixels ne bougera pas. Résultat : votre design devient une contrainte, pas un support.
En d’autres termes : les pixels sont très “design-centric”, beaucoup moins “user-centric”. Et dans un web où l’accessibilité n’est plus un bonus mais une exigence, ça pose problème.
Rem : l’unité qui s’adapte à l’utilisateur (et à vous)
Face à ça, les unités relatives comme em et rem ont gagné en popularité. Concentrons-nous sur rem, car c’est l’unité la plus prévisible des deux.
Rem signifie “root em”. Concrètement, 1rem correspond à la taille de police définie sur l’élément racine <html>. Par défaut, la plupart des navigateurs définissent font-size: 16px sur html. Donc :
1rem = 16px1.5rem = 24px0.875rem ≈ 14px
Mais la vraie magie, ce n’est pas la conversion. C’est que si l’utilisateur change la taille de base dans son navigateur (par exemple à 18px au lieu de 16px), tout votre design basé sur des rem va s’adapter. Les textes, les marges, les paddings exprimés en rem suivent la nouvelle base.
Rem est donc une unité :
- Accessible : elle respecte les préférences utilisateur.
- Scalable : elle permet de faire grandir ou rétrécir tout un système typographique en modifiant une seule valeur.
- Prévisible : contrairement à
em, les rem ne s’empilent pas de manière parfois surprenante. Tout part de la racine.
On passe d’un design rigide à un design “vivant”, qui respire avec le contexte.
Rem vs em : un petit détour nécessaire
Vous vous demandez peut-être : pourquoi tout le monde parle de rem, et beaucoup moins de em ?
L’unité em est relative à la taille de police de l’élément parent. Cela peut être utile, mais aussi piégeux :
- Si un parent est à
font-size: 1.2emet un enfant à1.2emégalement, vous obtenez une multiplication des tailles. - En cascade, les valeurs peuvent vite devenir difficiles à maîtriser.
Avec rem, tout est basé sur html. Pas d’effet boule de neige. En pratique, pour un design responsive clair et maintenable, rem est souvent un meilleur choix qu’em pour la plupart des cas (typo, spacing…).
Pourquoi le rem est devenu le chouchou du responsive design
Imaginons que vous définissiez ceci :
html { font-size: 16px;}body { font-size: 1rem; /* 16px */}h1 { font-size: 2.5rem; /* 40px */}p { font-size: 1rem; /* 16px */}button { font-size: 0.875rem; /* 14px */ padding: 0.75rem 1.5rem;}Maintenant, vous décidez qu’en dessous de 768px de large, tout doit être légèrement plus lisible :
@media (max-width: 768px) { html { font-size: 18px; }}Sans toucher à vos titres, paragraphes ou boutons, tout devient automatiquement plus grand :
1rem= 18px au lieu de 16px2.5rem= 45px au lieu de 40px- Les paddings augmentent proportionnellement
En une seule ligne (le font-size sur html), vous venez d’adapter la hiérarchie typographique et les espacements à un contexte plus petit, tout en restant harmonieux.
C’est là que le rem excelle : il transforme votre design en système. Vous ne concevez plus des tailles isolées, mais des proportions relatives à une base commune.
Les limites du rem (oui, il en a aussi)
Le rem n’est pas la baguette magique qui remplace définitivement le pixel. Il a ses zones de flou.
- Pour les traits ultra fins (1px, 2px), exprimer en rem est souvent inutile, voire contre-productif. Un
border: 1px solidest plus simple, plus direct. - Pour certains layouts pixel-perfect, notamment des intégrations très proches de maquettes Figma, garder quelques proportions en px peut faciliter le respect du design initial.
- Pour des composants isolés embarqués ailleurs (widgets, iframes), s’appuyer sur la taille de
htmlpeut parfois créer des surprises, surtout si l’environnement hôte modifie la base.
Le rem est parfait pour la typo et la mise en page globale. Le pixel reste très utile pour la micro-précision graphique.
Où utiliser rem, où garder le pixel ?
Plutôt que d’opposer rem et px, mieux vaut leur attribuer des rôles clairs. Voici une approche que j’utilise souvent en design et intégration.
Utiliser rem pour :
- Les tailles de police (
font-size) - Les marges et espacements (
margin,padding,gap) - Les largeurs/hauteurs “logiques” de composants (cards, sections, containers)
- La taille des boutons, des champs de formulaire, etc.
Garder les pixels pour :
- Les bordures fines (
1px,2px) - Les ombres portées (
box-shadow, souvent exprimées en px dans les outils de design) - Certains éléments décoratifs (traits, séparateurs, icônes SVG ajustés au pixel près)
- Les images raster (largeur/hauteur initiales, quand c’est nécessaire)
En résumé : rem pour la structure, px pour le détail.
Mettre en place un système typographique basé sur rem
Entrons dans le concret. Comment construire un système de tailles cohérent et responsive avec rem ?
Une méthode simple consiste à définir une “échelle typographique”. Par exemple, à partir d’une base de 16px :
- Texte de base : 1rem (16px)
- Petit texte : 0.875rem (14px)
- Sous-titre : 1.125rem (18px)
- H3 : 1.25rem (20px)
- H2 : 1.5rem (24px)
- H1 : 2rem (32px)
En CSS :
html { font-size: 16px;}body { font-size: 1rem; /* 16px */}.small { font-size: 0.875rem; /* 14px */}h3 { font-size: 1.25rem; /* 20px */}h2 { font-size: 1.5rem; /* 24px */}h1 { font-size: 2rem; /* 32px */}Ensuite, sur mobile, vous pouvez légèrement adapter la base :
@media (max-width: 600px) { html { font-size: 15px; }}Les proportions restent identiques, mais le tout respire mieux dans un écran plus petit.
Astuce : certains aiment définir html { font-size: 62.5%; } pour que 1rem = 10px (puisque 62.5% de 16px ≈ 10px). Ça simplifie la conversion mentale (1.4rem = 14px). C’est une option, mais pas une obligation. L’important, c’est la cohérence.
Gérer les containers et layouts avec rem
Le rem ne sert pas uniquement à la typo. Vous pouvez aussi l’utiliser pour structurer vos blocs.
Exemple : un container centralisé, limité en largeur, avec des marges internes harmonieuses :
.container { max-width: 60rem; /* ≈ 960px si 1rem = 16px */ margin: 0 auto; padding: 2rem 1.5rem;}Si vous augmentez la base html sur les grands écrans (pour des layouts desktop spacieux), ce container s’adaptera automatiquement. Tout reste proportionnel au contexte.
Vous pouvez même combiner rem et pourcentages :
.section { padding: 4rem 5%;}Les côtés restent proportionnels à la largeur, le haut et le bas à la taille de la typo. Un mélange intéressant pour créer des mises en page fluides mais structurées.
Accessibilité : là où le rem fait vraiment la différence
Au-delà de la “beauté” du design, il y a une réalité souvent négligée : tous les utilisateurs ne lisent pas un site dans les mêmes conditions, ni avec les mêmes capacités visuelles.
Un utilisateur peut :
- Augmenter la taille de texte par défaut dans son navigateur.
- Utiliser un zoom global à 125%, 150% ou plus.
- Afficher un site sur un très petit écran, ou au contraire sur un immense écran 4K à distance.
Si votre interface est construite à 100% en pixels, vous résistez à ces ajustements. Si elle est bâtie principalement en rem, vous accompagnez ces besoins et ces contextes. Et c’est là que se joue une partie de l’accessibilité.
En utilisant rem pour la typo, les espacements et la taille des éléments cliquables, vous améliorez :
- Le confort de lecture
- La navigabilité sur mobile et tablette
- L’ergonomie pour les personnes ayant une basse vision
Ce n’est pas une simple “bonne pratique”, c’est un geste de respect envers votre utilisateur.
Exemple concret : refactoriser un bloc en px vers rem
Imaginons un bloc conçu uniquement en px :
.card { width: 320px; padding: 20px; border-radius: 8px;}.card h2 { font-size: 24px; margin-bottom: 12px;}.card p { font-size: 14px; line-height: 21px;}On va le passer en rem, en partant d’une base de 16px :
- 320px → 20rem
- 20px → 1.25rem
- 8px → 0.5rem
- 24px → 1.5rem
- 12px → 0.75rem
- 14px → 0.875rem
- 21px → 1.3125rem (ou 1.3rem pour arrondir)
Version rem :
.card { width: 20rem; padding: 1.25rem; border-radius: 0.5rem;}.card h2 { font-size: 1.5rem; margin-bottom: 0.75rem;}.card p { font-size: 0.875rem; line-height: 1.3rem;}Visuellement, rien ne change… tant que la base reste 16px. Mais si vous ajustez html { font-size }, ce bloc s’adapte sans effort supplémentaire.
Bonnes pratiques pour choisir entre rem et px
Pour résumer tout ça en quelques réflexes simples :
- Utilisez rem pour tout ce qui touche à la lisibilité et à la structure du design : textes, marges, espacements, tailles de blocs.
- Gardez le px pour les éléments graphiques fins et les détails où la précision au pixel est importante.
- Définissez une base claire sur
html(souvent 16px), et construisez une échelle de tailles cohérente autour. - Pensez en “système” : vos tailles ne sont pas des chiffres isolés, mais des proportions entre elles.
- Testez avec des préférences utilisateur modifiées : zoom à 125%, taille de texte augmentée, mobile en orientation paysage, etc.
Plutôt que de vous demander “rem ou px ?”, demandez-vous “où ai-je besoin de flexibilité, où ai-je besoin de précision ?” La réponse dictera l’unité.
Au final, rem et pixels ne sont pas des ennemis. Ce sont deux outils complémentaires dans votre boîte à design responsive. Les maîtriser, c’est vous donner la liberté de créer des interfaces élégantes, robustes et agréables à utiliser, quel que soit l’écran… ou les yeux qui les regardent.
