Grille 4pt vs 8pt : quand utiliser laquelle
Les grilles 4pt et 8pt sont des couches d’une même méthode d’espacement, non des systèmes rivaux : les multiples de 8 gèrent l’espacement au niveau de la mise en page — les écarts entre composants et sections — tandis que les multiples de 4 gèrent l’espacement interne fin, comme le padding des icônes et l’écart entre un libellé et son champ, ainsi que la typographie. La vraie question n’est pas quelle grille adopter, mais à quelle couche appartient chaque distance.
Cet article explique ce qui sépare les deux grilles, ce qui pousse un produit vers la couche 4pt, pourquoi les petites distances ont besoin de pas plus fins dès le départ, et l’habitude de documentation qui empêche les deux couches de s’effondrer en un seul menu bruyant. Il s’appuie sur les fondations abordées dans le hub système d’espacement.
Quelle est la différence entre une grille 4pt et une grille 8pt ?
Seulement le pas. Une grille 8pt autorise 8, 16, 24, 32, 40… ; une grille 4pt autorise 4, 8, 12, 16, 20, 24… — deux fois plus de valeurs sous un même plafond. Chaque valeur qu’une grille 8pt permet, une grille 4pt la permet aussi, et c’est pourquoi il vaut mieux décrire la paire comme une seule grille avec un demi-pas que comme deux systèmes.
Le compromis est direct. Un menu plus court signifie moins de décisions et plus de cohérence entre des écrans conçus par des personnes différentes ; un menu plus fin offre une plus grande amplitude expressive aux petites tailles, et plus de marge pour diverger. Aucun ne l’emporte totalement, si bien que les systèmes matures ont tendance à faire tourner les deux à la fois, chacun cantonné à sa propre couche :
- Multiples de 8 pour la mise en page : l’espace entre composants, l’espace entre sections, le padding des conteneurs, les hauteurs fixes de composants.
- Multiples de 4 à l’intérieur des composants : les écarts icône-libellé, le padding dans les puces et badges, la distance d’un libellé à son champ — et la typographie, où les tailles et les interlignes tombent souvent sur des multiples de 4.
Les conventions de plateforme opèrent aussi à ce niveau ; les directives d’interface humaine d’Apple sur la mise en page sont un exemple des recommandations de marge et d’espacement avec lesquelles une grille doit coexister sur une plateforme réelle.
Quand un produit a-t-il besoin de la couche 4pt ?
Trois pressions poussent un produit au-delà des purs multiples de 8 :
- La densité des données. Tableaux, tableaux de bord, panneaux d’administration : dans une ligne de 32 px de haut, 8 px de padding de cellule représentent déjà un quart de la hauteur. Les produits denses ont besoin de 4 et de 12 — des valeurs que le menu 8pt ne possède pas.
- Les composants compacts. Puces, badges, boutons de barre d’outils, éléments de liste de la barre latérale : à l’intérieur d’un élément de 24 px de haut, le saut de 8 à 16 enjambe la valeur qui conviendrait.
- Le petit texte. Les libellés et légendes en 12–14 px se placent plus près de leurs voisins que le texte courant. L’écart entre un libellé de 12 px et son champ se lit bien à 4 px ; 8 px paraît déjà détaché.
Les pages riches en contenu, en revanche, vivent confortablement sur des multiples de 8 — texte long, sections généreuses, peu de contrôles compacts. Si un produit sert surtout à lire, la couche 4pt ne justifiera peut-être jamais sa présence.
Pourquoi les petites distances ont-elles besoin de pas plus fins ?
Parce que l’œil juge un écart par rapport aux éléments qu’il sépare, non en pixels absolus. Ajoutez 4 px à l’intérieur d’une puce de 24 px de haut et le composant change visiblement — l’écart a grandi d’une proportion que tout le monde peut voir. Ajoutez ces mêmes 4 px à un écart de section de 64 px et peu de gens remarqueront quoi que ce soit. La résolution dont vous avez besoin est proportionnelle à la distance que vous réglez : des pas fins de près, des pas grossiers de loin.
C’est l’intuition derrière la superposition en couches. Le petit espacement n’est pas plus important que le grand — c’est la plage où une différence de 4 px reste une décision visible, alors le menu doit l’offrir à cet endroit.
À quoi ressemble la répartition en pratique ?
Voici un formulaire dense mesuré distance par distance :
| Distance | Valeur | Couche |
|---|---|---|
| Libellé vers son champ | 4px | 4pt — interne |
| Champ vers son texte d’aide | 4px | 4pt — interne |
| Icône vers texte à l’intérieur du champ | 8px | partagé (8 est aussi un multiple de 4) |
| Champ vers le champ suivant | 16px | 8pt — mise en page |
| Groupe de champs vers le groupe suivant | 32px | 8pt — mise en page |
| Formulaire vers la section environnante | 64px | 8pt — mise en page |
Lisez la colonne des valeurs de haut en bas : les distinctions fines se regroupent à l’extrémité petite, et chaque distance au niveau de la mise en page est un multiple de 8. Cette distribution — dense en bas, clairsemée en haut — est ce qu’une échelle d’espacement non linéaire produit à partir d’une formule plutôt qu’au cas par cas.
Voyez l’extrémité dense en direct : ouvrez cette échelle adaptée au 4pt dans Scale Composer — la base reste la même, mais chaque intervalle de l’échelle est subdivisé en davantage de notes, si bien que l’extrémité petite gagne les pas intermédiaires dont une UI dense a besoin tandis que le haut conserve ses grands sauts de mise en page.
Autoriser les multiples de 4 partout ne ruine-t-il pas l’intérêt ?
Oui — c’est le piège. La valeur d’une grille, c’est le menu court : une poignée de valeurs dans laquelle chacun puise, si bien que des écrans construits indépendamment restent apparentés. Autorisez les multiples de 4 partout et le menu sous 64 px passe de 8 options à 15 ; les écrans voisins recommencent à se contredire sur les écarts de section — 20 ici, 24 là — et la cohérence pour laquelle la grille existait s’érode discrètement.
La correction coûte une phrase dans votre documentation d’espacement : l’espacement interne et la typographie peuvent utiliser des multiples de 4 ; l’espacement entre composants et sections utilise des multiples de 8. Une fois la frontière écrite, un écart de section de 12 px devient une violation contrôlable plutôt qu’une affaire de goût, et la couche 4pt ajoute de la précision sans rouvrir chaque décision que la grille 8pt avait déjà close.
Testez la couche de mise en page face à de vraies colonnes
L’autre moitié de la réponse consiste à voir à quel point les pas fins comptent peu à l’échelle de la mise en page. Ouvrez la vue grille avec une échelle de mise en page 8pt chargée et faites défiler les gouttières et les marges à travers l’échelle — 4 colonnes sur mobile, 8 sur tablette, 12 sur ordinateur de bureau. Déplacer une gouttière d’un pas est nettement visible ; les raffinements de 4 px qui avaient gagné leur place à l’intérieur d’une puce seraient invisibles ici. Ce contraste est tout l’argument en faveur de la superposition des deux grilles plutôt que du choix entre elles.