Convertisseur px vers rem
Avec une racine de 16 px, 16 px font 1 rem et 0,5 rem font 8 px. Convertissez des longueurs CSS entre pixels et rem selon la police racine de votre feuille de style, avec une valeur prête à coller, la formule et les étapes. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Valeur
- 16
- De
- px
- Vers
- rem
- Base
- 16
- Résultat
- 1 rem
- Converti
- 1
- CSS
- 1rem
Un convertisseur px vers rem transforme une longueur CSS en pixels ou en rem vers l'autre unité, en utilisant la taille de police racine que vous livrez réellement. Saisissez la valeur numérique, choisissez from et to parmi px ou rem, et réglez base sur le font-size de la racine (html) en pixels — souvent seize sur les navigateurs de bureau, parfois quatorze ou dix-huit sur les design systems. L'outil renvoie la magnitude convertie, une chaîne css prête à coller telle qu'un rem ou seize px, la formule employée et une substitution pas à pas, afin que les tokens de design et les revues de code restent alignés. Migrations de thèmes, audits de typographie fluide, passation de Figma vers CSS et mise à l'échelle de police pour l'accessibilité ont tous besoin de ce même calcul déterministe rem égale px sur racine, sans ouvrir l'inspecteur du navigateur.
Ce que px et rem signifient pour la typographie CSS
En CSS, une longueur en pixels (px) est une unité de longueur absolue utilisée partout dans les mises en page, les bordures et les tokens typographiques hérités. Une longueur en rem est relative au font-size de l'élément racine — presque toujours l'élément html — donc un rem égale ce font-size racine, en pixels. Si la racine vaut seize pixels, alors seize px égalent un rem, trente-deux px égalent deux rem, et zéro virgule cinq rem égalent huit px.
Les design systems préfèrent le rem pour les échelles typographiques et l'espacement, car les utilisateurs qui agrandissent la police par défaut du navigateur, ou qui définissent une racine plus grande pour l'accessibilité, obtiennent une croissance proportionnelle sans traquer chaque pixel codé en dur. Convertir en sens inverse importe quand une bibliothèque émet encore des tokens en px ou quand un outil de conception exporte des tailles fixes en pixels et que vous avez besoin de déclarations rem qui correspondent à la racine de production.
La conversion elle-même est élémentaire : rem égale px divisé par base, et px égale rem multiplié par base, où base est le font-size racine en pixels. Ce qui piège les équipes n'est pas la formule mais des bases discordantes — supposer seize alors que la feuille de style fixe le font-size de html à soixante-deux virgule cinq pour cent (dix px) ou à cent douze virgule cinq pour cent (dix-huit px).
Cette calculatrice force la base au grand jour pour que le résultat corresponde toujours à l'échelle que vous prétendez utiliser. Les bases nulles ou quasi nulles sont rejetées, car la division par zéro n'est pas une longueur CSS valide ; les démos de classe et les tests unitaires devraient inclure ce chemin d'échec pour que les clients ne traitent jamais silencieusement le rem comme infini.
Conseils pratiques, limites et recherches associées
Gardez value et base dans la plage absolue publiée pour que les produits ne débordent pas vers un résultat non fini que le solveur devrait rejeter. Préférez envoyer des nombres plutôt que des chaînes préformatées quand vous maîtrisez le client ; les chaînes numériques ne sont acceptées que si elles correspondent à un motif numérique fini strict.
Documentez le font-size racine à côté de chaque table de tokens : si html utilise soixante-deux virgule cinq pour cent de la valeur par défaut de l'utilisateur, base vaut dix px pour un agent utilisateur à seize pixels par défaut, et un titre de vingt-quatre px devient deux virgule quatre rem — pas un virgule cinq rem. Quand from égale to, l'outil renvoie la valeur inchangée pour que les chaînes puissent normaliser les unités sans cas particulier, mais base reste requise et toujours validée comme non nulle.
Cette landing cible les personnes qui cherchent un convertisseur px vers rem, une calculatrice rem vers px ou un outil de typographie sur le font-size racine CSS ; ce n'est pas un convertisseur em relatif à un élément parent, pas un générateur de clamp fluide et pas une calculatrice d'unités de viewport. Préférez cette capacité quand vous connaissez déjà la taille racine en pixels et n'avez besoin que de la conversion de longueur ; s'il vous faut les styles calculés en direct d'une page réelle, utilisez plutôt l'outillage du navigateur.
Les vérifications aller-retour sont faciles : convertissez px vers rem puis inversement avec la même base et confirmez la valeur d'origine, au même arrondi à douze décimales près.
Cas d’usage
Tables de tokens de design à partir de pixels Figma
Exportez les tailles d'espacement et de typographie en px depuis les outils de conception, réglez base sur votre font-size racine de production et émettez des tokens rem qui correspondent à la feuille de style en direct.
Migration de thème de px vers rem
Convertissez en lot des échelles héritées de typographie et d'espacement en pixels vers rem, en documentant la base exacte utilisée pour chaque lot.
Tests unitaires pour les utilitaires de longueur CSS
Générez des paires px↔rem validées, plus des rejets délibérés de base nulle, pour les bibliothèques utilitaires front-end et les paquets de design system.
Questions fréquentes
Comment convertir px en rem ?
Divisez la longueur en pixels par le font-size racine en pixels : rem = px / base. Avec une racine de 16px, 24px devient 1,5rem.
Comment convertir rem en px ?
Multipliez la longueur en rem par le font-size racine en pixels : px = rem × base. Avec une racine de 16px, 1,25rem devient 20px.
Cet outil convertit-il les unités em ou % ?
Non. Il ne convertit qu'entre px et rem avec une base racine explicite en pixels. L'em est relatif à un élément parent, pas à la racine.
Le convertisseur px vers rem est-il gratuit ?
L'outil de navigateur est gratuit et s'exécute en local.
Quelle base utiliser si ma feuille de style fixe html à 62,5 % ?
Utilisez 10 px, car 62,5 % des 16 pixels par défaut du navigateur font dix pixels. Avec cette base, un titre de 24 px fait 2,4 rem, et non les 1,5 rem obtenus avec une base de 16.
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/conv/typography-px-rem \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"from":"px","to":"rem","base":16}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-rem", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"from": "px",
"to": "rem",
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-rem",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"from": "px",
"to": "rem",
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-rem", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"from":"px","to":"rem","base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-rem", 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
{
"value": 16,
"from": "px",
"to": "rem",
"base": 16
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_rem",
"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.
Limites
max_abs | 1000000000000 |
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
Quand base vaut zéro, l'échelle est indéfinie : l'API renvoie donc une erreur invalid_input claire plutôt que d'inventer des longueurs infinies. Le chemin est de l'arithmétique pure — sans réseau, sans graine aléatoire, sans dépendance à l'horloge murale — de sorte que l'exécuteur gratuit du navigateur et l'API prépayée renvoient le même JSON après un arrondi décimal fixe à chaque appel.
Comment appeler l'API et ce qu'elle renvoie
Envoyez un corps JSON avec quatre champs obligatoires : value (alias amount, n, length), from (alias from_unit, unit_from, source), to (alias to_unit, unit_to, target) et base (alias root, root_font_size, root_px, base_px). value et base doivent être des nombres finis dont les valeurs absolues restent dans la limite publiée de mille milliards, pour que les produits intermédiaires demeurent finis en double précision IEEE sur le Worker et dans le navigateur. from et to doivent se résoudre en px ou rem après normalisation des alias — pixel, pixels, rem, rems, root em et orthographes similaires sont acceptés ; les noms d'unité inconnus renvoient invalid_input. base doit être non nulle ; les valeurs absolues inférieures ou égales à un fois dix puissance moins quinze sont traitées comme zéro et rejetées. En cas de succès, la réponse renvoie value, from, to et base arrondis ; fixe result et converted à la même magnitude de sortie arrondie ; unit à l'unité cible ; css à une chaîne compacte comme un rem ou vingt-quatre px ; formula à rem égale px sur base, px égale rem fois base, ou le message d'identité quand from égale to ; message à un court résumé en anglais ; et steps à un tableau ordonné de lignes de substitution. Une validation échouée — champs manquants, nombres non finis, valeurs hors des limites absolues, unités inconnues, base nulle ou résultat non fini — renvoie invalid_input et n'est jamais facturée. La tarification est un forfait de $0.002 par requête réussie, avec un élément unitaire et un prix marginal à l'unité nul.
Conseils pratiques, limites et recherches associées
Paires d'exemples pour l'enseignement et les tests : seize px vers rem avec base seize donnent un rem ; un virgule cinq rem vers px avec base seize donnent vingt-quatre px ; vingt px vers rem avec base dix donnent deux rem ; et base zéro avec n'importe quelle valeur illustre le chemin dur invalid_input. Les tâches échouées qui renvoient invalid_input ne consomment pas de solde prépayé, ce qui garde les scripts exploratoires bon marché quand les développeurs fixent délibérément base à zéro.
Questions techniques
Que se passe-t-il quand base vaut zéro ?
La conversion est indéfinie. Cet outil renvoie invalid_input au lieu de diviser par zéro ou d'inventer des longueurs infinies.