Convertisseur d'Unités CSS — Gratuit en ligne

Convertissez entre les unités CSS - px, rem, em, pt et pourcentage - avec une taille de base configurable.

taille racine en px
—

Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.

Ce que fait cet outil

Le convertisseur d'unités CSS convertit une longueur entre px, rem, em, pt et %. Saisissez une valeur, choisissez son unité et définissez la taille de police de base (16px par défaut, celle qu'utilisent les navigateurs sauf si l'utilisateur la modifie) : la page affiche la même longueur dans les cinq unités.

Les conversions suivent la spécification CSS : 1rem équivaut à la taille de police racine, donc avec une base de 16px, 1.5rem vaut 24px. Un point vaut 1/72 de pouce et un pixel CSS 1/96, donc 12pt vaut 16px. Ici, em et % sont calculés par rapport à la même base, ce qui correspond à une taille de police définie sur un élément dont le parent utilise la taille racine. Rien ne quitte votre navigateur.

Quand l'utiliser

  • Convertir en rem les valeurs en pixels d'une maquette pour que le texte s'adapte aux réglages de police de l'utilisateur.
  • Convertir une feuille de style d'impression ou une maquette PDF spécifiée en points.
  • Vérifier à quoi correspond une taille de police en % quand vous héritez du CSS de quelqu'un d'autre.
  • Construire une échelle typographique où chaque palier doit avoir une valeur rem nette.

Exemple concret

Entrée

24px, base 16px

Sortie

px   24.000
rem  1.5000
em   1.5000
pt   18.000
%    150.00%

Questions sur cet outil

Faut-il utiliser rem ou px pour les tailles de police ?

Utilisez rem pour les tailles de police et la plupart des espacements. Quand quelqu'un augmente la taille de police par défaut de son navigateur pour mieux lire, les valeurs en rem grandissent avec elle, alors que les valeurs en px restent fixes.

Quelle est la différence entre rem et em ?

rem est toujours relatif à la taille de police de la racine (html). em est relatif à la taille de police de l'élément courant, si bien que les éléments imbriqués se multiplient : 1.2em à l'intérieur de 1.2em donne 1,44 fois la base. Le convertisseur calcule les deux par rapport à la base que vous saisissez.

Pourquoi 1pt n'est-il pas égal à 1px ?

CSS fixe le pouce à 96 pixels et un point vaut 1/72 de pouce, donc 1pt vaut 1,333px. Un texte en 12 points dans un traitement de texte a donc la même taille que du 16px sur le web.

Quelle taille de base saisir ?

Utilisez 16, sauf si votre feuille de style définit une autre taille racine, comme html { font-size: 62.5%; }, qui fixe la base à 10px. Saisissez la valeur calculée pour l'élément html.

Cet outil est-il gratuit ?

Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.

Comment obtenir mon résultat ?

Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.