Le CSS moderne propose trois unités de longueur courantes pour la typographie et l’espacement : px, rem et em. Leur conversion est simple, mais le choix de l’unité influe réellement sur l’accessibilité et la maintenabilité. Ce guide explique les calculs, les compromis et les usages de chaque unité.
Fonctionnement des conversions
Chaque conversion consiste en une division ou une multiplication. rem se rapporte à la taille de police racine (l’élément html), de 16 px par défaut : rem = px ÷ 16 et px = rem × 16. Si vous modifiez la racine, le diviseur change ; cet outil permet de définir n’importe quelle base. em fonctionne de la même manière, mais se rapporte à la taille de police de l’élément ou de son parent : em = px ÷ parent. Les résultats sont arrondis à quatre décimales et les zéros finaux sont supprimés : 24 px devient 1.5 rem, et non 1,5000 rem.
Pourquoi rem favorise l’accessibilité par rapport à px
La principale raison de préférer rem est le respect des réglages du navigateur. Lorsqu’une personne augmente sa taille de police par défaut — une pratique fréquente en cas de basse vision — toutes les dimensions en rem s’agrandissent avec elle. Une taille de police fixe en px ignore cette préférence et conserve la taille choisie. Utiliser rem pour les tailles de police, et souvent pour l’espacement, est l’un des moyens les plus simples d’améliorer l’accessibilité ; la plupart des systèmes de design définissent donc leur échelle typographique en rem. La valeur par défaut de 16 px est également un bon minimum, conforme au réglage du navigateur sur lequel s’appuient les pratiques d’accessibilité WCAG.
Quand utiliser em et l’astuce des 62.5 %
Choisissez em lorsque vous souhaitez qu’une valeur suive un composant précis plutôt que toute la page : par exemple, la marge intérieure d’un bouton qui doit évoluer avec son texte, ou une icône dimensionnée par rapport à son libellé. Attention au cumul : l’imbrication d’éléments en em multiplie les facteurs et peut produire des résultats inattendus. Certaines équipes définissent html { font-size: 62.5% } pour obtenir 1 rem = 10 px et simplifier le calcul mental (1.6 rem = 16 px). Cela fonctionne, mais remplace la taille de base préférée de l’utilisateur pour les contenus tiers en px et ajoute une couche d’indirection. Un convertisseur évite la principale raison de cette astuce : vous pouvez conserver la valeur accessible de 16 px et laisser l’outil faire les calculs.