Qu’est-ce que le rythme vertical (et en vaut-il la peine) ?

Le rythme vertical est la pratique consistant à faire des distances verticales d’une page — interlignes, écarts entre paragraphes, marges des titres — des multiples d’une même unité partagée, pour que les lignes de texte reviennent à intervalle régulier au fil de la page. Sur une base de 16px, l’unité est généralement de 8px : les lignes de corps de texte se posent tous les 24px, un titre occupe une ligne de 48px, et les écarts entre blocs mesurent 16, 24 ou 32px. En vaut-il la peine ? Dans sa forme pragmatique — interlignes et marges verticales calés sur l’unité — oui, à faible coût. Dans sa forme d’imprimerie stricte — chaque ligne de base de glyphe fixée à une grille globale — rarement sur le web.

Cet article fait partie de notre guide de l’échelle typographique. Il explique ce que le rythme apporte au lecteur, comment le construire avec des chiffres réels, d’où vient le terme, et où la courbe de coût s’infléchit.

Pourquoi le rythme vertical fonctionne-t-il sur un lecteur ?

Le lecteur ne voit jamais la grille. Ce qu’il perçoit, c’est le retour : lire est un mouvement répétitif où l’œil balaie une ligne, descend, puis recommence, et quand chaque descente couvre la même distance — ou un multiple net de celle-ci — le mouvement devient prévisible et s’efface de la conscience. Quand chaque bloc définit son propre espacement, chaque transition exige au contraire un petit recalibrage. Une analogie utile vient de la musique : un batteur régulier se fond dans la chanson, et on ne remarque le tempo que lorsqu’il trébuche. Le rythme ne rend pas une page plus décorée ; il la rend plus calme, et c’est le calme dont a besoin la lecture au long cours. C’est pourquoi l’effet est facile à ressentir et difficile à désigner — le lecteur perçoit une sérénité sans pouvoir en nommer la source.

Comment construire un rythme vertical avec des chiffres réels ?

Dérivez une unité de ligne de base égale à la moitié de la taille de police de base — 8px sur une base de 16px — puis appliquez deux règles : les interlignes sont des multiples entiers ou demi de l’unité, et les marges verticales sont des multiples entiers. Voici une pile titre-plus-corps sur une base de 16px avec des tailles en quarte juste :

Le total est un nombre entier d’unités, et chaque frontière intermédiaire l’est aussi — donc ce qui suit la pile démarre sur le temps, quelle que soit la façon dont le contenu au-dessus se réagence. Cette additivité est toute l’astuce : le rythme n’est pas une propriété qu’on applique à la fin, mais la conséquence du fait que chaque hauteur est un multiple du même nombre.

Scale Composer construit les deux moitiés à partir d’un seul système : les interlignes s’accrochent à la ligne de base base ÷ 2, et les paliers d’espacement dérivent de la même échelle — les marges et les interlignes partagent ainsi une origine au lieu d’être deux estimations séparées.

Ouvrez la pile dans Scale Composer — titre, corps et liste sur une base de 16px avec la ligne de base de 8px derrière le texte ; comptez la hauteur de n’importe quel bloc en lignes de grille et elle tombe juste.

Une réserve honnête : les images, les intégrations et les contrôles de formulaire arrivent avec des hauteurs arbitraires. Soit vous arrondissez les hauteurs des médias à l’unité, soit vous laissez chaque section relancer le rythme à son bord supérieur — beaucoup de systèmes pragmatiques font ce dernier choix et acceptent que le rythme vive au sein des sections plutôt qu’à travers toute la page.

D’où vient le terme « leading » ?

Contexte historique, utile à connaître parce que le vocabulaire a survécu à la mécanique : en typographie au plomb, l’espace entre les lignes était réglé avec des lamelles de plomb physiques insérées entre les rangées de caractères métalliques — d’où leading, toujours le terme standard en anglais pour l’interligne. La physique rendait le rythme automatique : les lignes de caractères dans une colonne s’empilaient à des hauteurs identiques, si bien que les colonnes adjacentes s’alignaient par construction, et non par discipline. Le web a hérité du mot mais pas de la physique — CSS répartit l’espace supplémentaire au-dessus et au-dessous du texte (demi-interligne), et rien ne s’accroche à quoi que ce soit par défaut. Le rythme vertical sur le web est donc un choix de recréer une propriété que l’imprimé obtenait gratuitement.

L’alignement strict sur la ligne de base en vaut-il la peine sur le web ?

La version stricte — les lignes de base des glyphes fixées à une grille de page globale, comme dans un magazine imprimé — va à l’encontre de la façon dont CSS met en page le texte. Une boîte de ligne centre son contenu verticalement : l’espace supplémentaire est réparti au-dessus et au-dessous des glyphes, et l’endroit où la ligne de base se pose réellement dépend des métriques de la police, qui diffèrent entre les polices et leurs polices de repli. Fixer les lignes de base implique donc des corrections de décalage par police, des compensations de padding, et un réajustement à chaque fois qu’une police web se charge tardivement ou remplace une police de repli. Les techniques existent, mais elles sont fragiles exactement là où le web bouge : réagencement responsive, réglages de police de l’utilisateur, contenu intégré.

Et le gain est plus faible que dans l’imprimé. L’argument le plus fort en faveur de l’alignement strict, ce sont des colonnes de texte placées directement côte à côte, où une ligne de base désalignée se voit dans la gouttière — courant dans les magazines, plus rare dans les mises en page web. En pratique, l’essentiel de la stabilité perçue vient des deux décisions bon marché : interlignes et marges verticales en multiples de l’unité. La version pragmatique conserve celles-ci et laisse de côté la décision coûteuse et subtile. Si vous construisez une véritable mise en page éditoriale multi-colonnes, le calcul change et la rigueur commence à rapporter ; pour la plupart des produits, non.

Entendez le tempo en le brisant

Le moyen le plus rapide de décider ce que vaut le rythme pour votre produit, c’est une comparaison : ouvrez la même pile avec le rythme brisé — des interlignes définis comme des multiplicateurs par élément sans rapport entre eux plutôt que comme des multiples de la ligne de base — et basculez entre les deux. Si votre produit est riche en texte, la différence est généralement facile à ressentir et difficile à formuler ; cette sensation est la qualité que l’unité achète. Prenez ensuite les règles pragmatiques — unité de base ÷ 2, interlignes et marges calés dessus — et laissez la grille stricte à l’imprimé.