Convertisseur PX vers REM

Divisez la valeur en pixels par la taille de police racine : rem = px ÷ racine. Avec la racine par défaut du navigateur à 16px, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1,5rem et 40px ÷ 16 = 2,5rem. Saisissez n'importe quelle valeur px dans le convertisseur ci-dessus et le champ rem se met à jour instantanément — sans aucun calcul mental. Avec l'astuce des 62,5 % (racine à 10px), divisez simplement par 10 : 24px = 2,4rem.

Multipliez la valeur rem par la taille de police racine : px = rem × racine. Avec la racine par défaut à 16px, 1rem × 16 = 16px, 1,5rem × 16 = 24px et 0,875rem × 16 = 14px. Modifiez le champ rem dans le convertisseur et le champ px suit immédiatement. Le convertisseur est entièrement bidirectionnel — saisissez la valeur que vous connaissez et les autres se mettent à jour automatiquement.

1rem équivaut à la taille de police de l'élément racine (html). Dans tous les navigateurs principaux — Chrome, Safari, Firefox, Edge — cette valeur est par défaut de 16px, donc 1rem = 16px sauf modification de la racine. Si vous définissez la racine à 10px (astuce des 62,5 %), 1rem devient 10px. Les utilisateurs peuvent également modifier la taille de texte par défaut dans les paramètres de leur navigateur, ce qui change la valeur de 1rem pour eux — c'est pourquoi rem est préférable à px pour des tailles de police accessibles.

0,875rem équivaut à 14px avec une racine standard de 16px (0,875 × 16 = 14). C'est l'une des valeurs rem les plus couramment utilisées dans les frameworks CSS — la classe text-sm de Tailwind CSS correspond à 0,875rem (14px). Avec une racine à 10px (astuce des 62,5 %), 0,875rem équivaudrait à 8,75px.

px est une unité absolue et fixe — 16px correspond toujours à 16 pixels, quels que soient les paramètres de l'utilisateur ou la taille de l'écran. rem est relative : c'est un multiple de la taille de police de l'élément racine (html), donc 1rem = 16px par défaut, mais cette valeur augmente si l'utilisateur accroît la taille de texte de base dans les paramètres d'accessibilité de son navigateur. Cela rend les mises en page en rem plus accessibles — le texte grossit proportionnellement lorsque l'utilisateur demande un texte plus grand, tandis que le texte en px reste figé et peut devenir trop petit à lire.

px est fixe. rem est relative à la taille de police racine (html) — un repère unique et cohérent pour toute la page. em est relative à la taille de police de son propre élément parent et se cumule lors des imbrications : un parent à 20px avec un enfant à 1,5em donne 30px pour l'enfant. En définissant ce même enfant à 1,5rem, on obtient 24px (1,5 × la racine de 16px), indépendamment du parent. Avec une racine de 16px et sans imbrication, 16px, 1rem et 1em sont tous identiques — la différence n'apparaît que lorsque les tailles de police parentes changent.

rem est préférable pour les tailles de police du point de vue de l'accessibilité. Lorsqu'une personne augmente la taille de texte par défaut de son navigateur — besoin fréquent chez les utilisateurs malvoyants —, toutes les tailles de police en rem s'adaptent, tandis que les valeurs en px restent figées. La directive WCAG 2.1, règle 1.4.4 (Redimensionnement du texte), exige que le texte puisse être agrandi jusqu'à 200 % sans perte de fonctionnalité — utiliser rem rend cette exigence facile à satisfaire. Réservez px aux éléments qui ne doivent pas être redimensionnés, comme les bordures de 1px ou les icônes de taille fixe.

L'astuce des 62,5 % consiste à définir la taille de police racine (html) à 62,5 % — ce qui, avec la valeur par défaut du navigateur à 16px, donne 10px. Les calculs rem deviennent ainsi trivials : 1,6rem = 16px, 2,4rem = 24px, 3,2rem = 32px. Chaque valeur rem correspond clairement à un multiple de 10. Activez le préréglage 10px ici et le convertisseur ainsi que le tableau de référence se recalculent instantanément pour vous montrer cette correspondance nette. L'inconvénient est que votre taille racine remplace désormais la valeur par défaut du navigateur de l'utilisateur, ce qui réduit légèrement l'accessibilité.

Avec la racine standard de 16px : 10px = 0,625rem, 12px = 0,75rem, 13px = 0,8125rem, 14px = 0,875rem, 16px = 1rem, 18px = 1,125rem, 20px = 1,25rem, 24px = 1,5rem, 28px = 1,75rem, 32px = 2rem, 40px = 2,5rem, 48px = 3rem. Le tableau de référence dans l'outil liste toutes les valeurs courantes et vous permet de copier chacune d'un seul clic — plus rapide que de les calculer manuellement à chaque fois.

Tailwind CSS utilise les unités rem pour la plupart des valeurs de taille par défaut, avec une racine de 16px. L'échelle d'espacement de Tailwind : 1 unité = 0,25rem = 4px. Ainsi, space-4 = 1rem = 16px, space-6 = 1,5rem = 24px, space-8 = 2rem = 32px. Pour la typographie : text-sm = 0,875rem (14px), text-base = 1rem (16px), text-lg = 1,125rem (18px), text-xl = 1,25rem (20px), text-2xl = 1,5rem (24px). Ce convertisseur vous permet de vérifier rapidement toute valeur px personnalisée par rapport au système rem de Tailwind.

Oui, entièrement. Le convertisseur s'exécute intégralement en JavaScript dans votre navigateur — aucune communication avec un serveur, aucun appel API, aucune donnée transmise. Il fonctionne hors connexion une fois la page chargée. Les valeurs saisies ne quittent jamais votre appareil. Vous pouvez le mettre en favori et l'utiliser dans un avion, dans un tunnel ou partout où vous codez sans accès à Internet. Rien n'est stocké sur un quelconque serveur.

Saisissez n'importe quelle valeur dans le champ Taille de police racine — ou utilisez les boutons de préréglage pour 16px (valeur par défaut du navigateur) ou 10px (astuce des 62,5 %). Toutes les conversions rem, em et pt dans le tableau et dans le champ actif se recalculent instantanément pour correspondre à votre nouvelle racine. Si votre CSS définit html { font-size: 18px; }, entrez 18 comme racine et toutes les conversions seront exactes pour l'échelle de votre projet.