Px, em, rem : quelle unité choisir pour une taille de police ?
Publié le
En CSS, il existe plusieurs unités de mesure pour définir les tailles, les marges, les
espacements, etc. Parmi les plus courantes, on retrouve
px, em et
rem. Chacune a ses particularités, et choisir la bonne
unité peut avoir un impact sur la lisibilité, l'accessibilité et la réactivité de votre
design.
Qu’est-ce que px ?
px (pixel) est l'unité la plus simple et la plus
directe en CSS. Il représente un point sur l’écran, et sa valeur ne change pas, quelle
que soit la taille de l’écran ou les paramètres de l’utilisateur.
Exemple d’utilisation du px :
h1 {
font-size: 24px;
}Dans cet exemple, la taille de la police est fixée à 24 pixels, ce qui signifie qu'elle restera toujours de cette taille, indépendamment des paramètres du navigateur ou de l’appareil utilisé.
Qu’est-ce que em ?
em est une unité relative. Sa valeur est calculée en
fonction de la taille de la police de l'élément parent. Par exemple, si un élément a une
taille de police de 16 pixels, 1 em équivaut à 16
pixels.
Exemple d’utilisation du em :
h1 {
font-size: 2em;
}
Ici, la taille de la police du h1 sera deux fois celle
de son élément parent. Si le parent a une taille de 16 pixels, le
h1 aura une taille de 32 pixels.
Qu’est-ce que rem ?
rem (root em) est également une unité relative, mais
contrairement à l’em, elle est toujours calculée par
rapport à la taille de la police de l’élément racine (<html>), et non à celle de l’élément parent.
Exemple d’utilisation du rem :
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
Dans cet exemple, la taille de la police du h1 sera de
32 pixels, car elle est basée sur la taille définie au niveau de l'élément racine, qui
est de 16 pixels.
Accessibilité et unités de mesure CSS
L'accessibilité est cruciale lorsque l'on choisit des unités de mesure comme
px, em et
rem, car elles influencent directement la lisibilité
pour tous les utilisateurs, y compris ceux qui ont des besoins spécifiques, comme les
personnes malvoyantes.
Pourquoi éviter uniquement le px pour l'accessibilité
?
Risque de non-adaptabilité : Lorsque vous définissez une taille de
police en px, la taille est fixe et ne s'adapte pas
aux paramètres de zoom du navigateur ou aux préférences des utilisateurs. Par exemple,
si un utilisateur ajuste la taille du texte dans son navigateur pour le rendre plus
lisible, les tailles en px pourraient ne pas s'adapter
correctement.
Avantages de l'utilisation de em et
rem pour l'accessibilité :
-
Responsiveness et scalabilité : Les unités
emetrempermettent à votre texte de s'adapter facilement aux paramètres personnalisés des utilisateurs. Avecrem, la taille de la police s'ajuste selon la taille de l'élément racine (habituellement<html>), ce qui rend le contenu plus flexible et accessible. -
Prise en compte des préférences utilisateur : Lorsque vous utilisez
rem, si un utilisateur a configuré son navigateur pour utiliser une taille de texte spécifique, vos éléments vont s'ajuster en conséquence, rendant le contenu plus facile à lire.
Bonnes pratiques pour l'accessibilité :
-
Utiliser
rempour les tailles de police : Il est recommandé d'utiliserrempour garantir une meilleure adaptabilité à la configuration utilisateur. -
Configurer des tailles de police ajustables : Si vous devez utiliser
px, combinez-le avec une option de mise à l'échelle dans le CSS ou des outils d'ajustement pour que les utilisateurs puissent modifier la taille des polices. - Vérification avec des outils d'accessibilité : Vérifier votre site avec un testeur de contraste pour vous assurer que les polices sont lisibles pour tous les utilisateurs.
