CSS propose plusieurs unités pour formater la taille du texte sur une page. Elles peuvent toutes être utilisées sans restriction.
| Unité CSS | Équivalent en pixels (px) | Zone d’utilisation optimale |
|---|---|---|
| px | 1 px | Fréquemment utilisé dans la conception Web. |
| pt | 1 pt ≈ 1.33 px | Utilisé dans les conceptions d’impression. |
| pc | 1 pc ≈ 16 px | Utilisé dans les conceptions d’impression (impressions à grande échelle). |
| em | 1 em = Taille de police supérieure 2 em = Taille de police supérieure x 2 | Utilisé pour les conceptions flexibles, dépendant d’un élément parent. |
| rem | 1 rem = Taille de police de la page 2 rem = Taille de police de la page x 2 | Utilisé pour les conceptions proportionnelles, dépend de la taille de la police de la page (HTML). |
| in | 1 in = 96 px | Utilisé dans l’impression physique. |
| cm | 1 cm ≈ 37.8 px | Utilisé dans l’impression physique. |
| mm | 1 mm ≈ 3.78 px | Utilisé dans l’impression physique. |
Physical units such as px, pt, pc, in, cm, and mm are fixed values. However, em and rem are variables and change according to the font size of the element to which they are attached.
Because browsers’ default font-size is 16px, 1em and 1rem are generally considered 16px. However, if font-size: 20px; is set on the <html> element, 1rem = 20px.
Measurements may vary physically on the print medium because screen resolution and DPI (dots per inch) may differ.
It corresponds to one physical pixel on the screen and is a fixed value.
p {
font-size: 18px;
}Example:
Lorem ipsum dolor sit amet
Dans les conceptions destinées à l’impression, il est souvent utilisé pour les sorties d’imprimante.
p {
font-size: 12pt;
}Exemple:
Lorem ipsum.
Il est utilisé pour l’impression et la typographie, particulièrement apprécié pour les conceptions d’impression à grande échelle.
p {
font-size: 2pc;
}Exemple:
Lorem ipsum.
La taille de l’élément auquel la propriété CSS est ajoutée peut varier en fonction de la taille de l’élément parent.
div {
font-size: 16px;
}
p {
font-size: 1.5em;
}Exemple:
Lorem ipsum.
Il est ajusté en fonction de la taille de la police de la racine de la page (HTML).
html {
font-size: 16px;
}
p {
font-size: 1.25rem; /* 16px * 1.25 = 20px */
}Exemple:
Lorem ipsum dolor sit amet
Utilisé pour indiquer les dimensions physiques dans les conceptions destinées à l’impression.
p {
font-size: 1in;
}Exemple:
Lorem ipsum dolor sit amet
Le cm (centimètre) et le mm (millimètre) sont également des unités de mesure physiques utilisées pour l’impression.
.cm {
font-size: 2cm;
}
.mm {
font-size: 10mm;
}Exemple:
cm: Lorem ipsum dolor sit amet
mm: Lorem ipsum dolor sit amet