Pourquoi j'utilise l'unité Rem et non l'unité Pixel

Lors des reviews d'intégration HTML à partir de valeurs fournis dans un PSD, on m'a fait remarquer que « les tailles de polices n'étaient pas bonnes » car elles étaient en rem et non en px. Aujourd'hui pire, on me somme de remplacer tous les rem par des px. C'est tout, c'est comme ça. Peut-être parce que l'on a peur que la conversion rem en px ne soit pas juste ou peut-être simplement parce qu'on ne sait pas bien à quoi sert le rem.

Sans entrer dans des détails techniques poussés, je vais vous expliquer pourquoi j'utilise rem.

Je vous laisse également une petite démo temps réel plus bas dans l'article

Allez, n'ayons pas peur, ce rem, il ne va pas nous manger !

Pixel VS Rem

Le Pixel

Notre bon vieux pixel rassurant se comporte de tel sorte que je précise dans ma feuille CSS font-size: 16px et que la taille de la police sur laquelle cette propriété s'applique fait bien 16 pixel de hauteur (il y a des histoires de dpi et de faux pixel là dedans mais ça ne nous intéresse pas pour notre explication). Le problème ici est une question d'accessibilité. Si je demande d'agrandir les textes via l'option de mon navigateur ou de mon OS il ne se passera rien. Comme nous avons établie dans le marbre que le texte fait 16px, il ferra toujours cette hauteur, peut importe ce que l'utilisateur demande.

Le Rem

Cette unité quand à elle est un pourcentage de taille en fonction du zoom texte que l'utilisateur applique sur son navigateur. Elle se base toujours sur la taille du texte défini à la racine du document. Avec un savant petit calcul CSS on arrive à faire en sorte que pour un zoom texte de 100% (qui est le zoom texte par défaut des navigateur) 1.0rem est strictement la même chose que 10px ou encore que 1.6rem est strictement la même chose que 16px. Cela nous permet de travailler facilement, avec une unité identique mais qui est taillé pour l'accessibilité.

Une Histoire de Responsive Web Design

Par conséquent, si je modifie la taille du texte à la racine du document, cela modifiera la taille de tous les textes du document de manière proportionnelle ce qui est impossible avec des unités définis en pixel. Il me suffit alors via des Media Queries de difinir une valeur racine plus ou moins grande pour rendre les textes plus lisible ou plus facile à cliquer, etc.

Le pixel n'est donc pas à bannir, mais à utiliser uniquement pour des éléments qui ne doivent pas varier si le zoom texte est changé. Cela peut-être des cas pour les marges par exemple.

Rem ou Em ?

Une autre unité existante est le em. Cependant, à la différence du rem qui rend proportionnelle une taille par rapport à la taille du texte à la racine du document, le em la rend proportionnelle par rapport à la taille de l'élément parent dans lequel il est contenu. Cela permet de définir, par exemple, qu'un exposant est 0.8em de sont parent, soit 80% de sa hauteur.

Un peu de concret

Par ici c'est un peu plus concret, on s’arrête donc là pour la théorie.

Exemple

Jouez donc avec le slider ou changez la valeur magique de 62.5% qui permet de rendre les valeurs en Rem fluide et constatez la différence entre Pixel et Rem.

See the Pen Pixel VS Rem by Bruno Lesieur (@MachinisteWeb) on CodePen.

Explication

Pour se mettre à gérer ses tailles en Rem, rien de compliqué. Il suffit de définir la racine du document à 62.5% sur la balise html puis de gérer ses tailles en Rem en sachant que 10px correspond à 1.0rem.

En CSS

html {
    font-size: 62.5%; /* Ré-équilibrage du Rem face au Pixel pour des calculs simples */
}

/* Exemple d'application */
p {
    font-size: 12px; /* Pour les navigateurs qui ne supportent pas le Rem */
    font-size: 1.2rem; /* Pour les navigateurs « Responsive » */
}

En Less

html {
    font-size: 62.5%;
}

/* Fonction toute prête pour gérer Rem et Pixel en fonction des supports des navigateurs. */
.font-size(@sizeValue) {
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    font-size: ~"@{pxValue}px"; 
    font-size: ~"@{remValue}rem";
}

/* Exemple d'application */
p {
    .font-size(1.2);
}