Convertisseur d'unités typographiques
Convertissez entre px, rem, em, pt et vw avec une taille de base personnalisable.
Valeur à convertir
Résultats
| Unité | Valeur |
|---|---|
| px (pixels) | 16 px |
| rem | 1 rem |
| em | 1 em |
| pt (points) | 12.003 pt |
| vw (viewport width) | 0.8333 vw |
Formules de conversion
- 1 rem = 16 px (taille de base)
- 1 em = 16 px (taille de base)
- 1 pt = 1,333 px
- 1 vw = 19.2 px (viewport : 1920px)
Tableau de référence
Valeurs courantes (base : 16px, viewport : 1920px)
| px | rem | em | pt | vw |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9.0023 | 0.625 |
| 14 | 0.875 | 0.875 | 10.5026 | 0.7292 |
| 16 | 1 | 1 | 12.003 | 0.8333 |
| 18 | 1.125 | 1.125 | 13.5034 | 0.9375 |
| 20 | 1.25 | 1.25 | 15.0038 | 1.0417 |
| 24 | 1.5 | 1.5 | 18.0045 | 1.25 |
| 32 | 2 | 2 | 24.006 | 1.6667 |
| 48 | 3 | 3 | 36.009 | 2.5 |
| 64 | 4 | 4 | 48.012 | 3.3333 |
Convertisseur d'unités typographiques : px, rem, em, pt, vw
Pourquoi convertir entre unités CSS ?
Les navigateurs modernes supportent plus de 15 unités de longueur CSS, mais les plus courantes en typographie web sont px, rem, em, pt et vw. Passer de l'une à l'autre manuellement nécessite de connaître la taille de base (par défaut 16 px) et la largeur du viewport. Cet outil effectue ces calculs en temps réel.
Utiliser des unités relatives (rem, em, vw) plutôt que des pixels fixes améliore l'accessibilité de votre site : les utilisateurs qui augmentent la taille de texte dans leur navigateur bénéficient d'un redimensionnement proportionnel. Les WCAG 2.1 recommandent les unités relatives pour les tailles de texte.
L'intégralité du calcul s'effectue dans votre navigateur. Aucune donnée n'est envoyée à un serveur. Le tableau de référence vous donne les correspondances des 9 tailles les plus utilisées (12, 14, 16, 18, 20, 24, 32, 48, 64 px) en un coup d'œil.
Cas d'utilisation courants
- Développeurs front-end
- Convertissez rapidement les valeurs px d'une maquette Figma ou Sketch en rem pour votre feuille de styles CSS. Réglez la taille de base à la valeur de votre projet (16 px par défaut) et obtenez les équivalences instantanément.
- Designers UI/UX
- Vérifiez les correspondances entre les valeurs pt utilisées dans vos fichiers de design et les px ou rem nécessaires dans le code. Facilitez la communication avec les développeurs grâce à un tableau de référence partagé.
- Apprenants CSS
- Comprenez les relations entre les unités CSS en expérimentant avec différentes valeurs. Modifiez la taille de base et la largeur du viewport pour voir comment les conversions changent, et assimilez les formules concrètement.
- Spécialistes en accessibilité web
- Vérifiez que les tailles de texte de votre projet respectent les recommandations WCAG en convertissant les valeurs px en rem. Simulez différentes tailles de base pour anticiper le comportement chez les utilisateurs qui ajustent leur navigateur.
Comment utiliser le convertisseur ?
Saisissez une valeur numérique et sélectionnez son unité d'origine (px, rem, em, pt ou vw). L'outil convertit instantanément vers les 4 autres unités. Vous pouvez ajuster la taille de base (pour rem/em) et la largeur du viewport (pour vw).
La section « Formules de conversion » affiche les équivalences exactes avec vos paramètres actuels : 1 rem = X px, 1 pt = 1,333 px, 1 vw = Y px. Ces formules se mettent à jour en temps réel lorsque vous modifiez la base ou le viewport.
Le tableau de référence présente les 9 tailles px les plus courantes (12 à 64 px) avec leurs équivalents rem, em, pt et vw. Utilisez-le comme aide-mémoire lors de l'intégration de vos maquettes.
Questions fréquentes
- Comment convertir des pixels Figma en rem pour mon code CSS ?
- Saisissez la valeur en pixels de votre maquette Figma dans le champ de valeur, sélectionnez « px » comme unité source et vérifiez que la taille de base est réglée à 16 px (valeur par défaut des navigateurs). Le résultat en rem s'affiche instantanément. Par exemple, 24 px = 1.5 rem avec une base de 16 px.
- Pourquoi les unités em et rem donnent-elles parfois des valeurs différentes ?
- rem (root em) est toujours relatif à la taille de police de l'élément racine (html), généralement 16 px. em est relatif à la taille de police de l'élément parent, qui peut être différente. Dans cet outil, les deux unités utilisent la même taille de base configurable, mais dans votre CSS, em peut varier selon l'imbrication des éléments.
- Comment les unités pt (points) sont-elles converties en pixels ?
- La conversion est fixe : 1 point typographique = 1,333 pixel sur un écran standard (96 DPI). Cette correspondance est définie par la résolution standard des navigateurs web. Les points sont principalement utilisés en typographie d'impression et dans les outils de design. En CSS web, rem et px sont plus courants.
- À quoi sert l'unité vw pour la typographie responsive ?
- L'unité vw (viewport width) permet des tailles de texte qui s'adaptent proportionnellement à la largeur de l'écran. Par exemple, 2vw sur un viewport de 1200 px = 24 px, mais ne sera que 14 px sur 700 px. C'est utile pour les titres fluides. Cet outil calcule la correspondance pour la largeur de viewport que vous définissez.
- Mes données personnelles sont-elles protégées ?
- Entièrement. Le calcul est réalisé à 100 % côté client, directement dans votre navigateur web. Aucune donnée personnelle n'est envoyée vers un serveur distant ni stockée. Toutes les informations restent sur votre appareil.