Une taille de police de caractère réactive
Les unités « vw » et « vh »
Actuellement, la plupart des navigateurs sont capables de gérer une nouvelle unité relative à la taille du viewport : le « vw » pour « viewport-width » et le « vh » pour « viewport-height ».
Vous l’aurez compris comme moi, il s’agit de définir une taille par rapport à la largeur et la hauteur du « device » utilisé.
Petit rappel : la notion de « viewport » désigne la surface de la fenêtre du navigateur sur desktop, sur les périphériques nomades type mobile ou tablette, on parle davantage de surface réelle d’affichage (qui n’est généralement pas la surface physique du périphérique) avec les valeurs de « device-width » et « device-height ». La complexité est bien expliqué sur le site d’Alsacréations.
Le principe revient à utiliser les pourcentages, donc « 100vw » et « 100vh » constituent la largeur et hauteur totales disponibles.
Ainsi le principe de correspondance de taille est simplement le suivant :
15vw = 15% de la largeur du « viewport »
50vh = la moitié de la hauteur du « viewport »
Si on considère que l’on souhaite appliquer ces unités à une taille de typographie, on a la possibilité d’afficher un texte réactif est proportionnel au « viewport ».
Même si le raccourci est un semblant hasardeux, j’apprécie ce principe qui se rapproche quelque peu de l’utilisation du « rem » (pour « root em ») pour son côté adaptable et facilement maintenable où on se réfère à une valeur « étalon » qui sert de socle à l’ensemble des tailles.
Pour illustrer, voici ce qui est défini pour la CSS du menu « overlay » de www.dotprogs.com :
.menu-over-page ul.main-nav li { font-size: 6vh; /* viewport height */ }
En fonction des contraintes d’affichage présentes sur un site web, il sera parfois plus opportun d’utiliser une taille proportionnelle à la hauteur ou à la largeur.
Quelles conclusions j’en tire personnellement ?
Et bien je pense que ce principe est intéressant à utiliser de manière ponctuelle si vous souhaitez améliorer le confort de lecture sur un élément de site en particulier comme l’affichage des items d’un menu en fonction du périphérique de l’utilisateur.
Pour l’instant avec le recul minimal et la mise en pratique restreinte que j’ai de « vw » et « vh », je ne perçois pas encore l’apport éventuel que cela peut avoir sur du « templating » de site.
Il est certain également que l’on donne un rendu assez empirique de la typographie au premier abord, puisque ce qui va nous intéresser avant toute chose, est la lisibilité de la taille des textes relatifs à l’espace disponible pour un « viewport » donné, car il n’y a pas véritablement d’intérêt à savoir quelle est la taille réelle en pixel de notre contenu en fonction de la résolution (définition) du « viewport ». La diversité des périphériques s’avère même être un casse-tête lorsqu’on s’intéresse plus précisément aux dimensions du viewport et à leurs spécificités (densité de pixel, aspect ratio, etc …) listées sur de nombreux sites web comme celui-ci ou encore là !
Finalement, il est clair que si le rendu proportionnel nous convient visuellement, on essaye le moins possible de se préoccuper des « media queries » pour affiner le rendu de nos textes, le « device » utilisé va en quelque sorte automatiquement provoquer le rendu, pour peu que les tailles définies par l’intégrateur web soient judicieuses !
Vous pouvez étudier la compatibilité de ces unités avec les navigateurs actuels sur can i use. Je n’aborde pas la notion de « vmin » et « vmax » qui peuvent également être utilisées mais de manière plus aléatoire, ces dimensions représentent la plus petite ou la plus grande valeur entre « vw » et « vh ».
Ces quelques lignes ne sont évidemment qu’une mise en exergue des unités de « viewport », donc voici un article plus technique et complet sur la typographie fluide pour aller bien plus loin.
Et aussi : un article (en anglais) intéressant concernant la typographie et sa taille définie en unités de « viewport »