Les internautes peuvent modifier cette taille dans leur navigateur pour améliorer la lisibilité. C'est pourquoi il est fortement recommandé d'utiliser des unités relatives comme em ou rem, plutôt que des unités absolues comme px. Cela garantit une meilleure accessibilité et permet au texte de s'adapter aux préférences de chaque utilisateur.

L'unité `rem`

L'unité rem (root em) est aujourd'hui la référence pour définir les tailles de texte et d'éléments en Responsive Web Design.

Relative à la racine du document : 1rem correspond à la taille de police définie sur l'élément racine <html>. Par défaut, si le navigateur utilise 16px comme taille de base, alors 1rem = 16px.
Facilite la mise à l'échelle : Modifier la taille de police de l'élément <html> permet d'ajuster toutes les tailles définies en rem de manière proportionnelle, pratique pour créer des mises en page fluides et adaptatives.
Cohérence et accessibilité : L'utilisation de rem assure une uniformité visuelle et respecte les préférences de l'utilisateur en matière de taille de texte.
Différence avec em : em est relative à la taille de police de l'élément parent, tandis que rem est toujours relative à la racine du document. Cela évite les effets d'accumulation parfois problématiques avec em.

Simplification des calculs

Une pratique courante consiste à définir la taille de police de base de <html> à 62.5%, ce qui correspond à 10px (car 62.5% de 16px = 10px). Ainsi, 1rem = 10px, ce qui simplifie grandement les conversions mentales (ex. 1.6rem = 16px).

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

Cette approche est fréquemment utilisée dans les projets responsive modernes, car elle rend les calculs de tailles plus intuitifs tout en restant flexibles.

Exemple - Utilisation de rem

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1.4rem;
}

Exemple - Utilisation de px

h1 {
  font-size: 25px;
}

p {
  font-size: 14px;
}

Font size

L'unité rem

L'unité `rem`