Convertisseur d'Unités CSS
Convertissez entre px, rem, em et pt. Personnalisez la taille de police de base.
Points (pt):12pt
Taille de police de l'élément <html> de votre site (valeur par défaut du navigateur : 16px)
rem est relatif à la taille de police de l'élément racine (<html>). La valeur par défaut du navigateur est 16px, donc 1rem = 16px sauf modification.
1pt = 1,333px à 96 DPI (résolution écran). Les points sont principalement utilisés dans les CSS d'impression et les outils de design.
Tailles CSS courantes
| px | rem | pt | Utilisation typique |
|---|---|---|---|
| 8 | 0.5 | 6 | Icône / border-radius |
| 10 | 0.625 | 7.5 | Code, petit texte |
| 12 | 0.75 | 9 | Petit texte / aide |
| 14 | 0.875 | 10.5 | Corps de texte (compact) |
| 16 | 1 | 12 | Corps de texte par défaut |
| 18 | 1.125 | 13.5 | Corps de texte (confortable) |
| 20 | 1.25 | 15 | Grand texte / sous-titre |
| 24 | 1.5 | 18 | H3 / grand titre |
| 32 | 2 | 24 | H2 / titre display |
| 48 | 3 | 36 | H1 / titre principal |
Questions fréquentes
px (pixels) est une unité absolue qui s'affiche toujours à la même taille quelle que soit la configuration. rem (root em) est relatif à la taille de police de l'élément <html> — avec 16px par défaut : 1rem = 16px, 2rem = 32px. em est relatif à la taille de police de l'élément parent. rem est préféré pour les mises en page scalables : si un utilisateur règle son navigateur à 20px pour l'accessibilité, tous les éléments rem s'adaptent proportionnellement.
Divisez la valeur en pixels par la taille de police racine. Avec 16px par défaut : rem = px ÷ 16. Par exemple : 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0,875rem. Beaucoup de développeurs définissent html { font-size: 62,5% ; } pour que 1rem = 10px, simplifiant ainsi les calculs.
Avec la taille de police de base par défaut de 16px : 16px = 1rem. Valeurs clés : 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem. Si votre site utilise une base différente (ex. 10px), recalculez en conséquence — c'est pourquoi ce convertisseur propose un paramètre de taille de police de base.
rem respecte la préférence de taille de police du navigateur de l'utilisateur, ce qui est important pour l'accessibilité. Les utilisateurs ayant des difficultés visuelles peuvent augmenter la taille de police de base, et tous les éléments rem s'adaptent automatiquement. Les valeurs px ignorent ce paramètre. rem facilite aussi le design responsive : ajustez la taille de police racine avec une media query et tous les éléments rem se redimensionnent proportionnellement.