CSS Font Sizing : Pixels vs Em vs Rem vs Pourcentage vs Unités de Viewport

On a beaucoup débattu sur les pixels vs em vs pourcentage vs rem et sur quelle propriété de police utiliser et quand. Malgré la centaine d’articles en ligne, ce sujet peut être très confus étant donné que l’utilisation de ces propriétés de police diffère en fonction des besoins de nos projets. Par exemple, certains suggèrent de ne pas utiliser de valeurs de pixels fixes au niveau de la base (éléments html et body) car l’utilisateur n’aura pas la possibilité de réinitialiser la taille de la police selon ses spécifications. Mais, pour les personnes qui, comme moi, sont dépendantes de bootstrap, ce n’est pas conseillé. Nous finissons par avoir une valeur de base fixe en pixels et devons créer les propriétés de police de tout notre projet par rapport aux valeurs de base en pixels.

Cet article explique la différence entre ces propriétés de police et la meilleure façon de les utiliser. Bien sûr, il n’y a pas de bonne façon de faire et une grande partie de la taille de police à utiliser et comment sera largement déterministe en fonction de notre compréhension de ces unités de taille de police et du projet en question.

Pixels : Avant l’avènement du responsive design, le pixel était largement utilisé comme LE dimensionnement de police pour tout, de la typographie à la largeur, au padding et à la hauteur. Cependant, les pixels sont des unités de taille fixe et ne changent pas en fonction de la taille du viewport ou ne sont pas extensibles. Si vous souhaitez créer un site Web réactif à l’aide de pixels, il peut être très difficile de garder la trace de toutes les valeurs basées sur les pixels dans la feuille de style CSS, y compris les valeurs dans les requêtes média. Alors, quelle propriété de police pouvons-nous utiliser qui nous permettra d’apporter des modifications minimales à notre feuille de style CSS tout en étant évolutive ? C’est là que les unités em, rem, pourcentage et viewport entrent en jeu.

Em:Em est une unité flexible et évolutive qui est convertie par le navigateur en valeurs de pixels. Si la taille de police par défaut dans chrome est de 16 px, 1 em = 16 pixels. L’une des principales idées fausses concernant l’unité em est qu’elle est relative à la taille de la police de l’élément parent. Selon la spécification W3, em est relatif à la taille de la police de l’élément sur lequel il est utilisé. Cet article explique parfaitement le concept de em de manière claire et détaillée. Si vous voulez vraiment apprendre le fonctionnement de em, ne sautez pas l’article mentionné ci-dessus. Les em sont généralement utilisés pour la typographie comme les titres, les textes, les paragraphes et les éléments associés à la typographie tels que les marges, le remplissage, etc. Si vous définissez la taille de la police de vos éléments html et body de base en pixels et que les propriétés de votre élément typographique sont définies à l’aide d’ems, pour le responsive design, tout ce que vous avez à faire est de changer la taille de la police par défaut au niveau de la base, comme

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

et toutes les valeurs em seront automatiquement recalculées au niveau de la base.

Cependant, les ems ont une mise en garde majeure, l’héritage ! !! Par exemple, un <div> avec une taille de police de 16px contenant un <p> avec une taille de police de 2em se traduit par 32 px pour l’élément <p>. Maintenant, ajoutez un <div> à l’intérieur du <p> avec une taille de police de 0,5em également, le résultat du div sera de 16px, la moitié de 32 px, et non 8px. C’est là que les rems entrent en jeu.

Rem : Rem est relatif à la taille de police de l’élément racine (élément html). Si la taille de police de l’élément html est de 16 px, alors 1rem = 16 px. Rem sera TOUJOURS relatif à l’élément racine, quel que soit le nombre d’éléments imbriqués. Cependant, le fait de n’utiliser que des rems et pas d’ems peut avoir son lot de problèmes, car la typographie peut devenir trop grande ou trop petite, ce qui peut entraîner des problèmes de mise à l’échelle. Cet article explique une excellente façon de résoudre ce problème.

Percents : La valeur en pourcentage est toujours relative à une autre valeur, que ce soit la valeur parentale de l’élément ou à partir d’une autre propriété de l’élément lui-même. Les pourcentages sont largement utilisés dans le responsive design. Le cadre Bootstrap de Twitter en est un bon exemple. La disposition en 12 colonnes de Bootstrap a ses largeurs définies en pourcentages, de sorte qu’elles sont toujours fluides et dimensionnées par rapport à leur élément parent
Les pourcentages sont couramment utilisés pour la largeur et la hauteur des conteneurs, des divs et pour le dimensionnement des images responsive.

Unités de viewport : Les propriétés de largeur et de hauteur de la fenêtre d’affichage sont relatives à la largeur/hauteur de la taille actuelle de la fenêtre d’affichage.

1vw = 1% de la largeur de la fenêtre d’affichage
1vh = 1% de la hauteur de la fenêtre d’affichage

La fenêtre d’affichage signifie ici la taille de la fenêtre du navigateur. Si vous voulez dimensionner votre élément en fonction de la largeur du viewport et non de l’élément parent/racine, alors les unités viewport sont l’unité de dimensionnement de la police que vous devez utiliser. Les unités vw/vh fonctionnent très bien avec la typographie et sont couramment utilisées pour la même chose.
Voici un excellent article qui explique comment utiliser cette propriété.

Verdict final : Comme j’utilise fréquemment bootstrap, ma taille de base par défaut est en pixels. J’utilise le pourcentage pour définir la largeur et la hauteur des images, des conteneurs et des divs, des ems et rems pour la typographie et des éléments liés à la typographie tels que la marge, le padding, etc. Je joue actuellement avec les unités viewport pour la typographie réactive et je trouve cela génial. Expérimentez beaucoup avec ces propriétés de police et vous tomberez bientôt dans un style fait sur mesure pour vous.