Pixels vers rem — Maîtriser les unités CSS une bonne fois pour toutes

La maquette est ouverte. On y lit font-size: 18px, padding: 24px, margin-top: 40px. En passant dans l'éditeur de code, la question surgit inévitablement : dois-je convertir ces valeurs en rem ? Ou puis-je garder px ?

Cette hésitation est familière à de nombreux développeurs. Une fois qu'on comprend quand utiliser quelle unité CSS, on écrit du code plus accessible et plus facile à maintenir, presque naturellement.

Pourquoi rem existe

Les unités CSS se divisent en absolues et relatives. px est absolue — un pixel à l'écran, fixe, indépendant de tout.

rem est relative. L'abréviation signifie "root em" et se réfère à la taille de police de l'élément racine — la balise html. Le navigateur utilise 16px par défaut. Sans personnalisation :

• 1rem = 16px
• 0,875rem = 14px
• 1,5rem = 24px
• 2rem = 32px

"Je peux faire la division avec une calculatrice, pourquoi utiliser rem ?" — La raison est l'accessibilité.

Certains utilisateurs augmentent la taille de police par défaut dans leur navigateur, par exemple à 20px ou 24px, pour des raisons de vision ou de confort de lecture. Avec des mises en page en px, ces préférences sont complètement ignorées. Avec rem, tout ce qui est défini en rem s'adapte proportionnellement à la taille de police choisie par l'utilisateur.

Les Web Content Accessibility Guidelines (WCAG) exigent que la taille du texte puisse être modifiée par l'utilisateur. rem est la façon la plus naturelle de satisfaire cette exigence.

Quelle unité pour quoi

rem recommandé pour :

• font-size (corps du texte, titres, labels de boutons)
• margin, padding (espacements dans la mise en page)
• width, max-width (largeurs de conteneurs)
• gap dans les grilles et flexbox

px approprié pour :

• border-width (border: 1px solid est la pratique standard)
• Les valeurs de flou et d'expansion de box-shadow
• Les tailles fixes d'icônes décoratives
• Les détails d'outline

em avec précaution :

• Les espacements dans un composant qui doivent être proportionnels à sa propre taille de police (ex : padding: 0,5em 1em pour un bouton)
• Les points de rupture media query pour respecter le zoom utilisateur

em s'accumule dans les éléments imbriqués. Sauf si cet effet est recherché, rem est le choix plus sûr.

La formule de conversion

valeur rem = valeur px ÷ taille de base

Conversions courantes avec une base de 16px :

Valeur px	Valeur rem
12px	0,75rem
14px	0,875rem
16px	1rem
18px	1,125rem
20px	1,25rem
24px	1,5rem
32px	2rem
40px	2,5rem
48px	3rem
64px	4rem

On retient les valeurs les plus fréquentes, le reste se cherche dans un tableau ou se calcule avec un outil.

Le PixelRemConverter

Le PixelRemConverter sur ToolboxHubs fait le calcul à votre place :

1. Entrer la valeur px — Le rem correspondant s'affiche immédiatement
2. Ajuster la base — 16px par défaut, modifiable selon la taille de police racine du projet
3. Utiliser le tableau de conversion — Vue d'ensemble des tailles courantes avec leurs équivalents rem
4. Conversion inverse — rem vers px fonctionne aussi

Lors de l'implémentation CSS à partir de maquettes, garder cet outil ouvert à côté facilite vraiment le travail.

Exemple concret

Une maquette Figma donne ces valeurs :

• Titre de carte : font-size: 28px
• Corps de carte : font-size: 14px
• Rembourrage intérieur : padding: 20px
• Bordure : border: 1px solid

En CSS :

.card-title {
  font-size: 1.75rem;  /* 28px */
}

.card-body {
  font-size: 0.875rem; /* 14px */
}

.card {
  padding: 1.25rem;    /* 20px */
  border: 1px solid #e2e8f0; /* px reste px */
}

La bordure reste en px parce qu'une bordure de 1px doit toujours faire 1px — indépendamment des paramètres de taille de police. Cette cohérence dans la réflexion rend le code plus facile à maintenir.

Mise à l'échelle par un seul ajustement

Quand toutes les tailles typographiques et les espacements sont en rem, une seule modification sur l'élément racine suffit pour mettre à l'échelle toute la page :

html {
  font-size: 14px; /* Mobile : légèrement plus compact */
}

@media (min-width: 1024px) {
  html {
    font-size: 16px; /* Desktop : standard */
  }
}

Pas besoin d'écrire des centaines de media queries individuels pour chaque élément. Tout ce qui est en rem s'adapte automatiquement.

L'astuce des 62,5%

Une technique répandue dans la communauté consiste à écrire html { font-size: 62.5%; } pour ramener la base à 10px. La division devient alors "diviser par 10" : 1,4rem = 14px, 2,4rem = 24px.

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem; /* = 16px */
}

L'inconvénient : si un utilisateur modifie la taille de police de son navigateur, la logique des 62,5% ne se comporte plus exactement comme prévu, car elle se base sur la valeur par défaut du navigateur. Pour les projets avec un fort accent sur l'accessibilité, rester sur la base standard de 16px est plus fiable.

Outils complémentaires

Convertisseur d'unités CSS — Convertit aussi vw, vh, em, % et d'autres unités CSS.

Générateur de dégradé CSS — Utile quand on travaille avec background-size et d'autres propriétés dimensionnelles.

En conclusion

px et rem ne s'excluent pas mutuellement — ils ont des forces différentes. Pour les tailles de police et les espacements qui doivent s'adapter à l'utilisateur : rem. Pour les détails visuels fixes comme les bordures : px.

Une fois ce modèle mental intégré, le choix se fait naturellement en écrivant du CSS. Le PixelRemConverter prend en charge le calcul, la décision reste au développeur.