Logo - laConsole
Image de couverture - CSS : l'Unité REM pour un Design System Flexible

CSS : l'Unité REM pour un Design System Flexible

Découvrez pourquoi l'unité rem, plus flexible que px et em, est essentielle pour créer un design system CSS cohérent, accessible et adaptable.

Icône de calendrier
Icône de chronomètre 5 min
css ui/ux

Construire un Design System en CSS demande des choix stratégiques concernant les unités de mesure. Le choix entre px, em et rem influence directement la flexibilité, la cohérence et l’accessibilité de l’interface. Cet article explique pourquoi l’unité rem est un atout pour créer un design system moderne, adaptable et inclusif.

Unités CSS : de la rigidité à la flexibilité

Du px au em

Les pixels (px) sont des unités absolues.

Leur taille est fixe, quel que soit le contexte (résolution d’écran, taille de texte ou paramétrages utilisateurs).

Les pixels sont idéals pour définir des détails précis :

  • Épaisseur de bordures
  • Rayon d’arrondis
  • Tailles d’icônes
  • Dimensions d’images
copié ! 
.card {
  border: solid #000 1px;
  border-radius: 8px;
}

Dans le cas présent, il n’y a aucune raison que l’épaisseur ou l’arrondi des bordures s’adaptent à la taille du texte ou de l’écran.

En revanche, les px deviennent peu adaptés pour les textes ou espacements principaux, car ils ignorent totalement le contexte.

C’est là que l’unité em apporte plus de flexibilité.

L’unité em a un double comportement, selon son usage :

  • Utilisé pour la propriété font-size, 1em correspond à la taille de police du parent.
  • Utilisé avec toutes les autres propriétés (margin, padding, width, line-height, etc.), 1em correspond à la taille de police calculée de l’élément lui-même.

Cette particularité permet une mise en page relative et cohérente localement.

copié ! 
<div class="card">
  <img src="https://via.placeholder.com/150" alt="Image de la carte">
  <h2 class="title">Titre de la carte</h2>
  <p class="description">Description de la carte</p>
</div>
copié ! 
.card {
  font-size: 16px; /* Taille de base */
}

.title {
  font-size: 1.5em; /* 24px (16px * 1.5) => référene à font-size du parent */
  margin-bottom: 0.5em; /* 12px (24px * 0.5) => référene à sa propre font-size */
}

.description {
  font-size: 1.25em; /* 20px (16px * 1.25) => référene à font-size du parent */
}

Ici, la hiérarchie visuelle reste cohérente : changer la taille de police de .card adaptera automatiquement ses enfants.

Du em au rem

Le rem (« root em ») est apparu avec CSS3, soit plus de 15 ans après px et em.

Il se base sur la taille de police racine définie sur le document html.

Avec un référentiel de taille unique, rem combine donc la flexibilité du em avec une cohérence globale, parfaite pour un design system moderne.

2rem vaut donc 2 fois la valeur définie pour la font-size de la balise <html>.

Vous allez me dire : « ok, on aurait pu écrire ça directement en px. » Oui… mais non !

Avec rem, si l’utilisateur modifie la taille par défaut dans son navigateur, tout le design s’adapte automatiquement, garantissant cohérence et accessibilité.

On peut aussi modifier la font-size racine via des media queries ou dynamiquement via un évenement JavaScript, ce qui rend le design encore plus flexible.

Connaissez-vous l'astuce du 62.5% ? 🤔

En CSS, la taille de police par défaut du navigateur est généralement de 16px.

Si vous appliquez une font-size de 62.5% sur votre <html> :

copié ! 
html {
  font-size: 62.5%;
}

On obtient ainsi une taille de texte de 62.5% de 16px = 10px.

Résultat :

  • 1rem = 10px
  • 1.4rem = 14px
  • 2rem = 20px
  • Etc.

Ça rend les calculs mentaux beaucoup plus simples, car 1rem correspond à 10px.

Les avantages de rem pour un Design System

Cohérence

Le rem permet de maintenir une échelle uniforme pour tous les éléments, sans héritages imprévisibles comme avec em.

copié ! 
p {
  font-size: 1rem; /* 16px (16px * 1) */
}

h1 {
  font-size: 2rem; /* 32px (16px * 2) */
}

h2 {
  font-size: 1.75rem; /* 28px (16px * 1.75) */
}

h3 {
  font-size: 1.5rem; /* 24px (16px * 1.5) */
}

Responsivité

Modifier la taille racine (html { font-size: ... }) suffit pour adapter tout le design à la taille de l’écran.

copié ! 
html {
  font-size: 16px;
}

@media (width >= 768px) {
  html {
    font-size: 18px;
  }
}

@media (width >= 1024px) {
  html {
    font-size: 20px;
  }
}

Et voilà : tout ce qui est défini en rem (texte, marges…) s’agrandit harmonieusement sur des écrans à la résolution plus large.

rem + media queries = ❤️

Accessibilité

Le rem respecte les préférences de l’utilisateur. Si celui-ci choisit une taille de texte plus grande dans son navigateur, votre design suivra.

On peut aussi proposer un module d’accessibilité qui ajuste dynamiquement la taille racine :

copié ! 
<button onclick="document.documentElement.style.fontSize='18px'">
  Augmenter la taille du texte
</button>

Au clic sur le bouton, ce petit bout de code JS va augmenter la font-size de l’élement html à 18px.

Bonnes pratiques

Quand utiliser px ?

  • Pour des détails précis : bordures fines, icônes, images.
  • Pour des éléments qui ne doivent pas s’adapter à un contexte plus global (taille des autres éléments, fenêtre du navigateur…).

Quand utiliser em ?

  • Pour des éléments modulaires et imbriqués (ex. boutons, menus, cartes) devant s’adapter à un référentiel de taille local.

Quand utiliser rem ?

  • Pour les textes principaux (titres, paragraphes).
  • Pour les marges, paddings et espacements globaux.
  • Pour les fondations d’un design system.

L’unité rem est un pilier pour un design system CSS flexible, cohérent et accessible. Elle simplifie la maintenance, respecte les préférences des utilisateurs et prépare votre projet à évoluer facilement.
Adopter rem, c’est poser les bases d’un design system moderne et robuste.

Lire aussi