Skip to Main Content

Unités et mesures

Nous utilisons des unités et des mesures normalisées afin de créer un rythme vertical pour les éléments superposés (polices, remplissage, marges et hauteur des lignes).


Normes en matière d’unités

Dans les feuilles de style, les unités de mesure standard doivent être :

  • EM (les EM mesurent les dimensions en fonction de la taille de caractères) ou pourcentage.
  • REM avec repli en px lorsqu’il n’est pas possible d’utiliser les REM (les REM sont une évolution des EM). REM représente la taille du caractère, établie en fonction de la taille de l’élément HTML de niveau supérieur, plutôt que d’un élément parent.

La taille de police par défaut pour les navigateurs est normalement 16 px, qui est réglée sur l’élément <html>. Du point de vue de la norme, des incréments de 0,25 em (ou l’équivalent de 4 px) sont ajoutés ou retirés du 1 em de base. Cela fournit une échelle linéaire avec laquelle autant les concepteurs que les développeurs peuvent travailler.

Default considered as a 96dpi viewport with :root {font-size:16px}
Point Pixel Em / rem Pourcentage Roboto Font
6pt 8px 0.5em 50% Sample
6.75pt 9px 0.5625em 56.25% Sample
7pt 9.333px 0.5833em 58.333% Sample
7.5pt 10px 0.625em 62.5% Sample
8pt 10.667px 0.6667em 66.667% Sample
8.25pt 11px 0.6875em 68.75% Sample
9pt 12px 0.75em 75% Sample
9.75pt 13px 0.8125em 81.25% Sample
10pt 13.333px 0.8333em 83.333% Sample
10.5pt 14px 0.875em 87.5% Sample
11pt 14.667px 0.9167em 91.667% Sample
11.25pt 15px 0.9375em 93.75% Sample
12pt 16px 1em 100% Sample
12.75pt 17px 1.0625em 106.25% Sample
13pt 17.333px 1.0833em 108.333% Sample
13.5pt 18px 1.125em 112.5% Sample
14pt 18.667px 1.1667em 116.667% Sample
14.25pt 19px 1.1875em 118.75% Sample
15pt 20px 1.25em 125% Sample
15.75pt 21px 1.3125em 131.25% Sample
16pt 21.333px 1.3333em 133.333% Sample
16.5pt 22px 1.375em 137.5% Sample
17pt 22.667px 1.4167em 141.667% Sample
17.25pt 23px 1.4375em 143.75% Sample
18pt 24px 1.5em 150% Sample
18.75pt 25px 1.5625em 156.25% Sample
19pt 25.333px 1.5833em 158.333% Sample
19.5pt 26px 1.625em 162.5% Sample
20pt 26.667px 1.6667em 166.667% Sample
20.25pt 27px 1.6875em 168.75% Sample
21pt 28px 1.75em 175% Sample
21.75pt 29px 1.8125em 181.25% Sample
22pt 29.333px 1.8333em 183.333% Sample
22.5pt 30px 1.875em 187.5% Sample
23pt 30.667px 1.9167em 191.667% Sample
23.25pt 31px 1.9375em 193.75% Sample
24pt 32px 2em 200% Sample
24.75pt 33px 2.0625em 206.25% Sample
25pt 33.333px 2.0833em 208.333% Sample
25.5pt 34px 2.125em 212.5% Sample
26pt 34.667px 2.1667em 216.667% Sample
26.25pt 35px 2.1875em 218.75% Sample
27pt 36px 2.25em 225% Sample
27.75pt 37px 2.3125em 231.25% Sample
28pt 37.333px 2.3333em 233.333% Sample
28.5pt 38px 2.375em 237.5% Sample
29pt 38.667px 2.4167em 241.667% Sample
29.25pt 39px 2.4375em 243.75% Sample
30pt 40px 2.5em 250% Sample
30.75pt 41px 2.5625em 256.25% Sample
31pt 41.333px 2.5833em 258.333% Sample
31.5pt 42px 2.625em 262.5% Sample
32pt 42.667px 2.6667em 266.667% Sample
32.25pt 43px 2.6875em 268.75% Sample
33pt 44px 2.75em 275% Sample
33.75pt 45px 2.8125em 281.25% Sample
34pt 45.333px 2.8333em 283.333% Sample
34.5pt 46px 2.875em 287.5% Sample
35pt 46.667px 2.9167em 291.667% Sample
35.25pt 47px 2.9375em 293.75% Sample
36pt 48px 3em 300% Sample

EM et pourcentage

Les EM et le pourcentage sont des unités relatives qui sont calculées en fonction de la valeur de leur élément parent. Il s’agit d’une unité de mesure très polyvalente, puisqu’elle aide à créer des présentations adaptables et dynamiques. La police par défaut étant réglée à 100 % (équivalant de 16 px), si l’élément <body> est réglé à 125 % ou 1,25 em, alors le texte à l’intérieur aura une taille équivalente de 20 px. Si un <div> contenu dans le <body> est réglé à 200 % ou à 2 em, l’équivalent du texte est de 40 px, ou le double de la taille de son parent.

Taille et position

Les unités relatives peuvent être appliquées à toute propriété CSS qui utilise des mesures; cela comprend (sans toutefois s’y limiter) la largeur, la hauteur, la hauteur de la ligne, le haut, le bas, la gauche, la droite, le remplissage, la marge, etc. En utilisant les unités relatives, un document pleinement adaptable et polyvalent peut être créé, entièrement commandé par font-size.

Qu’en est-il des REM?

Les REM sont une nouvelle unité de mesure mise en place avec CSS3. Ils sont très semblables aux EM. Cependant, ils ne suivent que l’élément racine (font-size du <html>) et non l’élément parent. Bien qu’elle soit plus facile à maintenir comparativement à la nature en cascade des EM, cette unité n’est pas prise en charge dans les navigateurs plus anciens. Elle doit être précédée de l’équivalent en px ou fixée dans le CSS spécifique au navigateur pour être entièrement prise en charge.