Convertisseur d'unités CSS
Convertissez une longueur CSS entre px, rem, em, vw, vh, pt et pourcent. Saisissez la valeur, choisissez son unité, indiquez la taille de police racine et parente ainsi que les dimensions de la fenêtre, et obtenez tous les équivalents en une seule fois.
Convertisseur d'unités CSS : px, rem, em, vw et vh
Formule des unités CSS
Où :
- \(v\) — la longueur saisie, dans son unité d'origine ;
- \(f(\text{unit})\) — le nombre de pixels que vaut une unité de ce type :
- \(px\) : 1 \(rem\) : taille de police racine \(em\) : taille de police du parent \(vw\) : largeur de la fenêtre \(/ 100\) \(vh\) : hauteur de la fenêtre \(/ 100\) \(pt\) : \(96/72 = 1.3333\) \(\%\) : taille de police du parent \(/ 100\)
Le calculateur commence par convertir la valeur saisie en pixels, puis la divise par le facteur en pixels de chaque unité cible. Cette approche en deux étapes garantit que les sept résultats sont parfaitement cohérents entre eux.
Unités CSS – Exemple de calcul
Exemple : convertir 24px en rem, em, vw, vh et pt, avec une taille de police racine et parente de 16px et une fenêtre de 1920×1080 (les valeurs par défaut du calculateur).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Résultat : 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
Comment utiliser le convertisseur d'unités CSS
- Saisissez la longueur dans le champ Valeur — par exemple 24. Les valeurs négatives fonctionnent aussi, ce qui est utile pour les marges négatives.
- Sélectionnez l'unité de cette valeur dans le menu déroulant Unité CSS (px, rem, em, vw, vh, pt ou %).
- Définissez la Taille de police racine — la taille de police de l'élément
<html>. Par défaut, les navigateurs utilisent 16px. - Définissez la Taille de police du parent — la taille de police calculée de l'élément parent, indispensable pour les conversions en em et en %.
- Saisissez la Largeur et la Hauteur de la fenêtre (viewport) du navigateur en pixels ; elles déterminent les résultats en vw et en vh.
- Lisez tous les équivalents en une seule fois sous Valeurs converties, accompagnés de la base de conversion, qui indique combien de pixels vaut chaque unité dans votre configuration.
Que sont les unités CSS et pourquoi sont-elles importantes ?
Les longueurs CSS se répartissent en deux familles. Les unités absolues, comme px et pt, ont une taille fixe : la spécification CSS définit le pixel de référence de sorte que 1in = 96px = 72pt. Les unités relatives dépendent du contexte : le rem se réfère à la taille de police de l'élément racine, l'em à celle du parent, vw et vh à 1 % de la largeur ou de la hauteur de la fenêtre, et % (pour font-size) à la taille de police du parent.
Le choix de l'unité détermine le comportement d'une mise en page. Les valeurs en px restent constantes quelles que soient les préférences de l'utilisateur : prévisibles pour les bordures et les détails fins, mais rigides pour la typographie. Les valeurs en rem suivent la taille de police racine : si l'utilisateur agrandit le texte de base du navigateur, tout ce qui est dimensionné en rem grandit proportionnellement — une exigence essentielle en matière d'accessibilité. Les valeurs en em se cumulent à travers les éléments imbriqués, ce qui peut donner des résultats surprenants dans un balisage profond.
Les unités liées à la fenêtre rendent la typographie et l'espacement sensibles à la taille de celle-ci. Une largeur fixée à 50vw occupe toujours la moitié de l'écran ; c'est pourquoi les sections hero et la typographie fluide combinent souvent vw et rem avec clamp(). Comme vw et vh changent à chaque redimensionnement, leur conversion en px n'a de sens que pour une taille de fenêtre précise — celle que vous saisissez dans le calculateur.
L'interprétation des résultats est simple : chaque valeur correspond à la même longueur physique exprimée dans une unité différente. Si vous migrez un design system de px vers rem, la colonne rem vous donne la valeur du token à écrire ; si vous imprimez ou comparez avec des outils de conception travaillant en points, la colonne pt fournit l'équivalent direct.
Hypothèses, limites et conseils pratiques
- Le convertisseur part du pixel de référence standard du CSS :
1in = 96px = 72pt. Le rendu physique (impression) peut légèrement différer selon le périphérique. - Le pourcent est traité comme relatif à la taille de police du parent, ce qui est exact pour
font-size. Pourwidth,height,marginetpadding, le pourcent se réfère aux dimensions du parent ; ces cas demandent donc une autre valeur de référence. - L'em est relatif à la taille de police du parent. Lorsqu'il est utilisé dans une propriété comme
line-heightoupaddingsur l'élément lui-même, l'em se réfère alors à la taille de police de cet élément — ajustez le champ Taille de police du parent en conséquence. - Les résultats en vw et vh ne sont valables que pour les dimensions de fenêtre que vous avez saisies. Testez plusieurs tailles (par exemple 1920×1080, 1366×768, 390×844) pour voir comment les valeurs converties évoluent.
- Les navigateurs appliquent une taille de police minimale dans certaines configurations, ce qui peut faire apparaître un très petit texte basé sur rem ou em plus grand que ne le prévoit le calcul.
- Une règle utile à retenir : avec la taille de police racine par défaut de 16px, 1rem = 16px, donc px ÷ 16 = rem. Si vous fixez la racine à 10px, les valeurs en rem correspondent à px ÷ 10 — c'est pourquoi beaucoup de design systems adoptent une racine de 10px.
Si vous devez également convertir des unités de mesure ou d'ingénierie, essayez notre Convertisseur d'unités de puissance, le Convertisseur de débit de données ou encore le Convertisseur d'unités de vitesse.
Questions fréquentes
Comment convertir des px en rem à la main, sans calculateur ?
Divisez la valeur en pixels par la taille de police racine. Avec la valeur par défaut du navigateur de 16px, la formule est \( rem = px \div 16 \). Ainsi, 24px = 1.5rem, 32px = 2rem et 12px = 0.75rem. Dans l'autre sens, multipliez : \( px = rem \times 16 \). Si le projet définit une autre taille racine, comme 10px dans l'astuce populaire des 62,5 %, remplacez simplement 16 par cette valeur.
Quelle est la différence entre em et rem, et quand utiliser l'un ou l'autre ?
Le rem se réfère toujours à la taille de police de l'élément racine : 1.5rem signifie donc la même chose partout dans le document. L'em se réfère à la taille de police de l'élément parent (ou de l'élément lui-même pour des propriétés comme padding et line-height), et se cumule donc dans un balisage imbriqué. Une règle courante : utilisez rem pour les tailles de police et l'espacement, afin que les valeurs restent prévisibles et respectent les préférences de l'utilisateur ; utilisez em quand vous voulez qu'un élément suive le texte local, comme le padding d'un bouton.
Combien de pixels vaut 1pt, et comment pt et px se rapportent-ils au pouce ?
Le CSS définit le pixel de référence de sorte que \( 1\text{in} = 96\text{px} = 72\text{pt} \). Ainsi, 1pt équivaut à \( 96/72 \approx 1.3333 \)px, et 1px à 0.75pt. C'est pourquoi les traitements de texte et les outils de conception print travaillant en points affichent des chiffres différents du CSS : une police de 12pt s'affiche en 16px à l'écran. Le convertisseur utilise exactement ce rapport pour ses résultats en pt.
Pourquoi mes valeurs en em ne correspondent-elles pas à ce qu'affiche le navigateur ?
Deux causes fréquentes. D'abord, l'em se cumule : si un parent a une font-size de 1.25em sur une racine de 16px (soit 20px) et que l'enfant est réglé à 1.5em, l'enfant fait 30px, et non 24px. Ensuite, pour des propriétés comme padding, margin et line-height sur un élément, l'em se réfère à la taille de police de l'élément lui-même, et non à celle du parent. Dans ces cas-là, saisissez la taille de police calculée de l'élément comme Taille de police du parent dans le convertisseur.
Les valeurs en vw et vh sont-elles identiques sur tous les écrans ?
Non. 1vw représente 1 % de la largeur actuelle de la fenêtre : une même valeur en vw correspond donc à des nombres de pixels différents selon la taille de la fenêtre. Par exemple, 10vw vaut 192px sur un écran large de 1920px, mais seulement 39px sur un téléphone de 390px. Ne convertissez vw/vh en px que pour une taille de fenêtre précise — saisissez dans le calculateur les dimensions exactes visées, puis relancez-le pour les autres points de rupture.
Comment connaître la taille de police racine réellement utilisée par un site ?
Ouvrez les outils de développement du navigateur, inspectez l'élément <html> et consultez sa font-size calculée dans le panneau Styles ou Calculé. Si aucune règle CSS ne la remplace, la valeur par défaut du navigateur de 16px s'applique. Notez que certains sites utilisent l'astuce des 62,5 %, en fixant la racine à 10px pour que 1rem = 10px. Vérifiez aussi si une extension de navigateur ou un réglage de taille de police minimale modifie la valeur effective.
Pour l'accessibilité, vaut-il mieux utiliser px ou rem ?
Le rem est généralement préféré pour les tailles de police : il s'adapte quand l'utilisateur augmente la taille de texte de base du navigateur, alors qu'un texte en px reste figé et ignore cette préférence. C'est important pour les personnes malvoyantes, et c'est exigé par des référentiels d'accessibilité comme WCAG. Le px reste adapté aux bordures, ombres et filets où la mise à l'échelle est indésirable. En pratique : rem pour la typographie et l'espacement, px pour les détails décoratifs au pixel près, et clamp() avec rem et vw pour la typographie fluide.