La taille du texte est souvent le premier réglage que l'on touche en CSS, et l'un des plus mal compris. Choisir font-size en pixels semble le plus simple, mais c'est justement ce choix qui casse silencieusement l'accessibilité d'un site pour une partie des visiteurs.
font-size fixe la taille du texte d'un élément, et cette taille sert aussi d'unité de référence pour tout ce qui est exprimé en em à l'intérieur de cet élément. Comprendre comment le navigateur calcule cette valeur évite des titres qui débordent, des textes illisibles sur mobile, ou des interfaces qui ignorent les réglages du visiteur.
Définition
font-size accepte plusieurs types de valeurs : une taille fixe en pixels, une taille relative en em ou en rem, un pourcentage, ou depuis peu une valeur fluide calculée avec clamp().
h1 {
font-size: 32px;
}
p {
font-size: 1rem;
}Sans aucune règle CSS, tout navigateur affiche le texte à 16 pixels par défaut. Cette valeur n'est pas arbitraire : c'est la taille de référence sur laquelle reposent toutes les unités relatives, rem et em en tête.
px, rem et clamp() : trois façons de chiffrer
Le pixel donne une taille identique partout, quels que soient les réglages du visiteur. Le rem se calcule par rapport à la taille de police de l'élément racine html, celle que le visiteur peut modifier dans les réglages de son navigateur ou de son système. clamp() combine une valeur minimale, une valeur idéale qui varie avec la largeur de l'écran, et une valeur maximale.
| Unité | Se calcule par rapport à | Suit les réglages du visiteur |
|---|---|---|
px | Rien, valeur absolue | Non |
rem | La taille de police de html | Oui |
clamp() | Une plage entre deux bornes, selon la largeur de l'écran | Dépend des unités utilisées à l'intérieur |
h1 {
/* Jamais moins de 1.75rem, jamais plus de 3rem,
et une valeur qui suit la largeur de l'écran entre les deux */
font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}Ce titre reste lisible sur un petit téléphone, grossit progressivement sur une tablette, puis se stabilise sur un grand écran sans continuer à enfler indéfiniment. C'est l'usage le plus fréquent de clamp(), min() et max() en CSS moderne : remplacer une série de Media query qui redéfinissent la taille à chaque palier par une seule ligne qui s'adapte en continu.
Le piège de l'accessibilité
Un visiteur malvoyant peut demander à son navigateur ou à son système d'agrandir tous les textes, sans avoir à zoomer sur chaque page visitée. Ce réglage agit sur la taille de police de référence, donc sur tout ce qui est exprimé en rem ou en em. Un texte fixé en pixels, lui, reste strictement à sa taille d'origine et ignore complètement ce réglage.
Le zoom classique du navigateur, celui du raccourci Ctrl et molette, agrandit tout, pixels compris, et masque donc le problème en test manuel. C'est le réglage « taille du texte » propre à certains navigateurs et systèmes mobiles qui révèle la différence : lui seul distingue les tailles relatives, qui suivent, des tailles en pixels, qui restent figées.
C'est pour cette raison que la plupart des recommandations d'accessibilité conseillent d'exprimer font-size en rem plutôt qu'en pixels sur le texte de contenu, en réservant les pixels aux détails qui doivent rester fixes quoi qu'il arrive, comme l'épaisseur d'une bordure d'un pixel.
La base de 16 pixels
Comme 1rem vaut par défaut 16 pixels, la conversion se fait facilement de tête : 0.875rem correspond à 14 pixels, 1.5rem à 24 pixels, 2rem à 32 pixels. Certaines équipes redéfinissent la taille racine, par exemple html { font-size: 62.5%; } pour ramener 1rem à 10 pixels et simplifier le calcul mental, mais cette astuce a un coût : elle réduit d'office la taille de tout le texte de 37,5 pour cent pour un visiteur qui n'a rien demandé de tel, et complique la lecture du code pour quiconque ignore cette convention.
Questions fréquentes
Faut-il bannir complètement les pixels sur font-size ?
Non, mais réservez-les à des cas précis où une taille fixe est réellement voulue, comme une icône calibrée au pixel près. Pour le texte que les visiteurs lisent, rem et em reste le choix recommandé, justement parce qu'il respecte leurs préférences d'affichage.
Quelle est la différence entre em et rem pour une taille de texte ?
em se calcule par rapport à la taille de police de l'élément parent le plus proche, ce qui peut créer un effet cumulatif si plusieurs niveaux imbriqués utilisent tous des em. rem se calcule toujours par rapport à l'élément racine html, ce qui donne un résultat plus prévisible dans une mise en page complexe.
Pourquoi mon site paraît-il plus petit après avoir changé la taille racine ?
Si html reçoit une taille de police inférieure à 16 pixels, chaque valeur en rem du site rétrécit d'autant, y compris celles qui semblaient sans rapport avec le texte, comme des espacements ou des tailles d'icônes définis en rem par souci de cohérence.
clamp() remplace-t-il complètement les media queries pour la taille du texte ?
Il remplace la plupart des cas simples de texte qui grossit avec l'écran, mais une Media query reste utile pour des changements plus larges, comme réorganiser la mise en page entière ou changer un rapport de proportions à un palier précis.