davidbgk
/
larlet-fr-david

title:      ★ L&#39;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&#39;ergonomie web par Amélie Boucher
contextual_url3:    20071117-12-regles-d-ergonomie-web-par-amelie-boucher

<p>Franchement déçu par la qualité des <a href="http://forum.alsacreations.com/concours/cssr2007/fiche.php">sites participant au Concours Cascading Style Summer Refresh</a>, je trouve qu'il y a un problème récurrent chez les participants&nbsp;: il manque la notion de <strong>rythme vertical</strong> dont je n'avais pas parlé lors de mon précédent billet sur <a href="https://larlet.fr/david/biologeek/archives/20070522-des-css-de-qualite/">les CSS de qualité</a> 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.</p>

<h2>Le Feng Shui du design web</h2>


<p>D'après Wikipédia&nbsp;:</p>


<blockquote><p>Le <a href="http://fr.wikipedia.org/wiki/Feng_shui">Feng shui</a> 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.</p></blockquote>


<p>Si je le rapproche ici du rythme vertical c'est qu'il <strong>procure exactement la même sensation d'harmonie et de stabilité à un site</strong>, on peut passer ainsi d'un design amateur à quelque chose de plus professionnel, le rythme vertical peut même parfois <a href="http://www.markboultondesign.com/">se suffire à lui-même</a>.</p>


<p>Mais de quoi parle-t-on concrètement&nbsp;?</p>


<p>C'est une notion ancienne qui vient de l'imprimerie et qui prend en compte <strong>l'alignement et l'esthétique typographique</strong> 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.</p>


<p>Arrêtons nous un instant sur un exemple pour bien visualiser ce dont on parle, celui donné par <a href="http://www.alistapart.com/articles/settingtypeontheweb">Wilson Miner dans Setting Type on the Web to a Baseline Grid</a>. Lorsque l'on analyse cette page&nbsp;:</p>


<p><a href="http://www.alistapart.com/d/settingtypeontheweb/example.html"><img src="/static/david/biologeek/images/rythme_vertical/exemple_ala.png" alt="Exemple d&#039;une page ayant un rythme vertical" style="display:block; margin:0 auto;" /></a></p>


<p>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&nbsp;:</p>


<p><a href="http://www.alistapart.com/d/settingtypeontheweb/example_grid.html"><img src="/static/david/biologeek/images/rythme_vertical/exemple_ala_grille.png" alt="Exemple d&#039;une page ayant un rythme vertical" style="display:block; margin:0 auto;" /></a></p>


<p>L'article de référence pour bien comprendre comment arriver à un tel résultat est pour moi celui de <a href="http://24ways.org/">24 ways</a> intitulé <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">Compose to a Vertical Rhythm</a>. Petite parenthèse, <strong>je recommande d'ailleurs vivement la lecture de ce site</strong> 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&nbsp;!</p>


<p>Il peut aussi être intéressant d'avoir recours à l'article <a href="http://www.thenoodleincident.com/tutorials/typography/index.html">Sane CSS Sizes</a> si vous voulez vraiment comprendre l'enfer du rythme vertical appliqué aux différents navigateurs (c'est surtout <a href="http://www.thenoodleincident.com/tutorials/typography/template.html">le template final</a> qui est intéressant). L'article <a href="http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">Add and delete vertical space in measured intervals</a> sur Web Typography est une bonne introduction aussi.</p>


<h2>Gardez le rythme&nbsp;!</h2>


<p>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&nbsp;:</p>


<p><img src="/static/david/biologeek/images/rythme_vertical/markboulton_without_incremental_leading.png" alt="Exemple d&#039;une page ayant un rythme vertical disgracieux" style="display:block; margin:0 auto;" /></p>


<p>Mark Boulton dans son récent article intitulé <a href="http://www.markboulton.co.uk/journal/comments/incremental_leading/">Incremental leading</a> donne une solution élégante pour remédier à ce problème&nbsp;:</p>


<p><img src="/static/david/biologeek/images/rythme_vertical/markboulton_with_incremental_leading.png" alt="Exemple d&#039;une page ayant un rythme vertical ingénieux" style="display:block; margin:0 auto;" /></p>


<p>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.</p>


<h2>Une solution clés en main</h2>


<p>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&nbsp;:</p>

<ul>
<li><a href="http://topfunky.com/baseline-rhythm-calculator/">Baseline Rhythm Calculator</a></li>
<li><a href="http://drewish.com/tools/vertical-rhythm">CSS with vertical rhythm</a></li>
</ul>

<p>Mais <strong>il y a maintenant encore mieux</strong> avec l'arrivée de <a href="http://code.google.com/p/blueprintcss/">BluePrint, le framework CSS</a> qui se soucie un peu de la typographie, et qui <a href="http://bjorkoy.com/past/2007/8/11/release_blueprint_04/">depuis la version 0.4</a> est enfin en <em>em</em> ce qui décuple son intérêt&nbsp;! Je ne l'ai pas (encore) testé en conditions réelles mais ça semble vraiment être ce que j'attendais depuis si longtemps...</p>


<p>Le seul reproche que l'on pourrait lui faire est le manque de sémantique dans le nom des balises, mais <a href="http://www2.jeffcroft.com/blog/2007/aug/09/myth-content-and-presentation-separation/">Jeff Croft a déjà épilogué là-dessus</a> 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 :-).</p>


<p>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 <strong>c'est vraiment une composante essentielle à la beauté d'un site</strong>. 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é.</p>


<p><strong>[edit du lendemain]</strong>&nbsp;: <a href="http://svay.com/">mauriz</a> me signale un <a href="http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/">petit bookmarklet</a> bien pratique permettant d'afficher facilement une baseline sur n'importe quelle page. Exit les backgrounds exotiques.</p>