Unités fixes ou proportionnelles ?
Mais alors quelles unités pour quelles mesures ?
Comme nous l’avons signalé dans le chapitre précédent, il est toujours possible de faire varier la taille du texte, de manière indépendante à nos constructions et mise en page CSS. Prenons quelques instants pour revenir sur cette fonctionnalité.
Depuis longtemps et dans un souci d’accessibilité, les navigateurs nous proposent, moyennant les raccourcis clavier standards, ctrl +, ctrl –, de zoomer vers l’intérieur ou l’extérieur du contenu, et avec ctrl 0 de restituer l’affichage à 100 %. Cette mécanique était exclusivement réservée au texte et donc n’affectait que la taille du texte. Face à pas mal de problématiques de mise en page, dans lesquelles les développeurs ne prenaient pas en compte cette dimension, les navigateurs ont finis par adopter le classique zoom sur les pages. C’est-à-dire que le zoom s’effectue de manière homogène, sur l’ensemble du contenu de la page, qu’il s’agisse de texte ou de tout autre élément graphique.
Bien entendu, une telle approche génère systématiquement des ascenseurs horizontaux, et rend plus complexe la lecture de la page. Firefox propose le débrayage entre ces deux possibilités, dans son menu Affichage > Zoom > Zoom texte seulement.
Conscient de cette possibilité, nous allons devoir prendre en compte cette dimension dans nos mises en page. Pour cela, nous allons faire appel à une autre unité de mesure proportionnelle, mais cette fois-ci proportionnelle à la taille du texte : le em (ou cadratin). 1 em équivaut à la hauteur complète du bloc en plomb qui contient le caractère à imprimer, ascendante et descendante comprises.
Que vaut 1 em par défaut dans nos navigateurs ?
Si nous ne définissons pas cette valeur dans nos CSS, par défaut, l’ensemble des navigateurs s’entend de proposer une valeur de 16, donc 1 em vaut par défaut 16 px. L’em est hérité, donc sa valeur se base sur la taille de l’élément parent. Il faut donc faire très attention, si par exemple nous avons le fragment HTML suivant :
<p>Du texte <em>avec une emphase</em></p>
Si nous appliquons 0.9 em à la balise <p>, et 0.9 em à la balise <em>, nous nous retrouverons avec du texte dans la balise <p> ayant pour taille 0.9 * 16 px, soit 14.4 px et du texte dans la balise <em> ayant pour taille 0.9 * 14.4 px, soit 12.96 px. Ce qui ne correspondrait peut être pas à l’effet attendu. Ainsi, il existe une autre unité proportionnelle, mais qui se base cette fois-ci, non pas sur la valeur de l’élément parent, mais simplement sur la valeur de l’élément <body>.
Nous avons vu que les navigateurs proposent une valeur par défaut de 16 px. Ce qui donne un calcul pour nos tailles de typo, basé sur cette même valeur. D’ou : un corps de 12 px équivaut à 12 / 16 px soit 0.75 em. Il peut être alors judicieux de donner à notre balise <body> une valeur de 62.5 %, ramenant ainsi la valeur par défaut de 16 px, à une valeur par défaut de 16 * 62.5 / 100 soit 10 px. Dorénavant un corps de 12 px équivaut à 1.2 em, beaucoup plus simple à lire et à définir.
Toutefois, attention : ces deux unités sont basées sur des valeurs initialement définies par l’utilisateur. À tout moment, un utilisateur peut redéfinir les valeurs par défaut de son navigateur. Afin de prévenir un paramétrage qui compromettrait le bon affichage du site, on peut ajouter un script, qui génèrerait à la volée une balise, contenant par exemple trois éléments de liste <li>, en leur appliquant une font size de 1em. Il suffit ensuite de mesurer la hauteur du <ul> ainsi obtenu et s’assurer qu’il se trouve dans une fourchette convenable. Sinon, il est toujours temps d’agir sur le font-size de <body>.
Il existe une troisième génération de valeurs proportionnelles, cette fois-ci en relation avec les dimensions de l’écran d’affichage. Nous avons donc maintenant accès à vw, vh, vmin et vmax. Alors dans quel cas devrait-on préférer une valeur proportionnelle aux blocs, à une valeur proportionnelle au texte ? Et bien tout simplement : quand le redimensionnement de la page doit influer sur la disposition du contenu, on use de % et lorsque le redimensionnement du texte doit influer sur l’affichage du contenu, on use d’em ou de rem. Par exemple, le fragment suivant devrait parler de lui-même, testez le résultat dans un navigateur :
<article>Duis aute irure dolor in reprehenderit in voluptate eu fugiat nulla pariatur. Consectetur adipisicing elit, ut labore et dolore magna aliqua. Mollit anim id est laborum. Velit esse cillum dolore excepteur sint occaecat sunt in culpa. Qui officia deserunt in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat.</article>
body {
font-size:62.5%;
}
article {
font-size:3em;
width:84%;
margin: 0 auto;
border: 0.05em solid rgb(114,132,61);
background-color:rgba(114,132,61,0.2);
padding: 0.5em;
}