Publicité
Taille de police de base (px):
Pixels (px)
REM
EM
rem est relatif à la taille de police de l'élément racine. em est relatif à la taille de police de l'élément parent. Quand le parent est la racine, rem et em sont égaux.
Tableau de Référence
px rem em
4px 0.25rem 0.25em
8px 0.5rem 0.5em
10px 0.625rem 0.625em
12px 0.75rem 0.75em
14px 0.875rem 0.875em
16px 1rem 1em
18px 1.125rem 1.125em
20px 1.25rem 1.25em
24px 1.5rem 1.5em
28px 1.75rem 1.75em
32px 2rem 2em
40px 2.5rem 2.5em
48px 3rem 3em
64px 4rem 4em
Publicité

Foire aux questions

Quelle est la différence entre px, rem et em ?

px (pixels) sont des unités absolues — 1px équivaut toujours à un pixel physique à l'échelle 1x. rem (root em) est relatif à la taille de police de l'élément racine <html>, généralement 16px par défaut. em est relatif à la taille de police du parent de l'élément, ce qui peut se cascader et se multiplier de façon imprévisible dans les éléments imbriqués.

Pourquoi utiliser rem plutôt que px pour les tailles de police ?

L'utilisation de rem permet aux utilisateurs de mettre à l'échelle tout votre site en modifiant la taille de police par défaut de leur navigateur. Cela améliore l'accessibilité pour les utilisateurs malvoyants. px ignore les préférences de taille de police du navigateur, tandis que rem et em les respectent. La plupart des systèmes de conception modernes recommandent rem pour la typographie et l'espacement.

Quelle taille de police de base dois-je utiliser ?

La taille de police par défaut du navigateur est 16px, ce qui est la base la plus courante. Certains développeurs définissent 62,5% (10px) sur l'élément html pour faciliter les calculs (1rem = 10px). Cependant, cela peut remplacer les préférences de l'utilisateur et nuire à l'accessibilité. La bonne pratique est de laisser la taille de police racine à la valeur par défaut du navigateur et de travailler en rem.