Convertir des em en pixels
Avec une police parente de 16 px, 1,5em donne 24 px ; à 20 px, la même valeur devient 30 px. Saisissez la mesure em et la taille de police parente pour voir la longueur réelle d'une marge ou d'un titre. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Valeur en em
- 1,5
- Taille de police du parent (px)
- 16
- Pixels
- 24
- Valeur CSS
- 24px
- Précision
- 6
Le convertisseur em en pixels indique la longueur réelle en pixels représentée par une valeur CSS relative em pour une taille de police parente précise. Saisissez la mesure em et la taille calculée de la police de l’élément parent en pixels : le calculateur les multiplie et renvoie une valeur stable ainsi qu’une mesure CSS directement lisible. Il facilite la vérification de la typographie, des espacements, des dimensions de composants et des interfaces adaptatives qui changent avec les réglages de texte hérités.
Comprendre ce que représente une mesure em
Une em est une longueur CSS relative dont la taille affichée dépend du contexte typographique. Pour de nombreuses propriétés, une em correspond à la taille de police calculée de l’élément auquel la propriété s’applique ; lorsque vous raisonnez à partir d’un réglage hérité ou parent, la taille de police parente fournie sert de référence pratique à la prévisualisation. Une valeur em ne désigne donc pas un nombre permanent de pixels.
Avec une référence de seize pixels, une em vaut seize pixels et une em et demie en vaut vingt-quatre. Avec une référence de vingt pixels, les mêmes valeurs relatives deviennent vingt et trente pixels. Ce convertisseur explicite cette dépendance au lieu de supposer discrètement la valeur par défaut du navigateur.
Elle rappelle également la formule afin de faciliter le contrôle. L’outil n’inspecte aucune page, ne résout pas la cascade, ne charge pas de feuille de style et ne devine pas quel ancêtre pilote une propriété.
Calculer les pixels et maîtriser l’arrondi
Les deux valeurs obligatoires doivent être des nombres finis, et la référence de police doit être strictement positive, car une taille calculée nulle ou négative ne constitue pas une base pertinente pour cette prévisualisation. Les mesures em nulles et négatives sont admises : zéro est utile dans les tables de jetons générées, tandis que des décalages et marges relatifs négatifs sont valides dans de nombreuses mises en page CSS. Par défaut, le résultat est arrondi à six décimales.
Réglez precision sur un entier de zéro à douze lorsqu’un jeu de test, une spécification ou un tableau exige un autre niveau de détail. N’ajoutez pas d’unité dans les champs numériques : envoyez 1.25 et non 1.25em, puis 18 et non 18px.
Prévisualiser les tailles réelles en CSS et en conception
Les développeurs frontend peuvent employer cette conversion lorsqu’ils contrôlent des composants qui évoluent avec la typographie locale. Un bouton doté d’un espacement horizontal de 1.25em peut sembler équilibré avec une police de seize pixels, mais occuper une largeur réelle différente dans une carte qui hérite de dix-huit pixels. Convertir les deux situations rend l’effet visible avant même d’ouvrir les outils du navigateur.
Les designers peuvent produire des annotations en pixels à partir de jetons relatifs pour la transmission, sans modifier le système source, et les spécialistes de l’accessibilité peuvent comparer les conséquences de textes hérités plus grands. Gardez un périmètre précis. Ce calculateur convertit uniquement em vers px ; il n’effectue pas l’inverse, ne résout pas rem depuis la racine, n’évalue pas les pourcentages et ne simule ni zoom ni densité d’écran.
Le résultat exprime des pixels CSS, pas des pixels matériels. Les deux voies partageant le même algorithme pur, un exemple contrôlé peut intégrer un pipeline sans changer d’arithmétique.
Cas d’usage
Prévisualiser les espacements
Voyez le remplissage ou la marge en pixels produit par un jeton em à la taille réelle de la police parente.
Préparer la transmission du design
Ajoutez des annotations concrètes en pixels tout en conservant les valeurs em relatives du système de conception.
Créer des jeux de test stables
Générez des tailles attendues déterministes pour les thèmes, tests de composants et documentations CSS.
Questions fréquentes
Une em vaut-elle toujours seize pixels ?
Non. Cela n’est vrai que si la référence typographique pertinente vaut seize pixels. Indiquez la taille parente réelle.
Puis-je convertir une valeur em négative ?
Oui. Les décalages et marges relatifs négatifs peuvent être valides en CSS ; les valeurs em négatives sont donc acceptées.
Le résultat représente-t-il les pixels physiques ?
Non. Il s’agit de pixels CSS. Le zoom du navigateur et la densité de l’appareil déterminent leur correspondance matérielle.
Quelle taille de police parente dois-je saisir ?
La taille de police calculée de l'élément parent, en pixels : par exemple 18 si une carte hérite de cette taille. L'outil ne lit pas votre page et ne devine pas quel élément la fixe : c'est vous qui fournissez cette valeur.
Convertit-il aussi les rem, les pourcentages ou les pixels en em ?
Non. Il convertit uniquement des em en pixels. Il ne calcule ni les rem par rapport à l'élément racine, ni les pourcentages, ni les unités de fenêtre, et ne simule ni le zoom du navigateur ni la densité de l'écran.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/str/em-to-px \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"em_value":1.5,"parent_font_size_px":16}'const res = await fetch("https://api.kit.forhosting.com/str/em-to-px", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"em_value": 1.5,
"parent_font_size_px": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/em-to-px",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"em_value": 1.5,
"parent_font_size_px": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/em-to-px", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"em_value":1.5,"parent_font_size_px":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"em_value":1.5,"parent_font_size_px":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/em-to-px", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"em_value": 1.5,
"parent_font_size_px": 16
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.em_to_px",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Le calcul est déterministe, sans réseau, stockage, hasard ni date, et chaque requête API automatisée coûte $0.002.
Comprendre ce que représente une mesure em
La réponse reprend les entrées, livre le résultat dans pixels et ajoute un css_value tel que 24px. Vous fournissez la taille parente déjà calculée ; le résultat est ainsi déterministe et adapté aux contrôles de conception, à la documentation, aux tests et aux traitements API.
Calculer les pixels et maîtriser l’arrondi
L’opération est pixels égal à em_value multiplié par parent_font_size_px. L’arrondi concerne pixels et css_value, mais les entrées restent visibles pour assurer la traçabilité. L’implémentation transforme aussi le zéro négatif en zéro ordinaire afin d’éviter les surprises dans les comparaisons JSON. NaN, Infinity, les champs absents, les types incompatibles, les grandeurs excessives ou les résultats hors limite produisent invalid_input plutôt qu’un chiffre trompeur. Ce contrat strict maintient la cohérence des tableurs, SDK, formulaires web et tests d’intégration continue.
Prévisualiser les tailles réelles en CSS et en conception
La sortie convient aussi aux données de test : un générateur de thèmes peut appeler l’API, conserver la valeur et vérifier les dimensions attendues. Le calcul interactif s’exécute dans le navigateur et une requête automatisée coûte $0.002.
Questions techniques
Quelle formule convertit les em en pixels ?
Multipliez la valeur em par la taille de police parente en pixels CSS : pixels = em_value × parent_font_size_px.
Quel est le prix d’une requête API ?
Chaque requête automatisée coûte $0.002. Le calcul interactif dans le navigateur est gratuit sur cette page.