Unité relative

Fixer toutes les tailles en pixels donne un résultat prévisible à l’écran, mais rigide : si un visiteur agrandit la taille de police par défaut de son navigateur pour mieux lire, un site tout en pixels ne bouge pas d’un poil. Les unités relatives corrigent ce problème en calculant une valeur par rapport à un repère : em se base sur la taille de police de l’élément parent, rem sur celle de l’élément racine (html), et % sur la dimension du conteneur pour largeurs et hauteurs.

Usage dans WordPress

Le système theme.json encourage l’usage du rem pour les tailles de police et d’espacement définies dans les préréglages, afin que l’ensemble du site réagisse de façon cohérente si un thème enfant ou l’utilisateur change la taille de base. Les points de rupture des blocs (bloc Colonnes, bloc Groupe en disposition empilée) combinent souvent unités relatives et requêtes média pour rester lisibles sur mobile sans recalculer chaque valeur en dur.

Exemple

html { font-size: 100%; } /* référence : 16px par défaut */

.wp-block-heading {
  font-size: 2rem;   /* toujours 2 × la taille racine */
  margin-bottom: 0.5em; /* 0.5 × la taille de CE titre */
}

À ne pas confondre avec

• em et rem ne se comportent pas pareil en cascade : un em imbriqué dans plusieurs niveaux d’éléments accumule les tailles de police des parents, alors qu’un rem reste toujours ancré à la racine.
• Les unités de fenêtre (vw, vh) sont aussi relatives, mais à la taille du viewport et non à une police : elles servent davantage à la mise en page qu’à la typographie.
• Une taille en pixels n’est pas « fausse », mais elle ignore les préférences d’accessibilité du visiteur, contrairement à rem qui les respecte naturellement.