Espacement vertical entre les blocs de texte

Essayez ceci sur n’importe quel article : donnez à chaque titre la même marge au-dessus et en dessous — 24px de chaque côté — puis faites défiler la page et demandez-vous, pour chaque titre, à quelle section appartient-il ? Des marges symétriques rendent la réponse véritablement ambiguë : chaque titre flotte exactement à mi-chemin entre le texte qu’il clôt et celui qu’il ouvre. Donnez maintenant aux mêmes titres 32px au-dessus et 16px en dessous. Rien d’autre ne change, et pourtant chaque titre se rattache visiblement au contenu qui le suit, et la page se lit comme des sections plutôt que comme une pile uniforme de blocs.

L’espacement vertical du texte se résume à quatre règles : des écarts entre paragraphes de deux à trois unités de ligne de base, des marges de titre asymétriques — nettement plus d’espace au-dessus qu’en dessous —, des éléments de liste plus resserrés que les paragraphes, et chacune de ces distances prise dans l’échelle d’espacement plutôt que choisie élément par élément.

Cet article détaille chaque règle, la raison perceptuelle pour laquelle l’asymétrie fonctionne, et une pile complète travaillée — titre, paragraphes, sous-titre, liste — avec des valeurs réelles. Il applique la pensée par échelle du hub plus large spacing au problème spécifique du texte.

Combien d’espace faut-il entre les paragraphes ?

Mesurez-le en unités de ligne de base plutôt qu’en pixels choisis au cas par cas. L’unité de ligne de base vaut couramment la moitié de la taille du texte courant — un corps de 16px donne une unité de 8px — et des écarts entre paragraphes de deux à trois unités (16–24px) couvrent la plupart des réglages de texte.

Les bornes comptent des deux côtés. Un écart entre paragraphes a une seule tâche : être visiblement plus grand que l’écart entre les lignes à l’intérieur d’un paragraphe, sans devenir si grand que des paragraphes consécutifs cessent de se lire comme un seul texte. À 16px de texte courant avec un interligne de 1,5, l’espace blanc visible entre les lignes est d’environ 8px ; un écart entre paragraphes de 16px vaut le double — clairement une frontière, clairement pas une rupture de section. Un écart de 24px approche une ligne blanche entière et convient aux réglages plus aérés, éditoriaux. En dessous de deux unités de ligne de base, les paragraphes commencent à se confondre les uns dans les autres ; bien au-delà de trois, le texte se met à se désagréger en fragments.

Pourquoi les titres devraient-ils avoir plus d’espace au-dessus qu’en dessous ?

Parce qu’un titre est une étiquette pour la section qui le suit, non un séparateur entre deux sections — et l’espace est la façon de le dire. Le grand écart au-dessus annonce que la section précédente s’est terminée ; le petit écart en dessous lie le titre à son propre premier paragraphe.

Le fondement perceptuel est le principe de proximité issu des recherches de la Gestalt sur le regroupement : des éléments proches les uns des autres sont perçus comme allant ensemble, avant même toute lecture. Un lecteur qui parcourt du regard un titre symétrique doit le lire pour savoir quelle section il étiquette ; un titre asymétrique est regroupé correctement d’un coup d’œil. Un rapport qui fonctionne dans beaucoup de réglages de texte est d’environ 2:1 entre le dessus et le dessous — 32px au-dessus et 16px en dessous pour un titre principal.

À quel point les éléments de liste doivent-ils être resserrés ?

Plus resserrés que les paragraphes. Les éléments de liste sont des parties parallèles d’une même pensée, et leur espacement doit le dire : une unité de ligne de base (8px) entre les éléments, face à l’écart de paragraphe de 16px, fait lire la liste comme une seule unité. Si les éléments s’étendent régulièrement sur plusieurs lignes chacun, ils commencent à se comporter comme de petits paragraphes et méritent un cran supplémentaire — 11px ou 16px. Le bloc de liste dans son ensemble se sépare des paragraphes environnants par l’écart de paragraphe normal, de sorte que la liste se trouve dans le texte plutôt que de flotter entre les textes.

À quoi ressemble une pile d’article complète en chiffres ?

Chaque valeur ci-dessous est un cran d’une même échelle d’espacement — base 16, ratio 2, deux notes par doublement, ce qui génère 8, 11, 16, 23, 32 — et l’unité de ligne de base est la base divisée par deux, 8px :

Les deux niveaux de titre conservent à peu près l’asymétrie 2:1 (32/16 et 23/11), et le h3 descend d’une position d’échelle par rapport au h2 des deux côtés, si bien que la hiérarchie reste proportionnelle. Cet appariement n’est pas une coïncidence à maintenir à la main : avec deux notes par doublement, tout cran vaut exactement le double du cran situé deux positions plus bas — l’asymétrie de titre 2:1 découle de l’arithmétique même de l’échelle.

Ouvrez l’échelle derrière cette pile dans Scale Composer — les cinq valeurs du tableau sont des crans consécutifs d’une même échelle générée, et l’unité de ligne de base de 8px est la base de 16px divisée par deux.

Une note d’implémentation : la prose est l’endroit où les marges d’élément — plutôt que le gap d’un parent — restent l’outil naturel, car la bonne distance dépend de la paire (titre-vers-paragraphe diffère de paragraphe-vers-paragraphe) et un gap uniforme ne peut pas varier selon la paire. Le fusionnement des marges, si souvent un bug dans la mise en page d’application, joue en votre faveur ici : la marge basse de 16px du paragraphe rencontre la marge haute de 32px du h2 et fusionne à 32px — exactement la valeur voulue, sans traitement particulier.

D’où viennent les valeurs d’espacement ?

De la même échelle qui espace tout le reste. La formule size = base × ratio^(i/notes) transforme trois nombres en menu complet, et l’espacement du texte n’en utilise que la moitié inférieure : 8 pour les éléments de liste, 11 et 16 pour les écarts au niveau des paragraphes, 23 et 32 pour les abords des titres. Cela signifie que l’espacement du texte n’est pas un second système à entretenir — la pile d’article, le padding des composants et les gouttières de page se résolvent tous en crans d’une même échelle, ce qui fait qu’une page de contenu et un écran de produit issus de la même équipe se ressemblent.

Voyez l’asymétrie à l’œuvre

La façon la plus rapide d’intérioriser la règle des titres est de changer l’arithmétique qui la sous-tend et de regarder les paires bouger. Avec deux notes par doublement, la paire dessus/dessous distante de deux crans est exactement de 2:1 ; régénérez la même échelle avec trois notes par doublement et cette paire se détend à environ 1,6:1 — une asymétrie plus douce qui convient à une documentation dense, au prix d’une partie de la netteté. Jugez la différence par vous-même : ouvrez l’état de marge de titre et changez les notes.