Convertisseur Unités CSS en Ligne
Convertis entre px, rem, em, vw, vh et d'autres unités CSS, dans ton navigateur.
Click any value to copy
Pourquoi l'utiliser
Design responsif sans calculs manuels
Toutes les unités CSS
px, rem, em, %, vw, vh, pt et plus. Conversion instantanée entre n'importe quelle paire.
Base configurable
Ajuste la taille de police de base pour calculer des valeurs rem/em précises selon ton projet.
Instantané
Résultats en temps réel pendant que tu tapes. Sans boutons, sans attente.
Sans inscription
Outil d'usage quotidien disponible instantanément, sans compte ni installation.
Comment ça marche
Trois étapes, sans complications
Saisis la valeur
Tape la valeur numérique et sélectionne l'unité source (ex. 24px). Ajuste la taille de police de base si elle diffère de 16px.
Obtiens tous les équivalents
Le convertisseur calcule instantanément l'équivalent en rem, em, %, vw, pt et d'autres unités CSS couramment utilisées.
Utilise la valeur dans ton CSS
Copie la valeur dont tu as besoin directement dans ta feuille de styles. Sans calculs manuels, sans erreurs.
FAQ
Des questions ?
Utilise px pour les valeurs qui ne doivent pas évoluer avec les préférences de l'utilisateur : bordures fines (1px), ombres, positions absolues. Utilise rem pour les tailles de police et les espacements qui doivent respecter les préférences d'accessibilité de l'utilisateur : si un utilisateur augmente la taille de police de base dans son navigateur (la plupart des lecteurs d'écran et des utilisateurs malvoyants le font), les valeurs en rem s'adaptent automatiquement. Utilise em pour les valeurs relatives à la taille de police de l'élément parent : utile dans les composants qui doivent maintenir leurs proportions internes quel que soit le contexte.
16px comme taille de police de base a été établi par les navigateurs web à la fin des années 1990, dérivé des résolutions typiques des moniteurs de l'époque (72-96 DPI) et des standards de lisibilité pour la lecture à l'écran. C'est approximativement équivalent à 12 points typographiques (12pt), la taille standard pour le corps du texte dans les documents imprimés depuis l'ère de Gutenberg. Le W3C l'adopte comme valeur initiale pour la propriété font-size.
La spécification WCAG 1.4.4 (Redimensionnement du texte) exige que le texte puisse être augmenté jusqu'à 200% sans perte de contenu ni de fonctionnalité. Si tu utilises px pour les tailles de police, le texte ne s'adapte pas quand l'utilisateur change la taille de base dans les paramètres du navigateur (Paramètres > Apparence > Taille de police dans Chrome/Firefox). Si tu utilises rem, le texte s'adapte automatiquement. C'est pourquoi les guides d'accessibilité recommandent rem pour font-size et line-height, mais acceptent px pour les bordures et les décorations.
vw (viewport width) et vh (viewport height) sont des pourcentages de la taille de la fenêtre du navigateur. 1vw = 1% de la largeur de la fenêtre. Pour la typographie fluide, la fonction CSS clamp() est utilisée : font-size: clamp(1rem, 2.5vw, 2rem) définit une taille minimale (1rem), une taille préférée qui évolue avec le viewport (2.5vw) et un maximum (2rem). Cela produit un texte qui augmente progressivement avec la taille de l'écran sans sauts brusques, éliminant le besoin de media queries pour la typographie.
CSS dispose d'unités physiques absolues : cm, mm, in, pt et pc. Le problème est que sur les écrans, ces unités ne correspondent pas à leurs mesures physiques réelles. Sur les écrans haute densité (Retina, 4K), 1cm en CSS peut mesurer 0.8cm ou 1.2cm physiquement selon l'appareil et le DPI déclaré. Ce n'est que dans les media d'impression (print media queries) que cm et mm correspondent exactement à la mesure physique. C'est pourquoi les designers web utilisent px, rem, em et des unités relatives, en réservant les unités absolues aux styles d'impression.
Unités CSS : spécification, histoire et l'astuce des 62.5%
La spécification CSS Units and Values (CSS Values Level 3) a été publiée par le W3C en 2015 et a standardisé les unités viewport (vw, vh, vmin, vmax) que les navigateurs avaient commencé à implémenter de façon expérimentale depuis 2012. Les unités viewport résolvent un problème fondamental du design responsif : créer des mises en page et des typographies qui s'adaptent à la taille de l'écran sans media queries. CSS Values Level 4 (en état de brouillon avancé) introduit les unités de container query (cqw, cqh, cqi, cqb, cqmin, cqmax), qui sont des pourcentages du conteneur CSS le plus proche plutôt que du viewport, activées dans tous les grands navigateurs depuis fin 2022.
L'astuce des 62.5% est une technique historique pour simplifier l'utilisation de rem : en définissant font-size: 62.5% sur l'élément html (équivalent à 10px en supposant une base de 16px), les calculs en rem deviennent triviaux (1.6rem = 16px, 2.4rem = 24px). Elle a été popularisée par Jonathan Snook vers 2011 dans le contexte de l'essor du design responsif. Cependant, cette technique présente un problème d'accessibilité : si un utilisateur a configuré une taille de police de base différente de 16px dans son navigateur, les 62.5% l'ajustent incorrectement, brisant le scaling. C'est pourquoi les guides d'accessibilité modernes déconseillent cette technique et recommandent de laisser le font-size de l'html non modifié et d'utiliser rem directement.
CSS Values Level 4 introduit également des unités relatives à la typographie : cap (hauteur des majuscules), ch (largeur du glyphe 0), ic (largeur du glyphe CJK 水), lh (line-height de l'élément), rlh (line-height de la racine), ex (hauteur de la lettre x minuscule). Ces unités permettent de créer des espacements parfaitement proportionnés à la typographie sans dépendre de valeurs numériques fixes. L'unité ch est particulièrement utile pour définir la largeur maximale des colonnes de texte (max-width: 65ch est une mesure de lisibilité optimale selon la recherche typographique, équivalent à environ 65 caractères par ligne).