PX vers REM : Le guide du développeur pour une typographie évolutive
Découvrez pourquoi les unités rem améliorent l'accessibilité, comment les calculer et les meilleures pratiques pour la typographie responsive en CSS.
Le choix entre px et rem en CSS n'est pas qu'une préférence stylistique — il a des conséquences directes sur l'accessibilité, le contrôle utilisateur et le design responsive. Des millions d'utilisateurs définissent une taille de police personnalisée dans les préférences de leur navigateur, et une feuille de style entièrement écrite en px ignore complètement ce paramètre.
Ce guide explique la mécanique de chaque unité, la formule pour convertir px en rem et les règles pratiques pour savoir quand utiliser chacune dans une vraie base de code CSS.
Comprendre les unités CSS (px, rem, em, vh)
CSS offre plusieurs unités de longueur pour différents cas d'usage. px (pixels) est une unité absolue. rem (root em) est une unité relative basée sur la font-size de l'élément racine (<html>). em est une unité relative basée sur la font-size de l'élément courant. vh et vw sont relatives au viewport : 1vh = 1% de la hauteur du viewport. Chaque unité a des cas d'usage appropriés et inappropriés.
Outil gratuit Convertisseur PX vers REM Convertissez instantanément les valeurs en pixels en rem avec nimporte quelle taille de basePourquoi px est problématique pour l'accessibilité
Les navigateurs permettent aux utilisateurs de définir une taille de police par défaut dans leurs préférences (généralement 16px par défaut, mais les utilisateurs peuvent définir 20px, 24px ou plus). Lorsque vous définissez font-size: 16px en CSS, cela écrase la préférence de l'utilisateur. Cela viole le critère de succès WCAG 2.1 1.4.4 (Redimensionnement du texte), qui exige que le texte puisse être redimensionné jusqu'à 200% sans perte de contenu ou de fonctionnalité.
Comment fonctionne rem (root font-size)
L'unité rem est toujours relative à la font-size de l'élément <html>. Par défaut, les navigateurs la définissent à 16px. Si un utilisateur augmente la taille de police du navigateur à 20px, alors 1rem = 20px — toutes les valeurs basées sur rem s'adaptent proportionnellement. Ne définissez jamais font-size sur <html> en pixels (ex. html { font-size: 16px }) car cela annule l'objectif. Utilisez un pourcentage : html { font-size: 112.5% } définit la base à 18px sur un navigateur à 16px par défaut.
Outil gratuit Vérificateur de contraste des couleurs Vérifiez les ratios de contraste WCAG 2.1 en même temps que l'accessibilité de la taille de policeFormule PX vers REM
La formule est simple : rem = px / taille-police-base. Avec la base par défaut de 16px : 12px = 0,75rem, 14px = 0,875rem, 16px = 1rem, 18px = 1,125rem, 24px = 1,5rem, 32px = 2rem. Dans les préprocesseurs CSS (Sass, Less), vous pouvez définir une fonction. En CSS moderne, les propriétés personnalisées et calc() peuvent automatiser cela sans préprocesseur.
/* Fonction Sass */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Utilisation */
font-size: rem(18); /* → 1.125rem */
/* CSS pur */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Quand utiliser rem vs em vs px
Utilisez rem pour la typographie globale (texte du corps, titres, étiquettes) et pour les espacements qui doivent s'adapter avec la préférence de taille de police de l'utilisateur. Utilisez em pour les espacements au niveau des composants proportionnels à leur propre font-size (padding dans un bouton). Utilisez px pour les bordures, ombres et éléments de mise en page qui ne doivent pas s'adapter avec le texte. Utilisez les unités viewport (vh, vw) pour les éléments de mise en page liés au viewport.
Propriétés CSS personnalisées pour la base rem
Un modèle courant est de définir une propriété CSS personnalisée pour la taille de police de base. Définissez font-size en pourcentage sur <html> pour respecter les préférences de l'utilisateur, puis utilisez rem partout. La fonction clamp() crée une typographie fluide qui s'adapte entre des valeurs minimales et maximales selon la largeur du viewport, sans points de rupture de media query.
/* Base accessible */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Typographie fluide avec clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}