rem (unité CSS)
Le rem est une unité CSS relative à la taille de police racine, celle définie sur l'élément html. Comme les navigateurs la fixent par défaut à 16 pixels, 1rem vaut en général 16px, 1.5rem vaut 24px, et ainsi de suite. Parce que chaque valeur en rem se calcule depuis une seule racine, l'unité garde typographie et espacements cohérents et respecte le réglage de taille de police de l'utilisateur, ce qui en fait une pierre angulaire du design accessible et responsive.
Comment se calcule un rem
Un rem vaut toujours la taille de police racine multipliée par le nombre. Si l'élément html fait 16px, alors 2rem vaut 32px. Changez la racine une fois et tout ce qui est en rem s'adapte.
html { font-size: 16px; }signifie1rem = 16px.font-size: 1.25rem;donne 20px.- Définir
html { font-size: 100%; }garde la valeur par défaut du navigateur et honore la préférence de l'utilisateur.
rem, em ou px
Choisir la bonne unité revient à savoir à quoi elle est relative.
| Unité | Relative à | S'adapte à la taille utilisateur | Idéal pour |
|---|---|---|---|
| px | Rien (fixe) | Non | Bordures, détails fins |
| em | Taille de police de l'élément courant | Oui, mais se cumule | Espacement lié au texte local |
| rem | Taille de police racine | Oui | Échelle typographique, espacement global |
Pourquoi le rem aide l'accessibilité
Quand un utilisateur augmente la taille de texte par défaut de son navigateur, tout ce qui est en rem grandit avec, car tout découle de la racine. Dimensionner en pixels fixes ignore ce choix et peut rendre un site illisible pour les personnes qui ont besoin d'un texte plus grand, ce qui est aussi un enjeu WCAG. Le rem est la façon la plus simple d'honorer cette préférence sur tout le site.
Construire une échelle en rem
Le rem est l'unité de référence pour les tailles de police et pour une échelle d'espacement cohérente. Un motif courant est un petit ensemble répétable (0.5rem, 1rem, 1.5rem, 2rem, 3rem) pour les marges, le padding et les gaps, ce qui garde un rythme harmonieux et facile à raisonner dans tout un design system.
Pièges courants
Évitez la vieille astuce font-size: 62.5% qui force 1rem = 10px : elle simplifie les calculs mais peut entrer en conflit avec les réglages utilisateur et des styles tiers. Gardez le px pour les bordures fines où l'on ne veut pas de mise à l'échelle, et utilisez l'em quand l'espacement doit suivre la police d'un composant plutôt que la racine.
Le rem chez BeBranded
Chez BeBranded, nous dimensionnons typographie et espacement en rem pour qu'un site s'adapte proprement et reste accessible quand les utilisateurs ajustent leur taille de texte. Cela fait partie du front-end accessible et systématique de notre travail de design.
FAQ
What is a rem in CSS?
What is the difference between rem and em?
What is the difference between rem and px?
How many pixels is 1rem?
Why use rem for accessibility?
Does Webflow support rem?
Outils associés
