Convertisseur CSS
Convertissez facilement les unités CSS : em, rem, px, cm, pouces
Convertisseur d'unités CSS
Guide des unités CSS
📏 Pixels (px)
Unité absolue, 1px = 1 pixel à l'écran
📐 Em (em)
Unité relative à la taille de police parent. 1em = taille police actuelle
🎯 Rem (rem)
Relatif à la taille de police de la racine (root). Meilleur pour accessibilité
📊 Centimètres (cm)
Unité physique, 1cm = 37.8px
📋 Pouces (in)
Unité physique, 1 pouce = 96px
💡 Conseil
Pour le web, préférez rem pour les tailles (meilleure accessibilité) et px pour les bordures/ombres.
Tableau de conversion rapide (base 16px)
| PX | EM | REM | CM | IN |
|---|---|---|---|---|
| 12px | 0.75em | 0.75rem | 0.32cm | 0.125in |
| 14px | 0.875em | 0.875rem | 0.37cm | 0.146in |
| 16px | 1em | 1rem | 0.42cm | 0.167in |
| 18px | 1.125em | 1.125rem | 0.48cm | 0.188in |
| 20px | 1.25em | 1.25rem | 0.53cm | 0.208in |
| 24px | 1.5em | 1.5rem | 0.63cm | 0.25in |
| 32px | 2em | 2rem | 0.85cm | 0.333in |
S’approprier les conversions CSS
Ce convertisseur CSS vous aide à justifier vos choix de tailles dans une spécification produit. Il permet de présenter un schéma clair pour les designers qui veulent que leurs composants restent cohérents quels que soient les supports.
Scénarios métier
- Construire une grille responsive où les marges en rem doivent être déduites.
- Documenter la taille de police de base avant de livrer un design system.
- Convertir les dimensions d’un prototype Sketch (pouces/cm) en pixels pour le dev front.
- Analyser si les bordures en pixels fonctionnent sur différents écrans haute densité.
Bonnes pratiques
- Commencez par définir la base (16px par défaut) puis convertissez pour comparer rem et em.
- Expliquez la différence entre unités relatives et unités fixes dans vos articles et FAQ.
- Intégrez des conversions concrètes pour que les LLM comprennent les usages.
- Utilisez les exemples du tableau pour créer des modèles réutilisables.
Processus d’optimisation
Déterminez votre cible d’accessibilité (WCAG mentionne 1rem ≈ 16px). Convertissez ensuite la taille choisie pour vérifier la cohérence entre mobile et desktop. Consignez les conversions dans un document pour éviter les divergences.