Espacement fluide : une seule pente pour tout

Une échelle d’espacement fluide est un système d’espacement dont les valeurs glissent avec la fenêtre d’affichage au même rythme que la typographie qu’elles entourent : les marges, les gouttières et le padding évoluent dans la même proportion que le texte, si bien que la relation entre un titre et l’espace qui l’entoure reste identique à chaque largeur d’écran. Une typographie fluide sur un espacement fixe n’est qu’un demi-système — le texte glisse pendant que son conteneur reste immobile, et la composition change discrètement de forme à mesure que l’écran s’élargit.

Ce guide fait partie de notre guide de la typographie fluide et couvre le volet de l’espacement : pourquoi l’espacement doit glisser quand la typographie glisse, comment le partage d’une seule pente maintient les proportions verrouillées, et le détail d’arrondi qui permet aux valeurs glissantes de rester sur une grille.

Pourquoi une typographie fluide a-t-elle besoin d’un espacement fluide ?

Prenons une configuration fluide courante : la taille de police racine glisse de 16px sur une fenêtre de 360px à 18px sur 1280px. Toute taille exprimée en rem augmente de 12,5 % sur cette plage — un token de titre de 2.375rem s’affiche à 38px du côté étroit et à 42,75px du côté large.

Donnez maintenant à ce titre une marge fixe de 24px en dessous. À 360px, le rapport titre/marge est de 38 / 24 ≈ 1,58. À 1280px, il est de 42,75 / 24 ≈ 1,78. Rien n’a cassé et rien n’a sauté — mais la proportion entre le texte et l’espace qui l’entoure a dérivé de 12,5 %, soit toute la croissance de la typographie. La mise en page large est, de façon mesurable, plus serrée autour de ses titres que la mise en page étroite, d’une manière que personne n’a décidée.

Une analogie utile : c’est comme agrandir le sujet d’une photographie sans agrandir le cadre autour de lui. Chaque partie est correcte prise isolément ; c’est la relation entre elles qui a changé. Et c’est la relation que l’œil lit réellement — le texte et l’espace qui l’entoure sont perçus comme une seule composition, non comme deux valeurs indépendantes, et la proportion entre eux constitue l’essentiel de ce que veut dire « bien espacé ». Quand la moitié de la composition se met à l’échelle et l’autre non, le design à 1280px n’est pas celui qui a été approuvé à 360px ; c’en est un légèrement différent.

Comment une pente partagée maintient-elle des proportions constantes ?

Le principe : l’espacement glisse sur la même pente que la typographie. Si la typographie croît de 12,5 % entre les fenêtres 360 et 1280, chaque distance de composition croît de 12,5 % sur exactement la même plage. Tout rapport entre une taille de texte et une valeur d’espacement devient alors constant — la dérive disparaît par construction.

C’est ainsi que le mode fluide de Scale Composer exporte l’espacement — et le mécanisme est presque décevant de simplicité : un seul clamp sur la taille de police racine porte le glissement, et les tokens d’espacement sont de simples valeurs en rem qui le suivent, exactement comme le font les tailles de police. Un pas d’espacement de 1.5rem s’affiche à 24px lorsque la racine est à 16 et à 27px lorsqu’elle atteint 18 — le maximum du pas vaut 1,125× son minimum parce que le maximum de la racine vaut 1,125× son minimum. Aucun second clamp n’existe où que ce soit : « une seule pente » n’est pas une discipline que suivraient les valeurs d’espacement, mais un fait structurel — il n’y a qu’une seule expression glissante dans toute la feuille de style, et tout ce qui est en rem en hérite.

La dérive, côte à côte — même titre, marge fixe contre marge fluide :

Ouvrez l’export d’espacement fluide dans Scale Composer — le panneau CSS écrit chaque token d’espacement sous forme de valeur en rem, avec sa plage de pixels fluides en commentaire de fin de ligne, si bien que vous pouvez lire le glissement partagé directement dans l’export.

Pourquoi arrondir l’espacement fluide à des pas d’un demi-rem ?

Voici la tension que la version naïve ignore : les systèmes d’espacement tirent leur valeur de la quantification. Une échelle d’espacement est un petit ensemble de distances autorisées — une grille — et le fait que « chaque écart est l’une d’une poignée de valeurs » constitue une grande part de ce qui maintient une interface volumineuse cohérente. L’espacement fluide brut en CSS détruit cela : sur une fenêtre de 700px, une valeur qui glisse de 16→18px passe par ≈16,74px — une distance qui n’est sur aucune grille, et différente encore à 701px.

L’export de Scale Composer résout cela avec la fonction round() de CSS (voir round() sur MDN), qui aligne une valeur calculée sur le multiple le plus proche d’un pas que vous choisissez. Chaque token d’espacement en est enveloppé :

--space-md: round(nearest, calc(1rem * var(--spacing-density)), 0.5rem);  /* 16→18px (fluide) */

La variable de densité vaut 1 par défaut ; réglez-la à 0.75 ou 1.25 et chaque valeur d’espacement se resserre ou se détend de ce facteur avant l’arrondi.

L’enveloppe round(…, 0.5rem) aligne le résultat sur le demi-rem le plus proche — et la subtilité qui fait fonctionner cela, c’est que le rem lui-même glisse. Sous le clamp racine, 0.5rem vaut 8px du côté étroit et 9px du côté large, si bien qu’une valeur peut être quantifiée en unités de grille et fluide en pixels en même temps : la grille glisse sous les valeurs qui s’y alignent. Parce que le token et le pas d’arrondi sont tous deux des quantités en rem, leur rapport ne change jamais avec la fenêtre — le token ci-dessus vaut 2 × 0.5rem à chaque largeur, s’affichant à 16px du côté étroit et à 18px du côté large, sans aucun saut d’un demi-pas où que ce soit entre les deux. Voilà la tension glissement-contre-grille résolue : fluide en pixels, stable sur la grille.

Qu’est-ce qui doit rester fixe ?

Tout ne doit pas suivre la pente. La distinction utile se situe entre les distances de composition et les constantes optiques :

• Les bordures restent en px. Un filet de 1px est une constante optique — il se lit comme « une ligne » à chaque fenêtre, et 1,125px n’achète rien d’autre que du flou.
• Les rayons restent généralement fixes. Un coin de 6px se lit comme la même forme à 360px et à 1280px ; le mettre à l’échelle modifie la géométrie perçue d’un composant plus qu’il ne préserve une quelconque composition.
• Les icônes restent généralement fixes — ou évoluent par paliers avec les tailles de typographie à côté desquelles elles se trouvent, plutôt que de glisser indépendamment.

La question qui tranche : cette valeur participe-t-elle à la proportion entre le texte et l’espace ? Les marges, le padding, les gouttières et les écarts, oui — ils glissent. Les filets et les petits détails géométriques, non — ils tiennent. (La façon dont les pas d’espacement eux-mêmes sont choisis relève du territoire du système d’espacement ; le mode fluide change la manière dont les pas s’affichent, pas les pas qui existent.)

Lisez la pente sur votre propre export

Le moyen le plus rapide d’intérioriser la pente partagée est de changer un seul nombre et de regarder tout suivre : ouvrez l’export du même système et repérez --spacing-density — chaque token d’espacement s’en trouve multiplié avant l’arrondi, si bien que le régler à 0.75 dans votre feuille de style resserre toute la couche d’espacement d’un même facteur tandis que chaque clamp conserve sa pente. La densité et la fluidité s’avèrent être des molettes indépendantes : l’une met la grille à l’échelle, l’autre la fait respirer.