Les tailles relatives REM et EM en CSS

Introduction

Vous avez entendu parler des unités relatives em et rem en CSS ?

Depuis que je m’intéresse à l’accessibilité en web, j’ai à cœur de faire de mon mieux pour respecter les bonnes pratiques en la matière. En réalisant le site toiledemaitre.fr je me suis donc mis à rechercher quel était l’intérêt de ces unités relatives, et comment les implémenter dans mon projet.

Rappel de ce que sont EM et REM

Pour résumer, le pixel est considéré comme une unité absolue, mais ce n’est pas tout à fait vrai, car un pixel en CSS − appelé pixel de référence ⇗ − ne vaut pas toujours un pixel physique ; selon l’appareil, la résolution de l’écran, le PPI, et la configuration du système que l’on utilise, un pixel de référence peut valoir plusieurs pixels physiques.

Le EM et le REM font partie des unités relatives :

• EM est soit :
  • relatif à la taille de la police de l’élément parent s’il est utilisé pour la taille de police.
  • relatif à la taille de police de l’élément courant s’il est utilisé pour une autre propriété (comme width, padding, etc.)
• REM est relatif à la taille de l’élément racine (la balise HTML)

Pour comprendre l’intérêt du REM, il faut savoir que les navigateurs ont une taille de police qui est paramétrable et dont la valeur par défaut est de 16px.
Pour que la valeur REM fonctionne, vous devez attribuer une taille de police a l’élément racine de votre page.
Vous devez mettre un pourcentage pour vous baser sur la taille qui est paramétrée dans le navigateur de l’utilisateur.

Ainsi, prenons l’exemple suivant :

html {
  font-size: 100%;
}

p {
  font-size: 1rem;
  margin: 2em;
}
Langage du code : CSS (css)

Avec cette CSS, si la police de mon navigateur est paramétrée sur 16px, alors 1rem = 100% de 16px.
Mon élément P aura donc une taille de police de 16px et un margin de 32px.
Si je change le paramètre de police de mon navigateur et que je mets 20px, alors 1rem = 20px. Mon élément P aura une taille de police de 20px et un margin de 40px.

Quel est l’intérêt d’utiliser ces unités ?

Quand on fait de l’accessibilité, on sait qu’il y a des utilisateurs qui ont des problèmes de vue et qui auront besoin d’agrandir le texte d’une page ou la page complète pouvoir lire correctement.

L’intérêt présenté pour le REM est de construire votre page en vous basant sur la préférence de l’utilisateur en termes de taille de police.

Mon avis sur le sujet est mitigé. En effet, pour les utilisateurs qui ont besoin d’agrandir pour lire, il y a 3 fonctionnalités qui sont proposées par les navigateurs modernes :

1. Augmenter la taille de la page complète
   Cette solution fonctionnera sur 100% des sites sans casser l’agencement de la page dans la majorité des cas. Je l’utilise personnellement depuis des années et je n’ai jamais rencontré de problème à cause de ça.
2. Augmenter la taille du texte de la page
   Comme le zoom mais augmente uniquement la taille de la police. Fonctionne de partout mais risque de casser l’agencement de la page.
3. Changer la taille de police du navigateur
   Cette solution nécessite que le site définisse la taille des polices en REM pour fonctionner et que l’agencement soit fait en REM/EM pour qu’il reste cohérent et ne se casse pas.

Sachant que la majorité des sites ont des tailles de police qui sont définies en pixel, ça veut dire que cette solution est en pratique quasiment inutilisable pour quelqu’un qui en aurait besoin.

Pourtant, on voit pléthore d’articles sur le web ventant les mérites du REM, mais paradoxalement quand on inspecte leur code, la majorité est toujours en pixel !

Retour d’expérience sur mon site

Avant d’écrire cet article, j’ai appliqué la méthode sur mon site Toile de Maître qui était jusqu’ici en pixel.

Il faut savoir que j’utilise le constructeur Oxygen ⇗ pour mon site, j’ai donc été limité par l’outil pour certaines choses.
Par exemple, je n’ai pas pu définir les media queries en REM car Oxygen ne permet de rentrer que du pixel. C’est un détail mais idéalement il faudrait le faire (ce sont les experts qui ont toujours leurs polices définies en pixel qui le disent !).
Je pourrais toujours les définir en CSS mais ça voudrait dire renoncer à Oxygen pour tout ce qui est rendu sur mobile et tout refaire.
Autre exemple, j’ai dû trouver un hack pour mettre les icônes en REM/EM, car de base on ne peut définir que du pixel.

Sinon pour le reste, voici ce que j’ai tenté de faire :

• Mettre la taille de police racine à 100% (donc 1rem = 16px par défaut)
• Définir les tailles de police en rem
• Définir les paddings et margins verticaux en pourcent
• Définir les paddings et margins horizontaux en em (ou rem dans certains cas)
• Définir les tailles des images en pourcent
• Définir les tailles des icônes en em

Vous voyez que ça peut vite devenir le bordel. Le problème c’est qu’il n’y a pas de méthode bien définie pour utiliser les tailles relatives.
Chacun fait un peu comme il veut et vous trouverez des méthodes différentes à travers le web ; ce qui veut aussi dire que le peu de site qui utilisent les tailles relatives n’auront pas un comportement similaire dans la plupart des cas.

Conclusion

Utiliser les tailles relatives demandera moins de travail si vous vous y prenez dès le début du projet qui si vous devez refaire tout votre site.

Concernant le REM, j’ai du mal à voir la valeur ajoutée au niveau accessibilité étant donné que, comme décrit plus haut, il y a des solutions plus fiables et plus réalistes qui existent tels que le zoom du navigateur.

Néanmoins, je pense qu’il y a une certaine valeur ajoutée au niveau de la maintenabilité du site pour les autres unités relatives.
Le EM permet par exemple d’adapter les margins/paddings de votre élément en fonction de la taille de la police, ce qui peut être pratique.
Les pourcentages sont très utiles pour définir l’agencement principal, je les utilisais déjà avant.

Et vous ? Vous êtes plutôt pixel, em, ou rem ?
N’hésitez pas à laisser un commentaire.