Aller au contenu

Font size

La taille de texte par défaut dans la plupart des navigateurs web est de 16 pixels. Cette valeur est utilisée comme taille de base pour la police de caractères si aucune autre taille n'est spécifiée dans le CSS ou dans les paramètres du navigateur.

Il est important de noter que les utilisateurs peuvent modifier cette taille par défaut dans les paramètres de leur navigateur pour répondre à leurs besoins personnels en matière de lisibilité. Par conséquent, lors de la conception de sites web, il est recommandé d'utiliser des unités relatives comme em ou rem plutôt que des pixels absolus, afin de respecter les préférences de taille de texte de l'utilisateur et d'assurer une meilleure accessibilité.

Unité rem

L'unité rem en CSS est une unité de taille relative très utilisée pour définir les dimensions des éléments de la page, notamment la taille de la police de caractères.

  • Relative à la taille de la police de l'élément racine : Le rem (Root EM) est basé sur la taille de la police de caractère de l'élément racine du document, généralement l'élément <html>. Par exemple, si la taille de la police de l'élément <html> est de 16 pixels, alors 1rem équivaut à 16 pixels.
  • Facilite la conception réactive : Utiliser rem pour les tailles permet une plus grande flexibilité et facilité dans la conception de sites web réactifs. En modifiant la taille de la police de l'élément racine, vous pouvez ajuster proportionnellement la taille de tous les éléments qui utilisent rem, ce qui est pratique pour s'adapter à différentes tailles d'écran ou préférences utilisateur.
  • Consistance et accessibilité : L'utilisation de rem contribue à une apparence cohérente sur le site web, car tous les éléments peuvent être proportionnels à une taille de base unique. De plus, cela améliore l'accessibilité, car les utilisateurs peuvent ajuster la taille de la police dans leur navigateur et voir le site s'adapter en conséquence.
  • Différence avec em : Contrairement à em, qui est relative à la taille de la police de l'élément parent, rem est toujours relative à l'élément racine. Cela évite les problèmes d'accumulation et de complexité qui peuvent survenir avec les tailles en em.

Simplification des calculs

Le code CSS ci-dessous a pour but de simplifier les calculs de taille de police en définissant la taille de police de base de l'élément racine <html> à 10 pixels (62.5% de 16 pixels, taille par défaut dans la plupart des navigateurs), et en utilisant cette base pour établir une taille de police cohérente de 16 pixels pour l'élément body via l'unité rem. Ce code est un exemple courant dans le Responsive Web Design.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

Exemple - Utilisation de rem

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1.4rem;
}

rem-example-1.png

Exemple - Utilisation de px

h1 {
  font-size: 25px;
}

p {
  font-size: 14px;
}

rem-example-2.png