Grille de ligne de base vs grille 8 pt : la différence

Une grille de ligne de base et une grille 8 pt quantifient des choses différentes. La grille de ligne de base quantifie le rythme du texte — les lignes horizontales invisibles sur lesquelles reposent les lignes de texte. La grille 8 pt quantifie l’espace — la distance qui sépare les éléments et leur taille. Elles répondent à deux questions différentes, et se combinent proprement lorsque la ligne de base est dérivée de la taille du texte courant.

Cet article explique ce que contrôle chaque grille, comment leur faire partager un seul quantum, et quelle part de la tradition de l’imprimé survit réellement au contact du CSS. C’est un angle des fondations plus larges de l’espacement.

Que contrôle une grille de ligne de base ?

En typographie, la ligne de base est la ligne invisible sur laquelle reposent les lettres. Une grille de ligne de base répète cette ligne à intervalle fixe le long de la page — tous les 8 px, par exemple — et demande à chaque ligne de texte de se poser sur l’une de ces répétitions. C’est un héritage de la composition imprimée, où des colonnes placées côte à côte devaient s’aligner ligne pour ligne, et où le texte imprimé au dos d’une page fine transparaissait moins lorsque ses lignes se trouvaient directement derrière celles du recto.

La grille de ligne de base régit la dimension verticale de la typographie : les interlignes, la hauteur finale des blocs de texte, et l’intervalle régulier auquel les lignes de texte reviennent. Elle ne dit rien de l’espacement horizontal, ni des éléments qui ne sont pas du texte.

Que contrôle plutôt la grille 8 pt ?

L’espace entre et autour des choses : les marges, le padding, les écarts, et la taille des composants en multiples de 8. Elle est indifférente au rythme du texte — une carte peut avoir un padding parfaitement calé sur la grille de 8 alors que le paragraphe qu’elle contient tourne sur un interligne de 22 px qui ne se pose jamais nulle part en particulier. Une grille décide à quelle distance les choses se situent ; l’autre décide où reviennent les lignes de texte. Aucune n’implique l’autre, ce qui explique qu’une équipe puisse adopter la grille 8 pt tout en livrant des pages sans aucun rythme vertical.

Comment les deux grilles se combinent-elles ?

En dérivant l’unité de ligne de base de la taille du texte courant — la moitié est une convention répandue. Un texte courant à 16 px donne une ligne de base de 8 px, et les deux grilles partagent désormais un seul quantum : l’espacement de mise en page tourne sur des multiples de 8, et les interlignes aussi. Dans Scale Composer, cette dérivation est intégrée — la ligne de base vaut la moitié de la base, donc le même nombre qui génère les pas d’espacement définit l’unité de rythme.

Voici ce que cela donne avec des tailles de texte tirées d’une échelle (base 16, ratio 2, deux notes par intervalle) :

Chaque interligne et chaque marge verticale est un multiple de 8, si bien que toute pile de ces styles totalise un nombre entier d’unités de ligne de base — texte et mise en page restent commensurables quelle que soit la façon dont on les combine.

Ouvrez cette échelle avec sa ligne de base dans Scale Composer — la base de 16 px dérive la ligne de base de 8 px, affichée aux côtés des tailles de texte que la même échelle génère, pour que vous puissiez comparer chaque interligne à l’unité de rythme.

L’alignement strict sur la ligne de base fonctionne-t-il sur le web ?

Pas vraiment au sens de l’imprimé, et il vaut la peine d’être honnête sur les raisons. Le CSS construit le texte à partir de boîtes de ligne : le texte est centré à l’intérieur de son interligne, l’espace supplémentaire étant réparti au-dessus et en dessous, plutôt que posé sur une ligne de base que l’on pourrait fixer. Forcer de vraies lignes de base sur une grille globale demande, pour chaque style, un calcul de décalage qui dépend des métriques de la police — un calcul qu’il faut refaire chaque fois qu’une police, une taille ou une valeur par défaut du navigateur change.

Le compromis pragmatique conserve l’essentiel du bénéfice pour une fraction de l’effort : faire des interlignes et des marges verticales entre blocs de texte des multiples de l’unité de ligne de base. Les blocs de texte consomment alors des nombres entiers d’unités de rythme, même si les lignes de base à l’intérieur ne sont pas fixées une à une. Le rythme tient entre les éléments — titres, paragraphes, cartes, légendes — qui est de toute façon l’endroit où il est le plus facile à percevoir.

Pourquoi le rythme importe-t-il si les lecteurs ne voient pas la grille ?

Les lecteurs ne perçoivent pas la grille elle-même — ce qu’ils perçoivent, c’est le retour de l’œil : finir une ligne, descendre, atterrir sur la suivante à intervalle régulier. Quand cet intervalle se maintient à travers les paragraphes, les légendes et les éléments de liste, la page se lit comme un seul rythme continu ; quand il change à chaque frontière, chaque transition coûte un petit réajustement du regard. La grille de ligne de base est un moyen d’atteindre cette régularité, pas ce que l’on regarde — ce qui explique aussi pourquoi la version pragmatique ci-dessus suffit généralement. Le lecteur éprouve les retours, pas le mécanisme qui les sous-tend.

Prolongez le rythme dans les colonnes

La discipline de la ligne de base couvre l’axe vertical ; la mise en page en a aussi un horizontal. Ouvrez la vue grille avec la même échelle chargée — les largeurs de colonne, les gouttières et les marges progressent selon la même échelle qui a défini la ligne de base, avec 4 colonnes sur mobile, 8 sur tablette et 12 sur bureau. Faites monter et descendre une gouttière le long de l’échelle et les deux axes restent expliqués par une seule base : le rythme vertical à partir de sa moitié, la structure horizontale à partir de ses pas.