Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
UX / UI Impact faible Moyen 30 à 60 minutes

Unités de police relatives (rem/em vs px)

Préférez les rem/em aux px fixes pour les tailles de police.

Ce que c’est

La taille de la police peut être spécifiée fixe en px, ou relativement en rem/em. Rem est basé sur la taille de base du document, il répond donc au paramètre de taille de police du navigateur de l'utilisateur.

Pourquoi c’est important

Correction du px qui l'ignore lorsqu'un utilisateur augmente la taille de police par défaut dans le navigateur (courant chez les personnes ayant une vision plus faible). Rem/em respectent ce paramètre : ils sont plus accessibles et plus faciles à mettre à l'échelle de manière cohérente.

Comment faire

  1. 1Définissez la taille de base sur <html> (généralement 100 % = 16 px).
  2. 2Spécifiez les tailles de police en rem (par exemple 1rem, 1,25rem, 0,875rem).
  3. 3Utilisez-les là où la taille doit provenir du parent.
  4. 4Laissez les px fixes uniquement pour les détails pour lesquels la mise à l'échelle n'a pas de sens (par exemple, les lignes de 1 px).

Exemple

Incorrect
h1{ font-size: 32px; }
p { font-size: 14px; }
Correct
html{ font-size: 100%; }
h1{ font-size: 2rem; }
p{ font-size: 0.95rem; }

Conclusion

Les unités relatives sont plus accessibles et maintenables. Ce n'est pas un désastre comme un zoom bloqué, mais sur un nouveau site, il vaut la peine de le faire dès le début avec rem. Il respecte les utilisateurs qui augmentent la taille de leur police.

Sujets liés