Les unités de mesure en HTML et CSS

Introduction

En HTML et CSS, les unités de mesure servent à définir les tailles :

du texte,
des marges et espacements,
des images,
ou encore des éléments de mise en page.

Deux grandes familles d’unités existent :

Unités absolues, fixes, indépendantes du contexte (ex. px, cm, pt)
Unités relatives, adaptatives, dépendant du contexte (ex. em, rem, %, vw, vh)

👉 Pour les sites et les ePub reflowables, on privilégie les unités relatives pour garantir l’adaptabilité sur tous les écrans.

Les unités absolues

Unité	Nom	Description	Exemple	Utilisation
`px`	pixel	plus petite unité d’écran (indépendante du DPI)	`font-size: 16px;`	🟠 à éviter pour le texte : taille fixe
`pt`	point typographique	1 pt = 1/72 de pouce	`font-size: 12pt;`	réservé à l’impression
`cm`, `mm`, `in`	centimètre, millimètre, pouce	unités physiques	`width: 2cm;`	impression uniquement

📍 Remarque : le pixel CSS n’est pas un pixel matériel — c’est une unité virtuelle dépendant du zoom et de la densité de l’écran.

Les unités relatives

a) L’unité `em`

Relative à la taille de police de l’élément parent.
Si le parent a font-size: 16px, alors 1em = 16px.
Exemple :

⚠️ Attention : les em s’additionnent dans les éléments imbriqués.

Exemple :

div {
  font-size: 1.2em; /* 19,2px */
}
div p {
  font-size: 1.2em; /* 1.2 × 19,2 = 23,04px */
}

➡️ Risque de grossissement exponentiel.

b) L’unité `rem`

Relative à la taille de police de la racine du document (<html>).
Indépendante des imbrications.

Exemple :

html {
  font-size: 16px;
}
p {
  font-size: 1.5rem; /* 24px */
}

✅ Avantage : cohérence et prévisibilité.

c) Le pourcentage `%`

Définit une proportion par rapport à un élément parent.
Utilisable pour les tailles, marges, paddings, images, etc.
Exemple :

div {
  width: 50%; /* moitié de la largeur du conteneur parent */
}

Pour le texte :

p {
  font-size: 120%; /* 20 % de plus que la taille du parent */
}

d) Autres unités relatives utiles

Unité	Référence	Exemple
`vw`	largeur de la fenêtre (viewport width)	`width: 50vw;` → 50 % de la largeur de l’écran
`vh`	hauteur de la fenêtre (viewport height)	`height: 100vh;` → occupe tout l’écran
`vmin`, `vmax`	plus petite ou plus grande dimension du viewport	`font-size: 2vmin;`

Comparatif synthétique

Unité	Relative à	Avantage	Inconvénient	Recommandation
`px`	écran (fixe)	stabilité visuelle	non adaptable	à éviter pour le texte
`em`	parent	flexible	dépendance contextuelle	bon si usage maîtrisé
`rem`	racine (`<html>`)	cohérence globale	dépend du paramètre global	✅ recommandée
`%`	parent (taille ou conteneur)	adaptable	contexte variable	bon pour les largeurs
`vw` / `vh`	fenêtre d’affichage	responsive automatique	moins précis pour le texte	pour éléments pleine page

Exemple complet

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
  html {
    font-size: 16px;
  }
  body {
    margin: 5%;
    font-family: sans-serif;
  }
  h1 {
    font-size: 2rem; /* 32px */
  }
  p {
    font-size: 1rem; /* 16px */
    width: 80%;
  }
  .note {
    font-size: 0.875em; /* 14px si parent = 16px */
  }
</style>
</head>
<body>
  <h1>Un titre adaptable</h1>
  <p>Ce texte s’adapte à la taille parente grâce à l’unité <code>rem</code>.</p>
  <p class="note">Cette note est légèrement plus petite (0.875em).</p>
</body>
</html>

Bonnes pratiques

Définir la taille de base du texte dans html { font-size: 100%; } → environ 16px selon le navigateur.
Utiliser rem pour les tailles de police, em pour les marges et espacements internes.
Éviter les px en ePub reflowable : la mise en page doit rester flexible.
Tester le rendu sur différents écrans (mobile, tablette, liseuse).

Exercices pratiques

Observation :
- Ouvrir un fichier CSS et identifier les unités utilisées.
- Indiquer lesquelles sont absolues, lesquelles sont relatives.
Conversion :
- Si la racine a font-size: 16px, combien vaut 1.5rem, 0.75em, 120% ?
Application :
- Refaire une mise en page fixe (en px) en unités relatives (rem, %).
Comparaison visuelle :
- Modifier la taille de la police du <html> dans le navigateur et observer l’adaptation des éléments.