De px à rem — un tableau des unités CSS, 120 tailles
16 px valent 1 rem et aussi 12 pt. Chaque taille de 1 à 120 px, avec sa valeur en rem, pt, pc, pouces et millimètres.
Les tailles les plus courantes
Texte courant à 16, petit texte à 14, espacements de 8, 24 et 32 : les valeurs qui reviennent sans cesse.
Pourquoi rem se divise par 16
Parce que les navigateurs fixent la taille de police racine à 16 px et que rem en est un multiple. Si le lecteur agrandit le texte dans son navigateur, seules les valeurs en rem suivent ; ce qui est figé en px ne bouge pas.
À l’écran, pt et pouces restent des pixels
CSS fixe le pouce à 96 px et le point à 1/72 de pouce. Ainsi 16 px valent exactement 12 pt — mais posez une règle sur l’écran et ce « pouce » n’en mesurera pas un.
Tailles qui tombent juste
Le rem tombe juste sur les multiples de 16, et le pt sur ceux de 4, car 4 px valent exactement 3 pt.
De 1 px à 120 px
Comment lire
- rem = px ÷ 16, car les navigateurs fixent la police racine à 16 px.
- pt = px × 0,75, puisque CSS fixe le pouce à 96 px et le point à 1/72 de pouce.
- Un pc vaut 12 pt, et un pouce vaut 96 px comme 72 pt.
- Utilisez rem pour le texte et les espacements ; gardez px pour les filets fins comme les bordures.
Questions fréquentes
Q. Combien de pixels fait 1 rem ?
16 px par défaut. Si le lecteur a agrandi le texte dans son navigateur, la valeur suit — et c’est précisément l’intérêt de rem.
Q. Faut-il écrire px ou rem ?
Préférez rem pour le texte et les espacements : tout suit quand le lecteur agrandit la police. Gardez px pour les filets fins, comme une bordure de 1 px.
Q. Pourquoi met-on font-size: 62.5% sur html ?
Cela met la racine à 10 px pour que 1,6 rem se lise 16 px. L’ennui, c’est que la page rétrécit pour qui a délibérément augmenté sa police par défaut.
Q. Pourquoi le pt subsiste-t-il ?
Il vient de l’imprimerie et survit dans les feuilles de style d’impression et les gabarits d’e-mail. À l’écran, la conversion est nette : 16 px valent 12 pt.
Q. Quelle différence entre em et rem ?
rem se mesure toujours à la police racine ; em se mesure à la police de l’élément, si bien que les em imbriqués se multiplient.