Faut-il utiliser px, em ou rem pour dimensionner ses textes en CSS ?

TLDR; Le pixel fonctionne, mais mieux vaut utiliser le rem pour l'accessibilité et la maintenabilité.

Web CSS Accessibilité - a11y Tech Design Front-end Polices d'écriture

Article publié le 16/03/2021, dernière mise à jour le 03/10/2023

Cet article a été édité suite au retour d'un lecteur, le 17/03/21 à 22h07

Depuis quelques années, un débat fait rage dans la communauté des développeurs front-end : "Quelles unités de taille faut-il favoriser pour les polices d'écriture ?"

Beaucoup de ressources sur le web vont jusqu'à dire qu'il faut complètement abandonner le pixel, et tout remplacer par des unités relatives, mais alors, quelle unité choisir ?

Le pixel est mort, vive le pixel

Tout d'abord il faut préciser une chose : même les unités relatives comme le em et le rem sont directement converties en pixel par le navigateur, donc quand on parle de remplacer le pixel, c'est seulement lors de la déclaration de la taille en Javascript dans le CSS, le navigateur lui, calcule en pixels.

À noter aussi que les informations suivantes sont valables pour les textes, mais la méthodologie pour dimensionner d'autres éléments n'exploite pas les mêmes unités.

Quelles sont les différences ?

L'unité px

Le pixel est l'unité de base, celle que l'on commence à voir dès que l'on découvre le CSS, mais il faut savoir que le "px" ne représente pas la taille d'un pixel physique, c'est pourquoi on parle parfois de "CSS pixel".

La taille d'un pixel de référence est celle d'un pixel sur un écran de 91dpi, et le pixel manipulé en CSS sera donc calculé par rapport à cette taille-là.

Voici un article de Mozilla expliquant ce concept en détail.

Pour un écran rétina, il faudra donc 4 pixels physiques utilisés pour afficher un "CSS pixel", c'est d'ailleurs pour cela que les media-queries pour les appareils mobiles se basent sur des tailles inférieures avoisinant les 500px alors que les écrans physiques ont des résolutions de plusieurs milliers de pixels.

Donc même si on ne considère pas le pixel comme étant une unité "relative", ce n'est en réalité pas une unité complètement absolue, et elle s'adapte pour faciliter la vie aux développeurs, ainsi qu'aux utilisateurs.

<style>
  li {
    font-size: 16px; /*Cette taille sera toujours équivalente à 16 CSS pixels */
  }
</style>

L'unité em

Cette unité est relative à la taille de la police de l'élément parent. Imaginons que la taille de texte du parent soit de 16px, alors 1em sera égal à 16px, 2em égal à 32px, etc...

Le problème de cette unité réside dans les éléments imbriqués : imaginons que l'on fixe la taille de texte d'un élément

à 1.5 em (24px), si l'on veut créer une sous-liste imbriquée dans un élément d'une liste existante, alors le 1.5em du

de deuxième niveau sera égal à 36px (1.5*1.5*16).

<style>
  html {
    font-size: 16px;
  }
  li {
    font-size: 1.5em; /* Problème lors d'une imbrication */
  }
</style>

<ul>
  <li>Un élément d'une liste</li> <!-- Taille égale à 24 CSS pixels -->
  <li>
    <ul>
      <li>Un élément d'une sous-liste</li> <!-- Taille égale à 36 CSS pixels -->
    </ul>
  </li>
</ul>

Ces effets de bords rend l'unité em difficile à controler et à maintenir, c'est pour cette raison qu'a été créé une nouvelle unité relative : le rem.

L'unité rem (root em)

Le fonctionnement de rem est le même que celui de em, à l'exception qu'il n'est pas relatif à la taille de texte de son parent, mais à la taille de texte de la racine (d'où "root em").

En initialisant la taille de la police du document à 12px, la taille d'un texte enfant paramétré à 2em sera égal à 24px, peu importe où il soit placé dans le document HTML.

L'avantage du rem est que vous pouvez faire varier la taille finale de tous vos textes en changeant simplement la taille de texte du document racine à l'intérieur de media-queries.

<style>
  html {
    font-size: 16px;
  }
  
  h1 {
    font-size: 1.5rem; /* Egal à 24px, 21px ou 18px selon la taille de l'écran */
  }
  
  @media (max-width: 800px) {
      html {
        font-size: 14px;
      }
  }
  
  @media (max-width: 500px) {
      html {
        font-size: 12px;
      }
  }
</style>

L'unité rem est aujourd'hui supporté par 99% des navigateurs, vous pouvez donc l'utiliser à volonté

Quelle est la meilleure solution ?

Il y a de nombreuses années, lorsque l'utilisateur voulait zoomer dans une page, le navigateur grossissait simplement les polices d'écritures (sans grossir les éléments).

Le problème était que les tailles des textes spécifiées en pixels n'étaient pas affectées par le zoom, la solution a donc été d'ajouter des unités relatives pour la taille des polices d'écritures.

Aujourd'hui, les navigateurs modernes ne gèrent plus le zoom avec les tailles des polices, ces derniers augmentent simplement la taille du pixel de référence, ce qui augmente donc la taille de tous les éléments de manière homogène.

Est-ce que cela veut dire que je peux dimensionner mes textes en px ?

En théorie oui, sauf que pour certaines personnes atteintes de déficiances visuelles, il peut être indispensable de pouvoir augmenter uniquement la taille des textes, sans toucher au reste.

C'est pour celà que la plupart des navigateurs donnent la possibilité à l'utilisateur d'ajuster la taille par défaut de la police (de base réglée à 16px).

Donc pour permettre aux personnes souffrant de déficience visuelle d'adapter la taille du texte manière uniforme, mais aussi de garder un code maintenant, l'idéal est d'utiliser les rem pour spécifier les tailles de textes par rapport à la taille de texte par défaut définie par le navigateur (ou l'utilisateur).

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Diana Polekhina sur Unsplash

Vous avez terminé l'article ?

Aucun commentaire pour l'instant