px, rem, em, vh — quand utiliser chaque unité CSS

Guide pratique pour choisir la bonne unité CSS dans chaque situation : mise en page, typographie, espacement et design responsive.

5 min de lecture CSS Accessibilité

Choisir la mauvaise unité CSS est l'une des erreurs les plus courantes en développement front-end. Utilisez px partout et votre typographie se casse quand les utilisateurs zooment dans leur navigateur. Utilisez em sans attention et votre espacement se compose de manière inattendue. La bonne nouvelle : une fois que vous comprenez pourquoi chaque unité existe, le bon choix devient évident.

Ce guide couvre px, rem, em, vh, vw — les cinq unités que vous utiliserez dans 95 % de vos projets — avec des règles pratiques, des exemples de code et une perspective axée sur l'accessibilité. À la fin, un tableau de conversion et un guide de décision à mettre en favori.

Unités absolues vs relatives

Les unités CSS se divisent en deux grandes catégories. Les unités absolues ont une taille fixe qui ne change pas selon le contexte. Les unités relatives tirent leur taille d'une référence : un élément parent, la taille de police racine ou les dimensions du viewport.

Unité	Type	Relative à
`px`	Absolue	Pixel CSS (indépendant du dispositif)
`pt`, `cm`	Absolue	Mesure physique (impression)
`rem`	Relative	Font-size de `<html>`
`em`	Relative	Font-size de l'élément courant
`%`	Relative	Dimension de l'élément parent
`vh`, `vw`	Relative	Hauteur / largeur du viewport
`dvh`, `dvw`	Relative	Viewport dynamique (interface browser incluse)

Pour le design écran, préférez les unités relatives pour la typographie et l'espacement. Les unités absolues sont réservées aux éléments qui ne doivent jamais changer : bordures, contours et détails décoratifs.

px — précision pixel

Un pixel CSS n'est pas un pixel physique d'écran. C'est une unité indépendante du dispositif définie de sorte qu'un pixel CSS vaut environ 1/96 de pouce. Sur les écrans haute densité (Retina), un pixel CSS correspond à 2 ou 3 pixels physiques — mais du point de vue CSS, c'est toujours 1px.

Quand utiliser px

