Qu’est-ce qu’une échelle d’espacement ?

Une échelle d’espacement est un ensemble court et ordonné de distances autorisées — les seules valeurs qu’un design utilise pour les écarts, le remplissage et les marges. Au lieu de choisir n’importe quel nombre, vous choisissez un échelon dans un menu d’environ huit : 8, 11, 16, 23, 32, 45, 64. Les échelles bien construites sont non linéaires — denses du côté des petites valeurs, clairsemées du côté des grandes — parce que cela correspond à la façon dont on perçoit l’espace.

Cet article explique pourquoi les échelons ne devraient pas être espacés régulièrement, comment trois nombres génèrent une échelle entière, combien d’échelons les produits ont tendance à nécessiter, et comment les nommer. C’est la pièce qui transforme les conventions de grille du hub espacement plus large en un système complet.

Pourquoi les échelons ne devraient-ils pas être espacés régulièrement ?

Le menu évident est linéaire — les 8, 16, 24, 32, 40, 48, 56, 64 de la grille de 8 points. Il échoue aux deux extrémités. Du côté des petites valeurs, il est trop grossier : le saut de 8 à 16 double la distance, sans rien entre les deux pour l’espacement serré à l’intérieur des composants compacts — l’écart que les demi-échelons de 4 pt existent pour combler. Du côté des grandes valeurs, il est trop fin : 56 et 64 sont pratiquement impossibles à distinguer comme écarts de section, si bien que le menu dépense quatre options — 40, 48, 56, 64 — sur des distinctions que peu de lecteurs remarqueront. Des options qui n’ajoutent aucune amplitude expressive invitent quand même à l’incohérence.

La raison sous-jacente est perceptuelle. La différence entre 8px et 12px est évidente — un écart vaut une fois et demie l’autre. La différence entre 72px et 80px est à peine visible, même s’il s’agit des mêmes 8 pixels. L’œil lit des proportions, pas des quantités absolues. La recherche sur la perception décrit ce schéma en termes généraux comme la loi de Weber-Fechner — nous avons tendance à remarquer les changements proportionnellement au stimulus qu’ils modifient. C’est une observation sur la perception plutôt qu’une règle de design, mais cela explique pourquoi une échelle qui semble régulièrement échelonnée est une échelle où chaque échelon croît selon un ratio, et non selon un incrément fixe.

Comment génère-t-on une échelle d’espacement ?

À partir de trois nombres et d’une formule :

size = base × ratio^(i/notes)

• Base ancre l’échelle — généralement la taille du texte courant, de sorte que l’espacement et la typographie croissent depuis la même racine.
• Ratio détermine la vitesse de croissance des échelons — un ratio de 2 signifie que l’échelle double à chaque intervalle.
• Notes subdivisent chaque intervalle. Le terme emprunte à la musique, où une octave se divise en notes : deux notes par doublement placent un échelon supplémentaire entre 16 et 32.

Avec une base de 16, un ratio de 2 et deux notes :

Chaque échelon est environ 41 % plus grand que le précédent (2^(1/2) ≈ 1,414). Comparez cela au menu linéaire : du côté des petites valeurs, l’échelle propose 8, 11 et 16 là où le linéaire ne proposait que 8 et 16 ; du côté des grandes valeurs, elle saute de 32 → 45 → 64 en deux mouvements là où le linéaire en dépensait quatre. Dense là où les distinctions fines sont visibles, clairsemée là où elles ne le sont pas — la forme perceptuelle, produite par l’arithmétique.

Voyez-le se recalculer en direct : ouvrez cette échelle dans Scale Composer — faites glisser le ratio et chaque échelon se déplace de concert ; ajoutez une note et les valeurs intermédiaires apparaissent. Les mêmes trois nombres pilotent l’échelle typographique et la ligne de base (la moitié de la base), de sorte que l’espacement et la typographie restent liés par construction.

Combien d’échelons une échelle d’espacement nécessite-t-elle ?

Entre 6 et 10 convient à de nombreux produits. Une façon utile de les répartir : un ou deux micro-échelons pour l’intérieur des composants (écarts d’icônes, remplissage des chips), trois ou quatre échelons intermédiaires pour l’espace entre éléments et composants, et deux ou trois grands échelons pour les sections et les régions de page. Moins de six force des compromis à une extrémité ou à l’autre ; bien plus de dix et le menu cesse d’être court — la fatigue décisionnelle que l’échelle était censée éliminer revient en douce. Les produits à forte densité de données se situent en haut de cette plage (plus de notes par intervalle) ; les sites riches en contenu se placent confortablement en bas.

Comment nommer les échelons ?

Deux conventions dominent en pratique : numérique (space-1 à space-7) et tailles de t-shirt (xs à 3xl). Les nombres gardent l’ordre évident et s’étendent sans peine ; les noms de t-shirt sont plus faciles à retenir mais n’offrent aucun nom naturel entre md et lg si un échelon est inséré plus tard. Les deux fonctionnent — ce qui fait mal, c’est de changer une fois que les noms se sont répandus dans les composants et les feuilles de style. La question du nommage devient concrète dès que l’échelle est exportée sous forme de tokens d’espacement, et elle mérite là son propre traitement.

Rendez la même échelle fluide

Une échelle fixe répond à « quelles distances sont autorisées » — mais la même mise en page doit aussi fonctionner à 360px et à 1440px. Ouvrez cette échelle en mode fluide : l’export passe d’échelons en pixels fixes à des expressions CSS clamp() qui glissent entre un minimum et un maximum, et chaque échelon partage la même pente de viewport — de sorte que l’échelle conserve ses proportions internes tandis que les tailles absolues s’adaptent à l’écran. Le menu reste court ; il apprend simplement à respirer.