Nous disposons de tout un ensemble d’unités de mesures exploitables en CSS, certaines vont être des unités dites « absolues » d’autre « relatives ». Les unités absolues sont celles que nous utilisons le plus dans notre vie courante. Il s’agit par exemple du millimètre, du centimètre, du mètre, du point Pica, etc. Cependant l’utilisation de ces unités dans le cadre d’un affichage sur écran n’ont pas grand intérêt voir aucun sens.
Les dimensions d’un élément numérique dépendent de plusieurs facteurs. Tout d’abord, la définition de l’écran qui se traduit par la taille du pixel. Pour prendre deux extrêmes, il est assez simple de constater qu’un pixel n’a pas la même dimension sur un vieux téléphone Nokia 3210 que sur un écran 4K. Un autre paramètre dépendra de la taille de la typographie par défaut paramétré par l’internaute. Dans le cas d’un internaute mal voyant, par exemple, cette taille sera augmenté pour faciliter la lecture des pages. Un autre paramètre à prendre en compte est le support (écran, portable, smartphone, tablette…) sur lequel l’internaute regardera le site ou encore la taille qu’il donnera à la fenêtre lors de sa navigation.
Pour toutes ces raisons, nous privilégierons donc l’utilisation d’unités « relative ». Il s’agit d’unités s’appuyant sur un paramètre spécifique, souvent défini par l’internaute, et seront relatives à celui ci.
Unités relatives au matériel
Le pixel (px)
L’unité principale relative au matériel est le pixel (px). Défini à tors comme étant une unité absolue, le pixel est l’unité de référence pour représenter la finesse d’un écran. Historiquement le pixel à été introduit au CSS pour faciliter l’usage du langage par les graphistes. Cette utilisation, même si elle n’est pas abandonnée et présente encore certains avantages, ne correspond plus à la composition de pages adaptables à l’ensemble des définitions d’écrans que nous connaissons aujourd’hui.
Unités relatives à la taille de la fenêtre du navigateur
Lorsque nous concevons un site, nous cherchons à ce qu’il reste adaptable à la taille de la fenêtre du navigateur. Cette adaptabilité des pages permettra à chaque internaute de profiter pleinement de sa navigation et d’accéder sans encombre à l’ensemble des informations présentées.
Le pourcentage (%)
Le pourcentage est une unité connue et très simple à mettre en œuvre mais présentant quelques limites. Il ne pourra être calculé par notre navigateur que pour les valeurs horizontales (sauf dans certains cas bien précis). Ainsi, la majorité du temps, nous ne pourrons pas définir la hauteur, les marges supérieures ou inférieures d’un élément en pourcentage. Il a pour principe de s’appuyer sur la largeur de l’élément parent de l’élément ciblé.
Viewport width (vw)
Avant toute chose, il est important de définir ce qu’est le viewport. Il s’agit simplement de la fenêtre de notre navigateur dans laquelle apparait notre site. Depuis quelques années, certaines unités s’appuient sur la taille que l’internaute donne à cette fenêtre. Lorsque nous utilisons l’unité vw (viewport width) nous définissons la taille d’un élément par rapport à la largeur de cette fenêtre. Ainsi, lorsque nous attribuons une largeur de 50vw à un élément, nous lui donnons l’indication qu’il devra mesurer 50% de la largeur de la fenêtre.
Bien qu’il lui ressemble fortement, il est important de ne pas interpréter cette unité comme le « pourcentage (%) » vu plus haut. Contrairement à lui, le viewport width ne sera pas impacté par la largeur de l’élément parent.
Viewport height (vh)
À l’instar du viewport widtg vu précédemment, le viewport height s’appuiera sur la hauteur de la fenêtre du navigateur. Ainsi, il sera possible de définir la hauteur d’un élément à 80vh pour qu’il fasse 80% de la hauteur de la fenêtre du navigateur.
Cette unité offre énormément de possibilités graphique, contrairement au pourcentage (%) qui ne peut que difficilement s’appliquer à une échelle verticale.
Bon à savoir…
Il est intéressant de noter que les unités viewport ne sont pas limitées à une utilisation liée à leur axe de référence. Ainsi, nous pourrons utiliser le viewport height pour définir la largeur d’un élément et inversement. De cette façon, nous pourrons imaginer des interfaces fluides et élargirons nos possibilités graphiques. Le corps d’un texte pourra lui aussi s’appuyer sur la hauteur ou la largeur de notre fenêtre pour devenir élastique et rester lisible quelque sois la configuration de notre internaute. Ces principes sont malgré tout à manier à bonne escient et ne doivent pas être compris comme une règle immuable.
Unités relatives à la valeur typographique
Comme évoqué dans l’introduction de cet article, le corps du texte par défaut peut être modifié par l’internaute, il n’est donc pas question d’aller à l’encontre de ce choix puisqu’il dépend du besoin ou du handicape de chacun, c’est la notion d’accessibilité prise en compte dans la conception de site web. Il est également important de préciser que ce qui défini la hauteur de la majorité des éléments d’un page c’est leur contenu. Ce contenu est une information présentée sous formede texte et d’image. C’est donc naturellement que les concepteurs du CSS se sont appuyés sur une ancienne valeur typographique, le cadratin, permettant d’apporter une vraie logique de mise en page à leur langage.
Le cadratin (em)
Un peu d’histoire
Le cadratin, en typographie, est une unité de mesure de longueur des espaces. Sa traduction anglaise em (de la lettre M) est utilisée comme symbole de l’unité. Historiquement, le cadratin correspond à la hauteur d’un caractère de plomb utilisé dans l’imprimerie. Et plus précisément celui de la lettre M majuscule dont la pièce était carré.
Il permet par exemple au typographe de définir la valeur d’un espace pour un corps donné. Ainsi, pour un corps de 12pt, la valeur de l’espace sera de 12 points. Nous parlerons ainsi de « l’espace cadratin ».
Son utilisation en CSS est assez simple, la première chose a comprendre est la valeur du cadratin racine (root em). Cette valeur est celle définie par l’internaute dans les propriétés de son navigateur. Il correspond visuellement au corps donné à un paragraphe (<p>) enfant direct du <body>. En partant de cette valeur, nous pourrons par exemple définir la valeur donnée au corps d’un titre de niveau 1 (<h1>) en spécifiant qu’il devra être 2,5 fois plus grand. Ainsi pour un corps par défaut défini à 16, notre élément titre héritera d’un corps de 40. Si notre internaute change la valeur par défaut en la passant à 24, notre élément <h1> fera 60 et ainsi de suite.
Mais le cadratin permet d’aller encore plus loin. Si nous appliquons une valeur em à un container, l’ensemble de ses enfants se verra impacté par cette valeur.
Le cadratin racine (rem)
Fort de notre précédente constatation, définissant que le corps de notre texte spécifié en cadratin puisse être impactée par des règles données aux éléments parents, il semble intéressant d’avoir la possibilité de continuer à s’appuyer sur la taille du cadratin de base de notre page et ainsi éviter de rentrer dans des logiques de calcul. C’est en suivant cette idée qu’a été défini l’unité de cadratin racine rem (root em). En utilisant rem, les éléments spécifiés ne subirons pas l’influence du cadratin de leur parents.
L’unité ch
Bien que peu utilisé et souvent mal définie, l’unité ch présente certains avantages pour la composition des pages. La présenter comme une unité purement typographique pourrait sembler assez logique, puisqu’elle prend en référence la largeur du caractère « 0 » (zéro) d’une typographie donnée.
Ainsi, quelle que soit la largeur du caractère « 0 » dans une police de caractères donnée, c’est la mesure d’un ch. Dans les polices à espacement fixe (monospace), où tous les caractères ont la même largeur, 1chéquivaut à un caractère. Pour les polices proportionnelles (largeur variable), tout caractère donné peut être plus large ou plus étroit que le caractère « 0 ».
De façon générale, si vous voulez une largeur de colonne de 80 caractères et que vous allez l’utiliser ch pour la dimensionner, visez environ 60ch (excepté lors d’une utilisation de police possédant un zéro maigre). Si vous travaillez avec plusieurs polices de caractères, disons une pour les titres et une autre pour le corps du texte, soyez prudent lorsque vous définissez des mesures à l’aide de ch. Les chances qu’elles soient équivalentes sont très peu probales.
En conclusion
Nous pourrions résumer de la façon suivante : Pour définir les dimensions horizontales d’un élément (largeurs, marge de gauche et de droites…) nous privilégierons le pourcentage (%). Pour définir les dimensions verticales d’un élément ou les corps typographiques, nous privilégierons le cadratin (em) et le cadratin racine (rem). Les unités viewport (vh & vw) quand à elles sont à utiliser pour des besoins spécifiques.
Dans tous les cas, le choix de la bonne unité permettra de limiter votre temps de rédaction et vous garantira une interprétation et une adaptation fidèles de votre mise en page quel que soit les choix et le comportement de l’internaute.