Quand utiliser rem plutôt que px en CSS ?

Utilisez rem pour les tailles de police et les espacements de composants, afin que la mise en page se redimensionne proportionnellement quand les utilisateurs modifient la taille de police par défaut de leur navigateur. C'est essentiel pour l'accessibilité. Gardez px pour les éléments qui ne doivent jamais changer, comme les bordures ou les petits éléments décoratifs.

Quelle est la différence entre em et rem ?

rem (root em) est toujours relatif à la taille de police de l'élément racine, généralement 16px. em est relatif à la taille de police de l'élément courant ou de son parent. rem est plus prévisible car il ne cascade pas. em peut se cumuler dans les éléments imbriqués et produire des tailles inattendues.

Comment fonctionnent les unités vh et vw ?

1vh = 1% de la hauteur de la fenêtre, 1vw = 1% de la largeur. Utiles pour les mises en page plein écran et le dimensionnement responsive sans media queries. Attention : sur mobile, la barre d'adresse affecte vh et peut provoquer des sauts de mise en page.

Que signifie 100% en CSS ?

L'unité % est relative à la valeur de la meme propriété sur l'élément parent. Pour width, 100% signifie 100% de la largeur du parent. Pour font-size, 100% signifie 100% de la taille de police héritée. Cette dépendance au contexte explique pourquoi % prête souvent à confusion.

Existe-t-il un outil pour convertir les unités CSS automatiquement ?

Oui — notre convertisseur d'unités CSS vous permet de saisir une valeur, de choisir l'unité source, et d'obtenir immédiatement toutes les valeurs équivalentes. Vous pouvez aussi personnaliser la taille de police de base et les dimensions du viewport pour des conversions précises.

Guide des unités CSS : px, rem, em, vh/vw — lesquelles utiliser et quand

Le problème du 24px que personne n'anticipe

Vous recevez un fichier Figma. Toutes les mesures sont en pixels — 24px pour la police, 16px de padding, 48px de marge. Vous copiez ces valeurs dans votre CSS. Sur votre machine, tout est parfait.

Puis un collègue qui a configuré sa taille de police par défaut à 20px pour plus de confort visuel ouvre la page. Votre titre en 24px reste figé à 24px tandis que tout le reste du layout s'adapte. La hiérarchie typographique si soigneusement équilibrée part à vau-l'eau.

Ce n'est pas un cas limite rare. C'est ce qui arrive inévitablement quand on traite toutes les mesures comme des valeurs absolues. La solution : comprendre quelle unité utiliser selon le contexte, et disposer d'un outil fiable pour passer de l'une à l'autre.

C'est précisément pour ça que le convertisseur d'unités CSS existe. Mais avant de présenter l'outil, construisons le modèle mental nécessaire.

Le glossaire des unités CSS

CSS propose plus d'unités de mesure que la plupart des développeurs ne le réalisent. Voici ce que chacune signifie vraiment :

px — Pixels

L'unité avec laquelle la majorité d'entre nous a appris CSS. 1px correspond nominalement à un pixel d'écran sur un affichage standard. Sur les écrans haute résolution (Retina), le navigateur applique le ratio de pixels de l'appareil — 1px peut alors représenter 2 ou 3 pixels physiques — mais c'est le navigateur qui s'en charge.

La propriété clé : px est fixe. Il ne réagit pas aux préférences de l'utilisateur, aux éléments parents, ni à quoi que ce soit d'autre. Une bordure d'1px sera toujours d'1px — parfois exactement ce qu'il faut, parfois le problème.

rem — Root Em

rem signifie "root em". 1rem est égal à la taille de police de l'élément <html>, typiquement 16px dans la plupart des navigateurs, mais surtout, il respecte la taille de police par défaut configurée par l'utilisateur.

Si un utilisateur règle sa taille de police par défaut à 20px, 1rem vaut 20px partout sur la page. Tout le layout se redimensionne proportionnellement. C'est un gain majeur pour l'accessibilité.

1.5rem à une base de 16px donne 24px. La base peut changer, les proportions restent identiques.

