> Cet article a été édité suite au retour d'un lecteur, le 17/03/21 à 22h07 Depuis quelques années, un débat fait rage dans la communauté des développeurs front-end : **"Quelles unités de taille faut-il favoriser pour les polices d'écriture ?"** Beaucoup de ressources sur le web vont jusqu'à dire qu'il faut complètement abandonner le pixel, et tout remplacer par des unités relatives, mais alors, **quelle unité choisir ?** ## Le pixel est mort, vive le pixel Tout d'abord il faut préciser une chose : **même les unités relatives comme le em et le rem sont directement converties en pixel par le navigateur**, donc quand on parle de remplacer le pixel, c'est seulement lors de la déclaration de la taille en Javascript dans le CSS, le navigateur lui, calcule en pixels. **À noter aussi que les informations suivantes sont valables pour les textes**, mais la méthodologie pour dimensionner d'autres éléments n'exploite pas les mêmes unités. ## Quelles sont les différences ? ### L'unité px Le pixel est l'unité de base, celle que l'on commence à voir dès que l'on découvre le CSS, mais il faut savoir que le "px" ne représente pas la taille d'un pixel physique, c'est pourquoi on parle parfois de "CSS pixel". **La taille d'un pixel de référence est celle d'un pixel sur un écran de 91dpi**, et le pixel manipulé en CSS sera donc calculé par rapport à cette taille-là. > Voici [un article de Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) expliquant ce concept en détail. **Pour un écran rétina, il faudra donc 4 pixels physiques utilisés pour afficher un "CSS pixel"**, c'est d'ailleurs pour cela que les _media-queries_ pour les appareils mobiles se basent sur des tailles inférieures avoisinant les 500px alors que les écrans physiques ont des résolutions de plusieurs milliers de pixels. **Donc même si on ne considère pas le pixel comme étant une unité "relative", ce n'est en réalité pas une unité complètement absolue**, et elle s'adapte pour faciliter la vie aux développeurs, ainsi qu'aux utilisateurs. ``` ``` ### L'unité em **Cette unité est relative à la taille de la police de l'élément parent.** Imaginons que la taille de texte du parent soit de 16px, alors 1em sera égal à 16px, 2em égal à 32px, etc... **Le problème de cette unité réside dans les éléments imbriqués :** imaginons que l'on fixe la taille de texte d'un élément

à 1.5 em (24px), si l'on veut créer une sous-liste imbriquée dans un élément d'une liste existante, alors le 1.5em du

de deuxième niveau sera égal à 36px (1.5\*1.5\*16). ```

Un élément d'une liste
- Un élément d'une sous-liste

``` **Ces effets de bords rend l'unité em difficile à controler et à maintenir**, c'est pour cette raison qu'a été créé une nouvelle unité relative : le rem. ### L'unité rem (root em) Le fonctionnement de rem est le même que celui de em, **à l'exception qu'il n'est pas relatif à la taille de texte de son parent, mais à la taille de texte de la racine (d'où "root em").** En initialisant la taille de la police du document à 12px, la taille d'un texte enfant paramétré à 2em sera égal à 24px, **peu importe où il soit placé dans le document HTML.** L'avantage du rem est que vous pouvez **faire varier la taille finale de tous vos textes en changeant simplement la taille de texte du document racine** à l'intérieur de media-queries. ``` ``` > L'unité rem est aujourd'hui supporté par 99% des navigateurs, vous pouvez donc l'utiliser à volonté ## Quelle est la meilleure solution ? Il y a de nombreuses années, lorsque l'utilisateur voulait zoomer dans une page, **le navigateur grossissait simplement les polices d'écritures (sans grossir les éléments).** Le problème était que **les tailles des textes spécifiées en pixels n'étaient pas affectées par le zoom**, la solution a donc été d'ajouter des unités relatives pour la taille des polices d'écritures. Aujourd'hui, les navigateurs modernes ne gèrent plus le zoom avec les tailles des polices, **ces derniers augmentent simplement la taille du pixel de référence**, ce qui augmente donc la taille de tous les éléments de manière homogène. > Est-ce que cela veut dire que je peux dimensionner mes textes en px ? En théorie oui, sauf que pour certaines personnes atteintes de déficiances visuelles, **il peut être indispensable de pouvoir augmenter uniquement la taille des textes, sans toucher au reste.** > C'est pour celà que **la plupart des navigateurs donnent la possibilité à l'utilisateur d'ajuster la taille par défaut** de la police (de base réglée à 16px). Donc pour permettre aux personnes souffrant de déficience visuelle d'adapter la taille du texte manière uniforme, mais aussi de garder un code maintenant, **l'idéal est d'utiliser les rem pour spécifier les tailles de textes** par rapport à la taille de texte par défaut définie par le navigateur (ou l'utilisateur). J'espère que cet article vous aura été utile, et à bientôt sur le blog !