Convertissez les px en rem, em, pt, picas, pouces et mm selon la taille de police de la racine, celle du parent et les DPI. CSS fixe 1 in = 96 px = 72 pt.
Par AdminRédigé avec des outils de rédaction fondés sur l’IAMis à jour Exemples vérifiés : 7
24px vaut 1.5rem avec une police racine de 16 px et 96 pixels par pouce.
| Unité | Valeur | Définition |
|---|---|---|
| pixels (px) | 24px | 1 px |
| points (pt) | 18pt | 1 pt = 1/72 in |
| picas (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Pouces (in) | 0.25in | 1 in = DPI px |
| Centimètres (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Millimètres (mm) | 6.35mm | 1 mm = 1/25.4 in |
| quarts de millimètre (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (taille de police du parent) | 1.5em | 1 em = parent font size |
| rem (taille de police racine) | 1.5rem | 1 rem = root font size |
| Pourcentage de la taille de police du parent (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS convertit les longueurs en passant par les pixels. Les rapports entre unités absolues sont fixes : 1 in = 2.54 cm = 96 px = 72 pt = 6 pc ; 1 Q est un quart de millimètre. Les unités relatives à la police dépendent de la page : 1 rem vaut la taille de police racine ; pour définir font-size, 1 em ou 100% vaut celle du parent. Le convertisseur passe d’abord en pixels, puis divise par les pixels d’une unité cible.
Les développeurs web passent des pixels d’une maquette aux rem pour que le texte puisse suivre la préférence de police du lecteur, si la taille racine la respecte : avec la racine par défaut de 16 px, 24 px valent 1.5 rem. En impression, on utilise le champ de résolution : à 300 DPI, un logo de 10 mm demande environ 118 pixels.
À l’écran, un pouce CSS ne correspond pas nécessairement à un pouce mesuré. CSS fixe 96 px par pouce, avec un pixel de référence d’environ 0.0213° d’angle visuel. La correspondance avec une règle dépend du support et de la configuration d’impression.
Dans la formule, xₛ et xₜ sont les valeurs de départ et d’arrivée ; pₛ et pₜ sont les pixels par unité de départ et d’arrivée. Ces facteurs dépendent des tailles de police et de la densité de pixels saisies.
Saisissez la valeur, les unités, la taille de police racine et celle du parent. Le calcul utilise les pixels par unité : x_target = x_source × p_source / p_target. rem dépend de la racine ; ce modèle utilise le parent pour em et le pourcentage de taille de police.
root = 16 px; 24 px = 1.5 rem, mais root = 20 px; 24 px = 1.2 rem. Pour les unités absolues en pixels CSS, 1 in = 96 CSS px = 72 pt. Le champ de densité permet aussi de compter des pixels physiques, par exemple 10 mm × 300/25.4 px/mm ≈ 118.110236 px.
Les résultats longs sont arrondis ; chaque ligne garde le contexte de police et de densité indiqué.
| Quantité | Unité initiale | Unité finale | Contexte | Valeur convertie |
|---|---|---|---|---|
| 24 | px | rem | Racine 16 px | 1.5 |
| 24 | px | rem | Racine 20 px | 1.2 |
| 12 | pt | px | 96 px/in | 16 |
| 1 | pc | pt | 96 px/in | 12 |
| 100 | % | em | Parent 16 px | 1 |
| 10 | mm | px | 300 px/in | 118.110236 |
100% = 1 em (font-size context) s’applique au contexte de taille de police modélisé ici. Dans une autre propriété CSS, em ou un pourcentage peut se référer à un autre contexte ; l’outil ne lit pas la feuille de style ni la boîte de mise en page.
La densité physique choisie ne modifie pas la relation normative des pixels CSS. Un pouce CSS sur écran ne garantit pas un pouce mesuré à la règle. Vérifiez le résultat dans le navigateur et à l’impression ; le convertisseur de longueur traite une longueur physique indépendante de la typographie.
Source de vérification : Vérification selon CSS Values 3 §6.1 : 1rem = taille de police racine (valeur courante par défaut du navigateur : 16 px) ; 24 / 16 = 1.5.
Source de vérification : Vérification selon CSS Values 3 §6.2 : 1pt = 1/72 in, 1in = 96px ; 12 × 96/72 = 16.
Source de vérification : Vérification selon CSS Values 3 §6.2 : 1in = 96px.
Source de vérification : Vérification : 1 rem = taille de police racine (16 px) ; 1.5 × 16.
16 pixels avec le réglage courant par défaut. Un rem vaut la taille de police de l’élément racine html ; la valeur courante du navigateur est 16 px, modifiable par le lecteur ou par html { font-size } dans la feuille de style. Avec ce réglage de départ, html { font-size: 62.5% } donne 1 rem = 10 px. La spécification W3C CSS Values and Units définit rem ; les 16 px relèvent du réglage du navigateur et ne sont pas imposés par la spécification.
Multipliez les pixels par 0.75 ; pour les points vers les pixels, par 4/3 (environ 1.333). Ces rapports suivent la règle CSS du W3C : 1 in = 96 px = 72 pt, donc 1 px = 72/96 pt. Un corps de 16 px vaut 12 pt, et un texte de traitement de texte à 11 pt environ 14.67 px.
rem se réfère à la taille de police de la racine ; em à celle de l’élément courant, ou du parent pour font-size. Les em imbriqués se multiplient : une liste à 1.2em dans une autre à 1.2em donne un texte à 1.44 fois la base initiale commune. En revanche, 1.2rem reste à 19.2 px avec une racine de 16 px, quelle que soit l’imbrication.
Utilisez rem si le texte doit suivre la préférence de taille de police du lecteur, en laissant la racine respecter cette préférence. Le zoom agrandit px et rem ; rem, em et pourcentages peuvent suivre les préférences via leur contexte racine ou parent. WCAG 2.1, critère 1.4.4 (niveau AA), demande un texte redimensionnable à 200% sans perte de contenu ou de fonction. Le zoom peut y répondre avec px ; rem peut en plus suivre la préférence si sa racine le permet.
Un pouce CSS ne coïncide pas nécessairement avec un pouce mesuré à l’écran. CSS définit 1 in comme exactement 96 px ; le pixel de référence W3C est celui d’un écran de 96 DPI vu à 28 in, soit environ 0.0213°. Le dispositif et la distance varient : une boîte de 96 px peut mesurer moins d’un pouce sur un téléphone. En impression à taille réelle, 1 in = 25.4 mm peut correspondre à une règle ; l’échelle d’impression et le calibrage comptent aussi.
Ce calculateur comprend 7 exemples résolus dont les réponses proviennent de sources indépendantes. Ils font partie de la suite de tests et peuvent aussi être exécutés ici.