Le tableau ci-dessous montre la correspondance entre des dimensions exprimées avec des unités différentes.

  • CM : valeur absolue en centimètres
  • PX : valeur absolue en pixels
  • REM : valeur relative à l'élément HTML
  • EM : valeur relative à la taille de la fonte de l'élément parent
  • % : valeur relative à la taille de la fonte de l'élément parent

Vous pouvez modifier les valeurs des éléments parents pris comme référence.
On peut remarquer que :

  • les valeurs absolues sont bien absolues, mais interprétées selon la résolution de l'écran
  • la modification de font-size dans html ou body agit bien sur toute la page
  • les valeurs en em et % sont identiques
  • une modification de HTML a une influence sur EM, mais pas l'inverse

Valeur font-size pour HTML :

Valeur font-size pour BODY :

Appliquer

CM PX REM EM %
0.11 4 0.25 0.25 25.0%
0.16 6 0.375 0.375 37.5%
0.21 8 0.5 0.5 50%
0.26 10 0.625 0.625 62.5%
0.32 12 0.75 0.75 75%
0.37 14 0.875 0.875 87.5%
0.42 16 1 1 100%
0.48 18 1.125 1.125 112.5%
0.53 20 1.25 1.25 125%
0.63 24 1.5 1.5 150%
0.74 28 1.75 1.75 175%
0.85 32 2 2 200%
0.95 36 2.25 2.25 225%
1.06 40 2.5 2.5 250%
1.27 48 3 3 300%
1.48 56 3.5 3.5 350%
1.9 72 4.5 4.5 450%
2.01 76 4.75 4.75 475%

Pour information, la hauteur d'un caractère (em square) spécifie la hauteur de la zone pouvant contenir tous les types de caractères. Plus d'infos sur cette page

Une petite démonstration :

1cm
mMqbÅÇ
38px

Print Friendly and PDF