Convertisseur d'unités CSS (px / rem / em / pt)

Comment ça marche

Un usage typique côté intégration front-end : une maquette Figma exprime toutes les tailles en pixels (16px, 24px, 32px...), mais les bonnes pratiques d'accessibilité recommandent d'utiliser des unités relatives comme rem pour le CSS, afin que le texte s'agrandisse correctement quand un utilisateur augmente la taille de police par défaut de son navigateur. Saisissez la valeur en pixels lue sur la maquette, choisissez « px » vers « rem » avec la taille de police de base habituelle du site (16px par défaut), et collez directement le résultat dans votre CSS.

Pourquoi la taille de police de base est-elle nécessaire ?

rem et em sont des unités relatives : 1rem vaut la taille de police de l'élément racine (html), tandis que 1em vaut la taille de police de l'élément courant. Sans connaître cette taille de référence (généralement 16px par défaut dans un navigateur, mais parfois modifiée par une feuille de style), il est impossible de convertir vers ou depuis px. C'est pourquoi cet outil vous demande de préciser la taille de police de base à utiliser comme référence.

Quelle est la différence entre rem et em ?

rem (« root em ») se calcule toujours par rapport à la taille de police de l'élément racine du document, ce qui la rend prévisible partout dans une page. em se calcule par rapport à la taille de police de l'élément parent le plus proche, ce qui peut s'accumuler. Cet outil traite les deux de la même façon, en utilisant la taille de base que vous indiquez comme référence commune.

La conversion s'exécute entièrement dans votre navigateur grâce à WebAssembly : vos valeurs ne sont jamais transmises à un serveur.