Convertisseur Em/Px
Convertissez entre les unités CSS : px, em, rem, pt et %. Définissez votre taille de police de base et consultez toutes les conversions instantanément avec un tableau de référence rapide.
Base Font Size
px(browser default: 16px)
Convert a Value
px
16em
1rem
1pt
12%
100Text Preview
The quick brown fox
Previewing at 16px
Quick Reference TableBase: 16px
| px | em | rem | pt | % |
|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 | 50% |
| 10 | 0.625 | 0.625 | 7.5 | 62.5% |
| 12 | 0.75 | 0.75 | 9 | 75% |
| 14 | 0.875 | 0.875 | 10.5 | 87.5% |
| 16 | 1 | 1 | 12 | 100% |
| 18 | 1.125 | 1.125 | 13.5 | 112.5% |
| 20 | 1.25 | 1.25 | 15 | 125% |
| 24 | 1.5 | 1.5 | 18 | 150% |
| 28 | 1.75 | 1.75 | 21 | 175% |
| 32 | 2 | 2 | 24 | 200% |
| 36 | 2.25 | 2.25 | 27 | 225% |
| 40 | 2.5 | 2.5 | 30 | 250% |
| 48 | 3 | 3 | 36 | 300% |
| 64 | 4 | 4 | 48 | 400% |
| 72 | 4.5 | 4.5 | 54 | 450% |
| 96 | 6 | 6 | 72 | 600% |
All conversions happen entirely in your browser. No data is sent to any server.
Comment utiliser Convertisseur Em/Px
- 1Définissez votre taille de police de base (16 px par défaut).
- 2Entrez une valeur et sélectionnez l'unité d'entrée.
- 3Consultez les conversions vers toutes les autres unités CSS instantanément.
- 4Utilisez le tableau de référence pour les tailles de police courantes.
ZenovayAnalytics
Transformez votre trafic en clients.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Convertisseur de Couleurs
Convertissez les couleurs entre les formats HEX, RGB, HSL et CMYK. Aperçu en direct avec sélecteur de couleurs.Convertisseur d'Unités
Convertissez entre les unités de longueur, de poids, de température, de surface, de volume, de vitesse et bien d'autres.Convertisseur de Base Numérique
Convertissez les nombres entre les bases binaires, octales, décimales et hexadécimales.Convertisseur de timestamp Unix
Convertissez entre les timestamps Unix et les dates lisibles. Affichez ISO 8601, UTC, l'heure locale et l'heure relative.Questions fréquemment posées
Quelle est la différence entre em, rem et px ?▾
px (pixels) est une unité absolue basée sur les pixels de l'écran. em est relatif à la taille de police de l'élément parent. rem est relatif à la taille de police de l'élément racine (html). Avec une racine de 16 px, 1rem = 16 px. em se compose lorsqu'il est imbriqué (1.5em à l'intérieur de 1.5em = 2.25 × la taille de la racine) ; rem ne le fait pas.
Quand dois-je utiliser chaque unité CSS ?▾
Utilisez rem pour les tailles de police (s'adapte aux préférences de l'utilisateur). Utilisez em pour l'espacement interne des composants qui doit s'adapter au texte du composant. Utilisez px pour les bordures, les ombres et les éléments de taille fixe. Utilisez % pour les largeurs et les mises en page. Utilisez vw/vh pour le dimensionnement relatif à la fenêtre d'affichage.
Quelle est la taille de police de base par défaut ?▾
Les navigateurs utilisent par défaut 16 px pour la taille de police racine. Les utilisateurs peuvent modifier ceci dans les paramètres du navigateur pour l'accessibilité. C'est pourquoi 1rem = 16 px par défaut, et pourquoi l'utilisation d'unités rem respecte les préférences de l'utilisateur tandis que px ne le fait pas.
Comment les unités CSS affectent-elles la conception réactive ?▾
Les unités rem et em s'adaptent aux paramètres de taille de police, ce qui les rend adaptées aux appareils réactifs. La fonction CSS clamp() combine les valeurs min, préférée et max : font-size: clamp(1rem, 2.5vw, 2rem). Les requêtes média peuvent ajuster la taille de police racine, et toutes les valeurs basées sur rem s'adaptent proportionnellement.
Comment les unités CSS affectent-elles l'accessibilité ?▾
Les utilisateurs qui augmentent la taille de police par défaut de leur navigateur s'attendent à ce que le texte s'adapte en conséquence. Les tailles de police basées sur px ignorent cette préférence. Les tailles basées sur rem la respectent. Le critère de succès WCAG 2.1 1.4.4 exige que le texte soit redimensionnable jusqu'à 200 % sans perte de contenu. L'utilisation de rem pour les tailles de police aide à répondre à cette exigence.