em — Em (l'unité traître)

em fonctionne comme rem mais par rapport à la taille de police de l'élément courant, pas de la racine. Sans imbrication, pas de problème. Mais dès qu'on commence à imbriquer des éléments, ça se complique.

Si un élément a font-size: 1.2em et qu'il se trouve dans un parent avec font-size: 1.2em, l'enfant obtient 1.2 × 1.2 = 1.44em. Sur trois niveaux : 1.728em. C'est le piège de l'héritage des em — on y revient en détail plus bas.

vh / vw — Hauteur et largeur de la fenêtre

1vh = 1% de la hauteur de la fenêtre du navigateur. 1vw = 1% de la largeur. Très utiles pour les sections plein écran et la typographie fluide qui s'adapte à la taille de l'écran.

Le bémol : sur mobile, la barre d'adresse apparait et disparait selon le défilement, ce qui change la hauteur du viewport. Les éléments en 100vh peuvent sauter. Le CSS Working Group a introduit dvh (dynamic viewport height) pour corriger ça, mais le support navigateur est encore en cours.

% — Pourcentage

Le pourcentage est dépendant du contexte d'une façon qui surprend même les développeurs expérimentés. width: 50% c'est 50% de la largeur du parent. font-size: 120% c'est 120% de la taille de police héritée (se comporte comme em). margin-top: 10% correspond à 10% de la largeur du bloc conteneur, pas de sa hauteur — la plupart des gens sont surpris la première fois.

pt, cm, mm — Unités d'impression

Des unités de mesure physiques. Dans le web, elles sont presque exclusivement utiles pour les feuilles de style d'impression. 1pt = 1/72 de pouce. Vous n'écrirez ces unités dans un CSS web que si vous formatez quelque chose pour l'impression.

Le modèle mental de la taille de police de base

Ce que beaucoup de tutoriels omettent : les navigateurs n'ont pas juste une taille de police par défaut, ils ont une taille de police par défaut que l'utilisateur peut modifier. Chrome, Firefox et Safari permettent tous cette configuration. Historiquement, le défaut est 16px dans tous les navigateurs, et c'est la base de la plupart des tables de conversion.

Les calculs qui en découlent :

1rem = 16px  (base navigateur par défaut)
0.75rem = 12px
1.25rem = 20px
1.5rem = 24px
2rem = 32px

Certains systèmes de design utilisent html { font-size: 62.5%; } pour rendre 1rem = 10px et faciliter les calculs (1.6rem = 16px). J'ai utilisé cette astuce et elle fonctionne — mais elle casse silencieusement les composants qui supposent la valeur par défaut du navigateur, et elle n'améliore pas vraiment l'accessibilité. Si vous héritez d'une codebase qui utilise cette technique, vérifiez-le tôt.

Conclusion : rem est prévisible parce qu'il est toujours ancré sur une seule valeur. C'est pourquoi c'est le bon choix pour la plupart des décisions typographiques et d'espacement.

Quel cadre de décision pour choisir une unité ?

Tailles de police → rem

Toujours. Il y a rarement une bonne raison de définir font-size en px. Si quelqu'un change la taille de police de son navigateur, la hiérarchie typographique doit rester intacte. rem le fait automatiquement.

body { font-size: 1rem; }       /* 16px par défaut */
h1   { font-size: 2.5rem; }     /* 40px par défaut */
h2   { font-size: 2rem; }       /* 32px par défaut */
small { font-size: 0.875rem; }  /* 14px par défaut */

Espacements des composants → rem ou px (selon l'intention)

Le padding et la marge nécessitent un jugement. Si l'espacement doit grandir avec le texte (comme le padding vertical d'un bouton), utilisez rem. Si c'est un écart visuel fixe (comme entre une icône et son texte), px convient.

.button {
  padding: 0.75rem 1.5rem;  /* suit la taille de police */
  border: 1px solid currentColor;  /* toujours 1px */
  border-radius: 4px;  /* propriété visuelle fixe */
}

Mises en page plein écran et relatives au viewport → vh/vw

Sections hero, modals qui occupent un pourcentage de l'écran, sidebars sticky — ces cas appartiennent aux unités viewport. Sur mobile, pensez à utiliser dvh si le plein écran exact est important.

Styles d'impression → pt/cm/mm

Dans un bloc @media print, passez aux unités physiques. Les imprimantes raisonnent en pouces et en points, pas en pixels d'écran.

Le piège de l'héritage em (avec un exemple réel)

Voici pourquoi em peut devenir dangereux pour les tailles de police.

Imaginons un composant de carte :

.card { font-size: 1.2em; }
.card .meta { font-size: 0.9em; }
.card .meta .timestamp { font-size: 0.85em; }

Si le parent de .card a font-size: 16px, voici ce qu'on obtient vraiment :

.card → 16px × 1.2 = 19.2px
.card .meta → 19.2px × 0.9 = 17.28px
.card .meta .timestamp → 17.28px × 0.85 = 14.688px

Aucune de ces valeurs ne correspond probablement à l'intention initiale. Impossible à déboguer sans calculatrice.

Les mêmes styles avec rem :

.card { font-size: 1.2rem; }
.card .meta { font-size: 0.9rem; }
.card .meta .timestamp { font-size: 0.85rem; }

Chaque valeur correspond directement à la taille de police racine. Aucun cumul, tout est prévisible.

em reste utile pour line-height: 1.5em ou padding: 0.5em sur un bouton, où on souhaite que le padding change proportionnellement si la taille de police du bouton change.

Table de conversion de référence (base 16px)

px	rem	em (sans héritage)	pt
10px	0.625rem	0.625em	7.5pt
12px	0.75rem	0.75em	9pt
14px	0.875rem	0.875em	10.5pt
16px	1rem	1em	12pt
18px	1.125rem	1.125em	13.5pt
20px	1.25rem	1.25em	15pt
24px	1.5rem	1.5em	18pt
32px	2rem	2em	24pt
40px	2.5rem	2.5em	30pt
48px	3rem	3em	36pt

Ces valeurs supposent 1rem = 16px. Si votre taille de police racine est différente, chaque conversion change. C'est précisément pour ça que l'outil existe.

Comment fonctionne le convertisseur d'unités CSS

Le convertisseur d'unités CSS résout ce qu'une table statique ne peut pas : que faire si la taille de police de base n'est pas 16px ? Ou si le viewport fait 1440px de large et qu'il faut des valeurs vw précises ?

L'outil permet de :

Saisir une valeur numérique
Choisir l'unité source (px, rem, em, vh, vw, %, pt, cm, mm)
Définir la taille de police de base (défaut : 16px, modifiable)
Régler les dimensions du viewport (pour les conversions vh/vw)
Voir instantanément toutes les valeurs équivalentes

C'est le flux que j'utilise pour traduire des spécifications Figma (toujours en px) en valeurs rem pour un design system. Entrer la valeur px, lire le rem équivalent, terminé. Aussi utile quand un layout est légèrement décalé dans DevTools : entrer la valeur px et comparer avec le rem attendu.

Conseils pour les utilisateurs de Tailwind CSS

Tailwind affiche des valeurs en pixels dans sa documentation, mais utilise rem en interne.

Tailwind utilise rem en interne. text-base correspond à 1rem, text-lg à 1.125rem, text-xl à 1.25rem. Si vous définissez font-size manuellement pour correspondre à une classe Tailwind, utilisez rem, pas le nombre en pixels de la doc.

L'échelle d'espacement est aussi en rem. p-4 vaut 1rem (16px par défaut), p-8 vaut 2rem (32px). Quand un designer dit "24px de padding", c'est p-6 en Tailwind (1.5rem). Le convertisseur aide à faire le lien entre les valeurs de design et les classes Tailwind.

Une taille de police de base personnalisée fonctionne bien avec Tailwind. Si vous écrivez html { font-size: 18px }, toutes les valeurs rem de Tailwind se recalculent automatiquement. Utilisez le convertisseur avec une base de 18px pour vérifier vos valeurs personnalisées.

En résumé

Le choix des unités CSS n'est pas anodin — c'est la différence entre un layout qui s'adapte à tous les utilisateurs et un layout qui se casse pour certains.

px — propriétés visuelles fixes comme les bordures et les contours
rem — tailles de police et espacements scalables (la base de l'accessibilité)
em — avec parcimonie, pour une mise à l'échelle relative à la taille de l'élément lui-même
vh/vw — mises en page relatives au viewport, dvh pour le plein écran mobile
% — tailles relatives au conteneur (attention au comportement de margin basé sur la largeur)
pt/cm/mm — uniquement dans les feuilles de style d'impression

Mettez le convertisseur d'unités CSS en favori pour ne plus perdre de temps sur les calculs de conversion et vous concentrer sur ce qui compte vraiment.