MOTEUR LOCAL // DANS LE NAVIGATEUR

Convertisseur PX en REM et Unités de Police CSS

Convertissez de manière bidirectionnelle les pixels CSS (px), rem, em, points typographiques (pt), picas (pc) et pourcentages avec les classes Tailwind CSS. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

APPAREIL // PX-TO-REM VÉRIFIÉ OK // 0.0ms

Tableau de Référence Rapide

Racine Navigateur par Défaut 1rem = 16px = 12pt = 1pc

Petite Légende (text-xs) 12px = 0,75rem = 9pt

Corps d'Interface (text-sm) 14px = 0,875rem = 10,5pt

Sous-titre (text-xl) 20px = 1,25rem = 15pt

Titre Principal H1 (text-4xl) 36px = 2,25rem = 27pt

Formule Mathématique

\text{REM} = \frac{\text{PX}}{\text{Base}_{(\text{px})}} \quad , \quad \text{PT} = \text{PX} \times \frac{72}{96} = \text{PX} \times 0.75

Pour convertir des pixels CSS (px) en unités rem (Root EM), divisez la valeur en pixels par la taille de police racine de l'élément HTML (16px par défaut). Pour convertir des pixels CSS en points typographiques (pt) selon la norme de référence optique W3C à 96 DPI, multipliez les pixels par 0,75 (72 pt par pouce / 96 px par pouce).

Présentation Générale et Contexte Technique