Bordures et contours : border: 1px solid — ils ne doivent jamais changer de taille
Box-shadow : box-shadow: 0 2px 8px rgba(0,0,0,.15)
Tailles d'icônes associées à un système d'icônes à taille fixe
Breakpoints media query (bien qu'em soit plus sûr — voir Guide de décision)

Quand NE PAS utiliser px

font-size — ignore les préférences de l'utilisateur, échoue WCAG 1.4.4
line-height — préférez sans unité (1.5) ou rem
padding et margin quand vous voulez qu'ils évoluent avec la taille de police

Règle d'accessibilité : si un utilisateur définit la taille de texte de son navigateur à 200%, les polices en px l'ignorent. Les polices en rem la respectent. Ce n'est pas optionnel — c'est une exigence WCAG 2.1 Niveau AA.

Outil gratuit Convertisseur d'unités CSS Convertissez px, rem, em, vh et plus — collez une valeur et obtenez tous les équivalents instantanément

rem — mise à l'échelle relative à la racine

rem signifie root em. Il est toujours relatif au font-size défini sur l'élément <html>. La valeur par défaut du navigateur est 16px, donc 1rem = 16px sauf modification.

/* Défaut : 1rem = 16px */
h1 { font-size: 2rem; }    /* 32px */
p  { font-size: 1rem; }    /* 16px */
.small { font-size: .75rem; } /* 12px */

Comme rem est ancré à la racine, il ne se cumule pas quand les éléments sont imbriqués — contrairement à em. C'est le choix par défaut pour les tailles de police et l'espacement dans un projet.

L'astuce des 62.5%

Définir html { font-size: 62.5%; } fait que 1rem = 10px, simplifiant le calcul mental (1.6rem = 16px). C'est aujourd'hui considéré comme un anti-pattern car :

Il remplace la préférence de taille de police du navigateur de l'utilisateur
Les composants tiers qui s'appuient sur la base de 16px s'afficheront incorrectement
Les outils CSS modernes (clamp(), custom properties) rendent inutile le calcul en base 10

Utilisez rem avec la base par défaut de 16px. Divisez par 16 mentalement ou utilisez un convertisseur px-to-rem.

em — dimensionnement relatif au contexte

em est relatif au font-size de l'élément courant. Si aucun font-size n'est défini sur l'élément, il hérite du parent — c'est pourquoi em peut se cumuler en cas d'imbrication.

/* Exemple de cumul */
.parent { font-size: 1.2em; }  /* 19.2px si parent = 16px */
.child  { font-size: 1.2em; }  /* 23.04px — 1.2 × 19.2px */

Quand em est le bon choix

Em est l'unité idéale quand vous voulez que l'espacement ou la taille soit proportionnel au font-size du composant lui-même, pas à la racine globale :

.btn {
  font-size: 1rem;
  padding: .5em 1.2em;  /* évolue avec le font-size du btn */
}
.btn-large {
  font-size: 1.25rem;
  /* le padding s'adapte automatiquement */
}

Quand éviter em

Tailles de police globales — utilisez rem pour éviter les cumuls dans le DOM
Dimensions de mise en page — utilisez rem, % ou des unités viewport

Outil gratuit Convertisseur px en rem Convertissez n'importe quelle valeur en pixels en rem en un clic, avec taille de police racine ajustable

vh et vw — unités viewport

vh (hauteur viewport) et vw (largeur viewport) valent chacun 1% de la dimension correspondante du viewport. Idéaux pour des mises en page qui doivent remplir l'écran.

.hero {
  height: 100vh;
  width: 100vw;
}

Le problème de 100vh sur mobile

Sur les navigateurs mobiles, la barre d'adresse et le chrome de navigation occupent de l'espace — mais ne sont pas soustraits de 100vh. Cela fait qu'un élément 100vh dépasse la zone visible, créant une barre de défilement indésirable.

La solution moderne : dvh

L'unité dvh (dynamic viewport height) a été créée pour résoudre ce problème. Elle se met à jour quand l'interface du navigateur apparaît ou disparaît :

.hero {
  height: 100vh;   /* fallback pour anciens navigateurs */
  height: 100dvh;  /* dynamique — prend en compte le chrome collapsible */
}

Incluez toujours le fallback vh. Autres unités viewport utiles : svh, lvh, vmin et vmax.

Tableau de conversion rapide (base 16px)

Quand vous connaissez la valeur en pixels mais avez besoin de l'équivalent rem, divisez par 16 :

px	rem	em (1:1)
8	`0.5rem`	`0.5em`
12	`0.75rem`	`0.75em`
14	`0.875rem`	`0.875em`
16	`1rem`	`1em`
18	`1.125rem`	`1.125em`
20	`1.25rem`	`1.25em`
24	`1.5rem`	`1.5em`
32	`2rem`	`2em`
48	`3rem`	`3em`
64	`4rem`	`4em`

Pour convertir une feuille de style entière, utilisez le Convertisseur d'unités CSS.

Guide de décision

En cas de doute, utilisez ce tableau comme référence rapide :

Propriété / Cas d'usage	Unité recommandée
Taille de police	`rem`
Padding / margin (global)	`rem`
Padding interne à un composant	`em`
Bordures, contours, box-shadow	`px`
Colonnes / largeurs de mise en page	`%` ou `fr` (CSS Grid)
Sections hero / plein écran	`dvh` avec fallback `vh`
Breakpoints media query	`em` (plus accessible) ou `rem`
Line-height	Sans unité (`1.5`) ou `rem`
Taille de police responsive (fluide)	`clamp()` avec valeurs rem

La typographie fluide avec clamp() est un pattern puissant. Utilisez le Générateur Font Size Clamp pour construire ces valeurs visuellement.

Outil gratuit Générateur Font Size Clamp Créez une typographie responsive fluide avec clamp() — définissez min, max et plage fluide visuellement

Questions fréquemment posées

Quelle est la différence entre les unités CSS absolues et relatives ?+

Les unités absolues (px, pt, cm) ont une taille fixe qui ne change pas selon le contexte. Les unités relatives (rem, em, %, vh) évoluent selon une référence — la taille de police racine, l'élément parent ou le viewport. Pour des designs responsives et accessibles, les unités relatives sont généralement préférées pour la typographie et l'espacement.

Pourquoi utiliser rem plutôt que px pour les tailles de police ?+

Quand les utilisateurs définissent une taille de police plus grande dans leur navigateur (un besoin d'accessibilité), les tailles en rem s'adaptent en conséquence. Les tailles en px restent fixes et ignorent la préférence de l'utilisateur. Utiliser rem pour font-size respecte les paramètres utilisateur et est requis pour passer WCAG 1.4.4 (Redimensionnement du texte).

Quand utiliser em plutôt que rem ?+

Utilisez em quand vous voulez que l'espacement ou la taille soit proportionnel au font-size du composant lui-même, pas à la racine globale. Le padding d'un bouton en em grandira proportionnellement si le font-size du bouton augmente, maintenant un poids visuel cohérent.

Qu'est-ce que l'astuce des 62.5% et faut-il l'utiliser ?+

Définir html { font-size: 62.5% } fait que 1rem = 10px, simplifiant le calcul mental (1.6rem = 16px). C'est considéré comme un anti-pattern car cela remplace la préférence de l'utilisateur et peut casser des composants tiers qui s'appuient sur la base de 16px.

Pourquoi 100vh se comporte-t-il de manière inattendue sur mobile ?+

Sur les navigateurs mobiles, la barre d'adresse et le chrome d'interface occupent de l'espace dans le viewport mais ne sont pas soustraits de 100vh. Cela provoque l'extension des éléments 100vh en dehors de la zone visible. La solution moderne est d'utiliser 100dvh (hauteur de viewport dynamique), qui prend en compte l'interface collapsible du navigateur. Ajoutez un fallback : height: 100vh; height: 100dvh.

Quelle unité CSS est la meilleure pour les breakpoints des media queries ?+

La communauté est divisée : px est plus simple à lire, mais les breakpoints en em et rem se déclenchent correctement quand l'utilisateur a changé sa taille de police racine. Utiliser em (ex. @media (max-width: 48em)) est l'approche la plus robuste pour l'accessibilité.

Comment convertir rapidement px en rem ?+

Divisez la valeur en px par 16 (la taille de police racine par défaut) : 24px ÷ 16 = 1.5rem. Si vous utilisez une taille racine différente, divisez par cette valeur. Un outil de conversion peut automatiser cela pour des feuilles de style entières.