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

Sources :

Taille de police par défaut ou zoom ?

Les navigateurs proposent deux réglages différents :

Zoom de la page (Ctrl + +, ou Cmd + + sur Mac) : agrandit toute la page (textes, images, marges), y compris les tailles définies en px. Il ne fait donc aucune différence entre px et rem.
Taille de police par défaut (dans les paramètres du navigateur) : change seulement la valeur de base de 16 pixels. Seuls les textes définis en unités relatives (rem, em, %) s'adaptent, les textes en px gardent leur taille. C'est ce réglage qui est utilisé dans les captures en bas de cette page.

L'unité `rem`

L'unité rem (root em, "em de la racine") est aujourd'hui l'unité généralement recommandée pour définir les tailles de texte en Responsive Web Design, et elle peut aussi servir pour les autres dimensions (marges, espacements). Elle a été présentée avec les autres unités de mesure en CSS en A08.

Relative à la racine du document : 1rem correspond à la taille de police définie sur l'élément racine <html> (l'élément qui contient tous les autres). Si le CSS ne la modifie pas, c'est la taille choisie par l'utilisateur dans son navigateur : 16px par défaut, donc 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 : dans la propriété font-size, em est relative à la taille de police de l'élément parent (dans les autres propriétés, à celle de l'élément lui-même), tandis que rem est toujours relative à la racine du document. Cela évite les effets d'accumulation parfois problématiques avec em (voir l'exemple ci-dessous).

Sources :

Effet d'accumulation avec em

Une liste imbriquée dans une autre liste, avec la taille de police par défaut (16 pixels) :

<ul>
  <li>Niveau 1
    <ul>
      <li>Niveau 2
        <ul>
          <li>Niveau 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ul {
  font-size: 0.8em;
}

Chaque liste prend 80 % de la taille de police de son parent, qui a lui-même déjà été réduit :

Niveau 1 : 16 × 0,8 = 12,8 px
Niveau 2 : 12,8 × 0,8 ≈ 10,2 px
Niveau 3 : 10,2 × 0,8 ≈ 8,2 px (presque illisible)

Avec font-size: 0.8rem, les trois niveaux ont la même taille (12,8 px), car rem se rapporte toujours à <html>.

Simplification des calculs

Une pratique courante consiste à définir la taille de police de base de <html> à 62.5%, ce qui correspond à 10px avec le réglage par défaut du navigateur (car 62.5% de 16px = 10px). Ainsi, 1rem = 10px, ce qui simplifie grandement le calcul de tête (ex. 1.6rem = 16px). La règle body rétablit ensuite une taille de 16px pour le texte courant (sans elle, le texte ferait 10px).

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

Cette astuce est répandue, car elle rend les calculs de tailles plus intuitifs tout en restant flexible, mais elle est discutée (certains auteurs déconseillent de modifier la taille de <html>).

Points d'attention

Toujours en pourcentage, jamais en px : avec 62.5%, la base suit le réglage de l'utilisateur (10px pour 16px, 20px pour 32px). Avec html { font-size: 10px; }, elle resterait à 10px quel que soit ce réglage, et rem ne respecterait plus ses préférences.
Media queries : dans une media query, rem et em se rapportent toujours à la taille par défaut du navigateur (ou au réglage de l'utilisateur), jamais à la taille définie sur <html>. Avec l'astuce des 62.5%, @media (min-width: 60rem) correspond donc à 960px (60 × 16), et non à 600px.

Sources :

Comment lire les captures ci-dessous

Chaque capture montre la même page deux fois dans Chrome, avec un réglage différent de la taille de police par défaut (champ "Police standard", à droite) :

En haut : réglage par défaut, 16 pixels. 1rem vaut 10px (62,5 % de 16 px), donc 2.5rem = 25px et 1.4rem = 14px. Les deux exemples donnent le même rendu.
En bas : réglage à 32 pixels, par exemple pour une personne malvoyante. 1rem vaut maintenant 20px (62,5 % de 32 px).

Comparez le bas des deux captures :

Avec rem : le titre et le paragraphe doublent de taille (50px et 28px). La préférence de l'utilisateur est respectée.
Avec px : le texte garde exactement la même taille (25px et 14px). La préférence de l'utilisateur est ignorée.

Exemple - Utilisation de rem

html {
  font-size: 62.5%;
}

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`