px, rem, em et pt : quatre façons de mesurer
En CSS, une taille de texte ou d'espacement s'écrit dans plusieurs unités. Deux sont fixes, deux sont relatives à une autre taille de police.
| Unité | Se calcule sur | Type |
|---|---|---|
| px | Elle-même : le pixel CSS | Fixe |
| pt | Le pouce : 1 pt = 1/72 de pouce | Fixe |
| rem | La police de l'élément html | Relative |
| em | La police de l'élément parent | Relative |
Tant que ni la feuille de style ni le visiteur ne la changent, la taille de police de base des navigateurs est de 16 px : c'est la valeur par défaut du convertisseur. Si votre feuille de style fixe une autre taille sur html, saisissez-la comme taille de base.
Les formules de conversion
rem = px ÷ taille de basepx = rem × taille de basepx = em × taille du parentpt = px × 0,75Le rapport entre px et pt vient de la norme CSS du W3C, qui fixe 1 pouce à 96 px et à 72 pt : un point vaut donc 96 ÷ 72 = 4/3 de pixel, et un pixel 0,75 point. Le em, lui, dépend de l'endroit où il est utilisé : c'est pourquoi le convertisseur demande la taille du parent à part.
Trois exemples
24 ÷ 16 = 1,5 rem, soit aussi 24 × 0,75 = 18 pt.
1,5 × 20 = 30 px, soit 30 ÷ 16 = 1,875 rem sur une base de 16 px.
Certaines feuilles de style ramènent html à 62,5 % de 16 px, soit 10 px, pour calculer de tête : 14 px deviennent alors 1,4 rem.
Les tailles courantes en rem
Sur la base par défaut de 16 px :
| px | rem | pt |
|---|---|---|
| 12 px | 0,75 rem | 9 pt |
| 14 px | 0,875 rem | 10,5 pt |
| 16 px | 1 rem | 12 pt |
| 18 px | 1,125 rem | 13,5 pt |
| 20 px | 1,25 rem | 15 pt |
| 24 px | 1,5 rem | 18 pt |
| 32 px | 2 rem | 24 pt |
| 48 px | 3 rem | 36 pt |
Le tableau sous le convertisseur se recalcule pour la taille de base que vous saisissez.
Le piège du em : les tailles qui se multiplient
Le em se calcule sur la police du parent, qui peut elle-même être en em. Une liste à 1,2 em dans une page à 16 px mesure 19,2 px ; une seconde liste à 1,2 em placée dedans mesure 1,2 × 19,2 = 23,04 px. Pour une taille qui ne dérive pas, utilisez le rem, calculé sur la seule base de la page.
Questions fréquentes
Combien font 16 px en rem ?
1 rem, si la taille de base de la page est celle des navigateurs par défaut, 16 px. Sur cette base, 1 rem = 16 px, 0,5 rem = 8 px et 2 rem = 32 px.
Comment convertir des px en rem ?
Divisez la taille en pixels par la taille de base de la page : 24 px ÷ 16 = 1,5 rem. Pour l'inverse, multipliez : 1,25 rem × 16 = 20 px.
Quelle différence entre rem et em ?
Le rem se calcule sur la taille de police de l'élément racine (html), la même partout dans la page. Le em se calcule sur la taille de police de l'élément parent : il change d'un endroit à l'autre et se multiplie quand on imbrique les éléments.
Pourquoi utiliser rem plutôt que px ?
Une taille en rem suit la taille de police choisie par le visiteur dans les réglages de son navigateur : s'il l'augmente, tout le texte grandit dans les mêmes proportions. Une taille en px reste fixe, quel que soit ce réglage. Cela suppose que la feuille de style ne fixe pas elle-même la taille de html en px.
Combien de pixels fait un point (pt) ?
En CSS, 1 pouce vaut 96 px et 72 pt : 1 pt = 96 ÷ 72 ≈ 1,333 px, et 1 px = 0,75 pt. Un texte de 12 pt mesure donc 16 px.
Une erreur ? Signalez-la, nous la corrigeons.