px, rem, em : ce qui les sépare
Le pixel est une valeur fixe. Le rem (root em) est un multiple de
la taille de police de l'élément racine <html>, qui vaut
16 px par défaut dans tous les navigateurs de bureau. Le em,
lui, se calcule par rapport à la taille de police de l'élément parent.
La conversion est donc une division : rem = px ÷ 16. Un titre de 24 px vaut
1,5 rem, un texte de 14 px vaut 0,875 rem.
Repères utiles
- 12 px = 0,75 rem — mentions légales, notes de bas de page.
- 16 px = 1 rem — la base, et le minimum recommandé pour du texte courant.
- 18 px = 1,125 rem — confort de lecture sur un article long.
- 24 px = 1,5 rem — sous-titre.
- 32 px = 2 rem — titre de page.
- 48 px = 3 rem — titre de section d'accueil.
Pourquoi le rem compte pour l'accessibilité
Un internaute qui voit mal augmente la taille de police par défaut dans les réglages de son navigateur. Si vos tailles sont en pixels, ce réglage n'a aucun effet : le texte reste figé. En rem, tout le contenu suit proportionnellement. C'est la raison principale de préférer le rem, avant toute considération esthétique.
Le piège classique de l'em : comme il se calcule sur le parent, les valeurs
se multiplient en cascade. Un 0.9em imbriqué dans un autre 0.9em
donne 0,81 — et le texte rétrécit à chaque niveau sans qu'on comprenne pourquoi.
Dernier point : ne redéfinissez pas html { font-size: 62.5% } pour obtenir
« 1 rem = 10 px ». C'est une astuce répandue, mais elle écrase le réglage choisi par
l'utilisateur et annule le bénéfice d'accessibilité.