Pas facile d’avoir du rythme (vertical) !

Le Rythme Vertical est un concept récurrent dans le monde du Web, un but ambitieux à atteindre pour certains, une douce utopie ou encore un truc inconnu pour d’autres.

Toujours est-il que dans la pratique, on est encore loin d’avoir atteint ce Graal de l’harmonie parfaite entre les contenus d’une page web.

Gardez le rythme…

C’est quoi le rythme vertical ?

En typographie, le Rythme Vertical est l’agencement harmonieux et stable des contenus et du texte les uns par rapport aux autres dans le sens vertical de la lecture.

De mauvais espacements « cassent » le rythme général de la page, un peu comme une mélodie qui deviendrait un peu dissonante voire cacophonique.

Côté intégration web, le rythme vertical dépend de plusieurs paramètres : la taille de police, ses marges et surtout la hauteur de ligne (le fameux et très mal connu line-height).

Un article du site 24ways datant de 2006 fait office de référence dans le domaine : Compose to a Vertical Rhythm. Et si vous préférez la langue de Molière, penchez-vous sur l’article de 2007 de David Larlet « L’importance du rythme vertical en design CSS ».

Pas facile d’avoir du rythme

Du fait de la complexité, et de notre méconnaissance, des propriétés en jeu (line-height, font-size, margin, padding) et – parfois – de leur manque de cohérence avec certains outils graphiques tels que Photoshop, il est très loin d’être évident d’obtenir un équilibre satisfaisant. Beaucoup de designers web s’y sont cassé les dents.

Pour commencer, les unités de mesure ne nous facilitent guère la vie :

  • le pixel (px) permet de calculer très simplement et harmonieusement les espaces, mais c’est une unité figée non agrandissable ni accessible,
  • le em est fluide mais complique horriblement les calculs surtout lors d’imbrications d’éléments,
  • le rem serait le meilleur compromis mais souffre encore d’un léger manque de compatibilité (IE9 mini).

« Plus ou moins » automatisable

Pour éviter de réinventer la roue et de s’arracher des cheveux à tenter de créer son propre système de rythme vertical, voici quelques outils qui vous génèrent automatiquement des CSS selon vos contraintes :

Il existe également quelques frameworks CSS dédiés à la typographie :

En les décortiquant, vous constaterez sans peine que leurs auteurs y ont laissé eux-mêmes quelques cheveux et que le Saint Graal en la matière n’a pas encore été découvert !

Sauf que nous, on a des vrais clients !

Le rythme vertical est une bénédiction pour la lecture d’un article sur le Web, sa mise en oeuvre devrait donc faire partie intégrante des connaissances et des compétences de tout bon intégrateur. Mais ça, c’est la théorie.

En pratique, on a des clients.

Et en pratique, systématiquement lors de chaque projet web, la première étape de l’intégrateur est de (re)définir toutes les espacements pour se conformer aux gabarits graphiques du client.

Pas dans un framework !

Les particularités et exceptions des contenus des maquettes clients sont toujours nombreuses et nécessitent quasiment à chaque fois des adaptations au cas par cas : les titres de l’encart publicitaire du milieu doivent être collés au texte, les contenus de la fenêtre modale doivent être plus condensés, dans les blocs en exergue les paragraphes doivent être collés au titre… mais pas trop. Etc.

Puisqu’il faudra définir tous les espacements, tailles et hauteurs au cas par cas pour chacun des clients, un Framework CSS imposant un rythme vertical n’est pas forcément l’idéal.

En effet, le processus de mise en forme général serait celui-ci :

  1. Le navigateur administre initialement et par défaut sa feuille de styles et applique des marges, tailles de police et hauteurs de lignes sur l’ensemble des contenus tels que les titres, les paragraphes, les listes, les citations, etc.
  2. L’outil de « reset », ou le Framework CSS, écrase ces valeurs naturelles par celles d’un rythme vertical idéal.
  3. Vos styles personnels, adaptés aux besoins graphiques du projet client, viennent écraser une seconde fois les valeurs déjà existantes.

Cette double couche de styles a forcément des répercussions négatives sur la taille du fichier CSS et sa maintenabilité.

Voilà pourquoi les valeurs de margin et line-height présentes dans les anciennes versions de KNACSS et appliquées principalement aux titres et paragraphes, ont finalement été retirées pour plus de souplesse.

Gardez le rythme

Attention à ne pas tout prendre au pied de la lettre, je n’ai jamais écrit qu’il ne faut pas tendre vers un rythme vertical harmonieux ni que tous les frameworks « typographiques » sont mauvais, loin de là. Il est évident que tout ce qui peut améliorer la lisibilité et le confort doit être mis en oeuvre. Et cela passe parfois par des bases communes et des « reset ».

En revanche, appliquer les styles par défaut d’un framework sur les titrages, les paragraphes, les listes puis les écraser ensuite pour les besoins du client me semble un peu fastidieux. Surtout lorsque c’est systématique.

L’idéal serait bien entendu de designer les gabarits graphiques en tenant compte dès en amont les contraintes de rythme vertical. Je dis bien « rythme vertical », pas uniquement une grille de mise en forme.

Conclusion

Attention, accrochez-vous, la conclusion est aussi pertinente que concise : « ça dépend du projet ».