article.md 8.3KB
title: ★ L'importance du rythme vertical en design CSS slug: l-importance-du-rythme-vertical-en-design-css date: 2007-08-19 11:16:41 type: post vignette: images/logos/rythme_vertical.png contextual_title1: ★ iPheeds.org, une version iPhone pour votre blog contextual_url1: 20080723-ipheedsorg-une-version-iphone-pour-votre-blog contextual_title2: Critique du livre Ergonomie Web contextual_url2: 20080528-critique-du-livre-ergonomie-web contextual_title3: 12 règles d'ergonomie web par Amélie Boucher contextual_url3: 20071117-12-regles-d-ergonomie-web-par-amelie-boucher
Franchement déçu par la qualité des sites participant au Concours Cascading Style Summer Refresh, je trouve qu'il y a un problème récurrent chez les participants : il manque la notion de rythme vertical dont je n'avais pas parlé lors de mon précédent billet sur les CSS de qualité mais qui a son importance. Je pense que cette lacune est en partie due à un manque de ressources francophones sur le sujet, il est temps d'y remédier. Ce billet n'est qu'une introduction car je manque de temps (et hop l'excuse pour ne pas avoir participé au concours ;-)) mais normalement les liens devraient vous permettre d'aller plus loin.
Le Feng Shui du design web
D'après Wikipédia :
Le Feng shui est un art chinois millénaire dont le but est d'harmoniser l'énergie (le Qi) d'un lieu de manière à favoriser la santé, le bien-être et la prospérité de ses occupants.
Si je le rapproche ici du rythme vertical c'est qu'il procure exactement la même sensation d'harmonie et de stabilité à un site, on peut passer ainsi d'un design amateur à quelque chose de plus professionnel, le rythme vertical peut même parfois se suffire à lui-même.
Mais de quoi parle-t-on concrètement ?
C'est une notion ancienne qui vient de l'imprimerie et qui prend en compte l'alignement et l'esthétique typographique en dosant judicieusement la taille des lignes (font-size) et des interlignes (line-height) mais aussi des marges (margin et padding) afin d'obtenir un résultat agréable et régulier. On parle de rythme car c'est vraiment ce qui va donner sa dynamique à la page et retirer toute notion de cacophonie de tailles de polices et de marges inadéquates.
Arrêtons nous un instant sur un exemple pour bien visualiser ce dont on parle, celui donné par Wilson Miner dans Setting Type on the Web to a Baseline Grid. Lorsque l'on analyse cette page :
On constate qu'il y a une certaine cohérence entre les différents tailles et espacements au sein de la page, ce n'est ni anodin, ni du hasard et on peut s'en rendre compte en appliquant un fond à la page de la hauteur de la baseline :
L'article de référence pour bien comprendre comment arriver à un tel résultat est pour moi celui de 24 ways intitulé Compose to a Vertical Rhythm. Petite parenthèse, je recommande d'ailleurs vivement la lecture de ce site que j'ai découvert il n'y a pas si longtemps et que je trouve vraiment excellent, dommage que ce ne soit pas un 36 ways pour le coup !
Il peut aussi être intéressant d'avoir recours à l'article Sane CSS Sizes si vous voulez vraiment comprendre l'enfer du rythme vertical appliqué aux différents navigateurs (c'est surtout le template final qui est intéressant). L'article Add and delete vertical space in measured intervals sur Web Typography est une bonne introduction aussi.
Gardez le rythme !
Il arrive parfois qu'une grande différence de tailles de polices concomitantes ne soit pas très esthétique (si l'on s'en tient à une même baseline pour toute la page) car la note va par exemple sembler démesurément espacée par rapport au corps de la page :
Mark Boulton dans son récent article intitulé Incremental leading donne une solution élégante pour remédier à ce problème :
Il s'agit de revenir au rythme initial périodiquement toutes les x lignes. De cette façon, l'esthétique initiale du rythme est conservée et les notes ne paraissent pas inutilement étirées.
Une solution clés en main
Réaliser un design prenant en compte tous ces calculs est long et fastidieux (vous pouvez me croire, c'est ce que j'avais commencé à faire pour ma refonte et il faut une calculatrice pour chaque nouvelle mesure !). Heureusement, il existe des calculateurs qui vont vous permettre de simplifier ce processus :
Mais il y a maintenant encore mieux avec l'arrivée de BluePrint, le framework CSS qui se soucie un peu de la typographie, et qui depuis la version 0.4 est enfin en em ce qui décuple son intérêt ! Je ne l'ai pas (encore) testé en conditions réelles mais ça semble vraiment être ce que j'attendais depuis si longtemps...
Le seul reproche que l'on pourrait lui faire est le manque de sémantique dans le nom des balises, mais Jeff Croft a déjà épilogué là-dessus donc je vais m'abstenir (mais vous pouvez lire les commentaires). Après tout le nombre de classes n'est pas restreint en html alors si vous souhaitez ajouter des microformats ou autres en plus, libre à vous :-).
Une note personnelle pour finir, depuis que j'ai pris conscience de l'importance de ce rythme vertical, je ne peux m'empêcher d'y penser dès que je visite un site et je suis souvent choqué par le manque de considération de la typographie sur le web alors que c'est vraiment une composante essentielle à la beauté d'un site. Passer 3 jours sur Photoshop c'est bien mais avoir un site agréable à lire c'est mieux, je ne répéterais jamais assez que vos visiteurs viennent pour votre contenu. Tout cela étant dit, il faut vraiment que je m'occupe de redesigner ce site en prenant en compte ces remarques sinon ça fait un peu cordonnier mal chaussé.
[edit du lendemain] : mauriz me signale un petit bookmarklet bien pratique permettant d'afficher facilement une baseline sur n'importe quelle page. Exit les backgrounds exotiques.