Convertir une taille CSS
Saisissez la valeur, choisissez px, em, pt ou %, puis indiquez la référence en pixels. Lancez la conversion pour afficher les quatre équivalents, chacun avec un bouton de copie et son suffixe CSS.
La référence représente 1em et 100 %. Si le parent utilise font-size: 20px, saisissez 20. Elle modifie em et %, mais pas le rapport entre px et pt.
Principe de calcul
Chaque entrée passe d’abord en pixels : em × référence, % × référence ÷ 100, pt × 96 ÷ 72. Les formules inverses donnent les autres unités.
La précision est conservée pendant le calcul. L’affichage retire les résidus décimaux et garde visibles les très petites valeurs positives.
Deux exemples vérifiés
24px avec une référence de 16px donnent 24px, 1,5em, 18pt et 150 %. Reconvertir 1,5em avec la même référence redonne 24px.
125 % avec une référence de 20px donnent 25px, 1,25em et 18,75pt. Avec 16px, les mêmes 125 % deviennent 20px et 15pt.
Quand l’utiliser
Utilisez cet outil pour traduire un design en pixels vers du CSS relatif, vérifier un token typographique, convertir une consigne d’impression en points ou résoudre une déclaration héritée.
16px n’est qu’un point de départ courant. Conservez la référence avec le résultat afin que le calcul puisse être reproduit.
Limites et erreurs courantes
L’outil n’analyse pas calc(), clamp(), les variables, une feuille entière, rem ni les unités de viewport. Il n’inspecte pas le DOM.
Le pourcentage signifie uniquement font-size. Ne l’utilisez pas pour width ou height. Les tailles négatives et une référence nulle sont refusées.
Les points suivent le rapport des unités CSS, pas les pixels physiques d’une imprimante. La hauteur visible dépend aussi de la police et de line-height.
Utiliser la valeur copiée
Testez la valeur dans le composant réel et avec une taille de texte agrandie. Une unité relative ne garantit pas à elle seule l’accessibilité, le contraste ou les retours à la ligne.
Le calcul reste dans le navigateur et les entrées ne sont pas envoyées comme paramètres analytiques. Si le presse-papiers est bloqué, sélectionnez la valeur affichée.
Toutes les conversions d’unités de police CSS
| Sens de conversion | Formule avec une référence de 16px | Exemple |
|---|---|---|
| Pixels vers Em (px vers em) | em = px × 0.0625 | 1px = 0.0625em |
| Pixels vers Points (px vers pt) | pt = px × 0.75 | 1px = 0.75pt |
| Pixels vers Pourcentage (px vers %) | % = px × 6.25 | 1px = 6.25% |
| Em vers Pixels (em vers px) | px = em × 16 | 1em = 16px |
| Em vers Points (em vers pt) | pt = em × 12 | 1em = 12pt |
| Em vers Pourcentage (em vers %) | % = em × 100 | 1em = 100% |
| Points vers Pixels (pt vers px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Points vers Em (pt vers em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Points vers Pourcentage (pt vers %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Pourcentage vers Pixels (% vers px) | px = % × 0.16 | 1% = 0.16px |
| Pourcentage vers Em (% vers em) | em = % × 0.01 | 1% = 0.01em |
| Pourcentage vers Points (% vers pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
Questions fréquentes
16px valent-ils toujours 1em ?
Seulement avec une référence de 16px. Avec 20px, 1em vaut 20px.
Pourquoi la référence ne change-t-elle pas pt ?
Em et % sont relatifs ; CSS fixe le rapport 96px = 72pt.
Puis-je utiliser le % pour une largeur ?
Non. Ici, % est un pourcentage de font-size.
Pourquoi la copie est-elle arrondie ?
L’affichage élimine le bruit décimal ; le calcul emploie la valeur non arrondie.
Rem est-il pris en charge ?
Non. La portée est limitée à px, em, pt et au pourcentage de font-size.