Quel weggmaster n’a jamais galéré pour son taf typographique, en ayant un texte qui se place mal et déséquilibre l’esthétique du site en fonction de la taille de la fenêtre du navigateur?
Les unités absolues ne permettent pas de modifier la taille d’un texte en fonction de l’affichage et seront donc plus intéressante pour des pages nécessitant d’être imprimée, puisqu’une taille de police défini à 12 restera toujours à 12.
Nous avons à notre disposition dans cette catégorie le px, le pt, le pc, le cm et le mm.
Mais aujourd’hui avec la multiplication des supports et des écrans, il est nécessaire de rendre les contenus beaucoup plus adaptables et fluides afin de permettre une meilleur ergonomie et de rendre l’expérience de l’utilisateur plus agréable.
Les sites sont donc maintenant tous « responsive » et s’adaptent normalement parfaitement à votre taille d’écran.
C’est la raison pour laquelle aujourd’hui, lors de la création d’un site web, on utilise les valeurs relatives, qui permettent de redimensionner les éléments et ainsi augmenter leur lisibilité. Dans cette catégorie, les unités em et rem, permettant un dimensionnement en cascade, sont les plus connus. Ces valeurs très utiles, ne servent pas uniquement à définir la taille de vos textes. Elles peuvent être également utilisées pour fixer la taille des margin et des padding par exemple.
Mais il y a une autre alternative…
Afin de caler son texte dans les bonnes proportions de sa DIV, tout en évitant les césures disgracieuses, l’utilisation des unités relatives au viewport est une solution intéressante. Pour être plus clair, il s’agit d’utiliser un code qui permettra à notre texte de changer de taille en fonction de la largeur et/ou de la hauteur de la fenêtre du navigateur.
Vous pouvez donc ajouter à cette liste ce qui suit:
- vw : unité relative à la largeur de l’écran (Viewport Width)
- vh : unité relative à la hauteur de l’écran (Viewport Height)
- vmin (vm pour IE9) : unité relative à la plus petite des deux dimensions (Viewport Min)
- vmax : correspond à l’unité relative à la plus grande des deux dimensions (Viewport Max)
Exemple:
Renseignez votre CSS ainsi:
p {
font-size: 2vw;
}
Vous aurez alors un corps de texte pour la balise <p> qui vaudra 2% de la largeur du viewport et qui pourra donc s’étirer ou rétrécir si vous jouez sur la taille de la fenêtre de votre navigateur .