La taille de police est modifiable depuis les paramètres et c'est pourquoi on préconise d'utiliser
1rem (
root em) qui retourne la taille de police de la racine, de façon à ce que ça corresponde au choix de l'utilisateur pour respecter les normes d'accessibilité.
Ce qui n'empêche pas de la redéfinir dans les différents nœuds, y compris sur le
<body>, mais toujours en conservant une unité relative de façon à garder le rythme de la page et la cohérence d'affichage.
Le tout est de bien comprendre la différence entre
em et
rem :
- rem est relatif à la taille de police de la racine;
- em à celle du container parent.
Il est possible de déclarer une taille de police flexible qui s'ajuste de manière fluide selon la largeur de l'écran avec
clamp().
Ce qui permet de définir une taille minimale, une valeur préférentielle et une taille plafonnée (max).
L'unité
rem retourne des pixels, 1rem = 16px (par défaut dans plupart des navigateurs).
Ces 16px sont paramétrés dans le navigateur qui définit cette valeur sur l'élément racine : la balise
<html>.
Si on redéclare 12px en
<html>, alors 1rem = 12px (
<html> est la racine), les paramètres du navigateur sont supprimés.
Pour prosilver le font-size déclaré en <html> est de 100%, 1rem = 100% de la valeur paramétrée dans le navigateur = 16px par défaut.