Assurer la passerelle entre les spécifications en pixels fixes issues des logiciels de conception d'interfaces (Figma, Sketch, Adobe XD) ou les mesures d'impression physique (points et picas d'Adobe InDesign et Illustrator) et une typographie CSS accessible et évolutive constitue une nécessité quotidienne pour les développeurs front-end et les designers de systèmes. Bien que les maquettes graphiques expriment presque universellement les tailles de police, les hauteurs de ligne et les espacements en pixels CSS absolus (`px`), les normes modernes d'accessibilité du Web — en particulier le **critère de succès WCAG 2.1 1.4.4 (Redimensionnement du texte)** — exigent que les interfaces s'adaptent de manière fluide jusqu'à 200 % lorsqu'un utilisateur modifie la taille de police par défaut de son navigateur ou de son système d'exploitation.

Coder en dur une déclaration telle que `font-size: 16px` écrase la préférence racine (`html`) choisie par l'utilisateur, empêchant les personnes malvoyantes d'adapter confortablement leur échelle de lecture. En convertissant les valeurs de pixels en unités **Root EM (`rem`)**, chaque élément typographique évolue proportionnellement à la racine du document (`1rem = 16px` par défaut sur Chrome, Safari, Firefox et Edge). Parallèlement, lors de la déclinaison de chartes graphiques imprimées vers le Web, il convient d'appliquer le rapport optique de la spécification W3C CSS Values and Units Level 4 : en CSS, 1 pouce physique équivaut exactement à `96px`, tandis qu'un point typographique (`pt`) vaut `1/72` de pouce (`1pt = 1,3333px`, soit `12pt = 16px = 1rem`), et 1 pica (`pc`) vaut `12pt` (`16px`). Le convertisseur PX en REM de Kitiverse synchronise simultanément les six unités typographiques (`px`, `rem`, `em`, `pt`, `pc` et `%`), prend en charge les tailles racines personnalisées (comme l'astuce `10px` / `62.5%`) et associe chaque palier à sa classe utilitaire officielle Tailwind CSS `text-*` — 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Comment convertir des PX en REM, EM et PT pour CSS et Tailwind

Calculez en temps réel des unités de police responsives exactes à partir de vos maquettes Figma ou de vos guides typographiques d'impression.

Vérifiez ou ajustez la taille de police de base HTML racine en haut à gauche (16px est la valeur par défaut universelle des navigateurs ; indiquez 10px si votre feuille de style utilise la règle html { font-size: 62.5% }).

Saisissez votre valeur numérique dans n'importe lequel des six champs d'unités : Pixels (px), Root EM (rem), EM relatif (em), Points d'impression (pt), Picas (pc) ou Pourcentage (%). Les cinq autres champs se mettent à jour instantanément.

Cliquez sur n'importe quelle ligne du tableau d'échelle typographique et de référence Tailwind CSS pour charger les paliers d'interface standards (de 10px à 72px) et repérer la classe utilitaire Tailwind correspondante.

Cliquez sur le bouton « Copier le CSS » pour copier dans votre presse-papiers la déclaration CSS prête à l'emploi accompagnée d'un commentaire indiquant l'équivalent en pixels.

Questions Fréquentes

Pourquoi faut-il privilégier l'unité REM plutôt que PX pour les tailles de police en CSS ?

Lorsqu'un utilisateur malvoyant modifie la taille de police par défaut de son navigateur (par exemple en passant de `16px` à `20px` ou `24px` dans les préférences d'accessibilité), tout texte dimensionné en pixels absolus (`px`) ignore ce réglage et reste figé. En revanche, un texte défini en `rem` s'adapte proportionnellement à l'élément racine `<html>` (`1rem` devient alors automatiquement `20px` ou `24px`), garantissant une conformité totale avec les exigences d'accessibilité WCAG 2.1 niveau AA sans casser les proportions de la mise en page.

Quelle est la différence technique entre les unités REM et EM en typographie CSS ?

L'unité `rem` (Root EM) est toujours calculée par rapport à la taille de police de l'élément racine `<html>`, quelle que soit la profondeur d'imbrication du composant dans l'arbre DOM. À l'inverse, l'unité `em` est évaluée par rapport à la propriété `font-size` du parent direct de l'élément (ou de l'élément lui-même lorsqu'elle est appliquée à `padding`, `margin` ou `border-radius`). Utiliser `rem` pour la typographie évite les effets de multiplication en cascade dans les listes ou composants imbriqués, tandis que `em` reste idéal pour des marges internes de boutons qui doivent grandir avec leur propre texte.

Comment convertir les points (pt) d'Adobe Illustrator ou InDesign en pixels CSS (px) ?

Dans l'édition assistée par ordinateur PostScript et dans la spécification officielle W3C CSS, 1 point typographique (`1pt`) est défini comme exactement `1/72` de pouce international, tandis qu'un pixel de référence CSS (`1px`) correspond à `1/96` de pouce. Par conséquent, `1pt = 96 / 72 = 1,3333px` et `1px = 0,75pt`. Une police de corps de texte imprimé standard de `12pt` correspond donc exactement à `16px` (`1rem`) sur un écran Web.

En quoi consiste l'astuce CSS de la taille de police racine à 62,5 % (10px) ?

Diviser mentalement des valeurs de pixels par `16` produit souvent des nombres décimaux à trois chiffres comme `0.875rem` (`14px`) ou `1.125rem` (`18px`). Pour simplifier les calculs en base 10, certains développeurs déclarent `html { font-size: 62.5%; }` dans leur feuille de style initiale. Comme 62,5 % de la taille par défaut de `16px` vaut exactement `10px`, `1rem` devient égal à `10px`, `1.4rem` équivaut à `14px` et `2.4rem` à `24px`, tout en continuant de respecter les préférences de zoom et de taille de police de l'utilisateur. Il vous suffit de régler la base racine sur `10` dans cet outil pour générer automatiquement ces valeurs.

Comment cet outil associe-t-il les valeurs PX et REM aux classes utilitaires Tailwind CSS ?

Tailwind CSS repose sur une échelle de base de `16px` (`1rem`) où `text-xs` = `0.75rem` (`12px`), `text-sm` = `0.875rem` (`14px`), `text-base` = `1rem` (`16px`), `text-lg` = `1.125rem` (`18px`), `text-xl` = `1.25rem` (`20px`), `text-2xl` = `1.5rem` (`24px`), `text-3xl` = `1.875rem` (`30px`) et `text-4xl` = `2.25rem` (`36px`). Pour toute valeur intermédiaire sur mesure comme `22px`, le convertisseur génère automatiquement la syntaxe arbitraire du compilateur JIT de Tailwind (`text-[1.375rem]`).

Ce calculateur enregistre-t-il ou transmet-il mes jetons de design (design tokens) ?

Non. Kitiverse fonctionne de manière entièrement autonome : 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil. Toutes les conversions d'unités typographiques s'exécutent instantanément sur votre machine.

Instruments Associés dans Cet Établi

Tous les outils de Convertisseurs d'Unités →

Convertisseurs d'Unités →

Convertisseur de Température (°C, °F, K, °R)

Convertisseur d'échelles de température thermodynamique entre degrés Celsius (°C), Fahrenheit (°F), Kelvin SI (K) et Rankine (°R). 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Convertisseurs d'Unités →

Convertisseur de Poids et Masse (kg, lb, oz, g)

Convertisseur métrologique de masse entre les unités métriques SI (kg, g, mg, t), les unités impériales avoirdupois (lb, oz, stone) et l'once troy pour métaux précieux. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Convertisseurs d'Unités →

Convertisseur de Longueur et Distance

Convertisseur universel de longueur et de distance multi-unités entre système métrique SI et système impérial. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Échelles Comparatives →

Convertisseur d'Échelle Architecturale et de Maquette

Convertissez les dimensions réelles en plans d'architecture et maquettes réduites (1:12, 1:24, 1:48, 1:50, 1:87 HO, 1:100) entre unités métriques (mm, cm, m) et impériales (in, ft). 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Échelles Comparatives →

Comparateur d'Échelle Cosmique et Dimensionnelle

Comparez les distances subatomiques, terrestres, planétaires, stellaires et cosmologiques sur 42 ordres de grandeur avec ratios logarithmiques, temps de parcours de la lumière et modèles réduits physiques. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Échelles Comparatives →

Estimateur de Complexité des Tâches & PERT

Calculez les estimations pondérées PERT à trois points (Optimiste, Probable, Pessimiste), l'écart-type (σ), l'intervalle de confiance à 95 % et les Story Points Fibonacci. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Note d'Exécution et de Vérification Côté Client :

Cet utilitaire fonctionne à 100 % localement dans votre navigateur avec stockage sur votre appareil et aucun envoi vers un serveur. Tous les résultats sont fournis « tels quels » — veuillez valider les données, codes et fichiers critiques avant toute mise en production.