Qu’est-ce que la grille de 8 points ?
La grille de 8 points est une méthode d’espacement où chaque taille et chaque espace d’une interface — marges, padding, écarts, hauteurs de composants — est un multiple de 8 pixels. Au lieu de choisir chaque distance individuellement, vous choisissez dans un menu restreint : 8, 16, 24, 32, 40… C’est l’une des conventions d’espacement les plus répandues dans le design numérique, popularisée par le Material Design de Google et désormais un présupposé par défaut dans de nombreux systèmes de design.
Cet article explique pourquoi 8 précisément, où la grille aide et où elle vire au dogme, et comment elle se généralise en un véritable système d’espacement.
Pourquoi exactement 8 ?
Trois raisons pratiques :
- Divisibilité. 8 se divise proprement en deux à deux reprises (8 → 4 → 2), si bien que les mises en page imbriquées et les éléments centrés continuent de tomber sur des pixels entiers.
- Le calcul de la densité d’écran. Les appareils affichent selon des facteurs d’échelle de 1×, 1,5×, 2×, 3×. Les multiples de 8 restent des nombres entiers à chacun d’eux (8 × 1,5 = 12), tandis que les valeurs impaires produisent des demi-pixels et des bords flous à 1,5×.
- Coordination. Quand chaque designer et chaque développeur d’une équipe puise dans les mêmes huit valeurs environ, des écrans conçus par des personnes différentes à des trimestres différents se ressemblent malgré tout. C’est cela — et non la perfection au pixel près — le vrai bénéfice.
Une grille de 10 points vous donnerait la raison 3 mais perdrait les raisons 1 et 2. C’est là, pour l’essentiel, tout l’argument en faveur de 8.
8 px est-il parfois trop grossier ?
Oui — à l’intérieur des composants. Le padding d’une icône, l’écart entre une étiquette et son champ de saisie, l’espace à l’intérieur d’une puce (chip) ou d’un badge : à cette échelle, le saut de 8 à 16 est bien trop grand. La réponse habituelle est le demi-pas de 4 points : on autorise 4 px pour l’espacement interne fin, tandis que les multiples de 8 gèrent l’espacement au niveau de la mise en page, entre composants et sections. La typographie tourne souvent sur des multiples de 4 elle aussi.
De nombreux systèmes matures sont donc en réalité des « grilles de 4 pt où la mise en page s’en tient aux multiples de 8 » — une distinction qu’il vaut la peine d’expliciter dans votre propre documentation.
Tout doit-il s’aligner sur la grille ?
Non, et c’est là que les équipes transforment une convention utile en règle néfaste. Devraient s’aligner : l’espacement entre éléments, le padding à l’intérieur des conteneurs, les boîtes englobantes des icônes, les hauteurs de composants fixes. Ne devraient pas s’aligner :
- Les bordures et séparateurs de 1 px — ce sont des traits dessinés, pas des espaces.
- Les corrections optiques — une icône de lecture décalée de 2 px vers la droite pour paraître centrée est correcte ; la grille n’est pas une raison de défaire cet ajustement.
- Les lignes de base du texte en milieu de paragraphe — l’interligne s’en charge (voir plus bas).
La grille sert à réduire le nombre de décisions, ce n’est pas une loi de la physique. Si une valeur doit l’enfreindre pour une raison visible, enfreignez-la et passez à la suite.
La grille de 8 pt est-elle la même chose qu’une grille de ligne de base ?
Non — elles répondent à des questions différentes. La grille de 8 pt quantifie l’espace (à quelle distance les choses se situent) ; une grille de ligne de base quantifie le rythme du texte (sur quelles lignes invisibles le texte repose). Elles se combinent bien lorsque l’unité de ligne de base dérive de votre typographie : une convention courante est la moitié du corps de texte. Un corps de texte à 16 px donne une ligne de base de 8 px — et dès lors votre rythme de texte et votre grille d’espacement partagent le même quantum de 8 px.
D’une grille de 8 points à une véritable échelle d’espacement
Une chose reste souvent sans examen : les multiples de 8 ne forment pas encore un système. 8, 16, 24, 32, 40, 48… est un menu linéaire de plus de 20 options — et des pas linéaires sont mauvais aux deux extrémités. Les petits écarts exigent des distinctions fines (8 contre 12, ça compte) ; les grands écarts non (72 contre 80 est à peine visible). Ce que vous voulez réellement, c’est un ensemble court et non linéaire de pas : dense en bas, clairsemé en haut.
C’est ce que produit une échelle d’espacement modulaire. Définissez une base de 16 px avec un ratio de 2 et deux notes par intervalle, et l’échelle génère 8, 11, 16, 23, 32, 45, 64… — compatible avec les multiples de 8 en bas, accélérant en haut, chaque pas dérivant d’une seule formule plutôt que d’une réunion.
Voyez-la en direct : ouvrez cette échelle d’espacement dans Scale Composer — les trois mêmes nombres qui définissent l’échelle typographique génèrent les pas d’espacement et la ligne de base de 8 px.
L’ensemble fini de pas se mappe alors directement sur des tokens d’espacement
(space-1 … space-8, ou xs–3xl) qui survivent au trajet du fichier de design
jusqu’au CSS de production.
Essayez-la sur une vraie mise en page
Les décisions d’espacement semblent abstraites jusqu’à ce que les colonnes entrent en jeu : ouvrez la vue grille avec la même échelle chargée et faites défiler les gouttières et les marges à travers l’échelle avec vos touches fléchées — 4 colonnes sur mobile, 8 sur tablette, 12 sur ordinateur de bureau. Quand une gouttière passe d’un pas de l’échelle au suivant, vous voyez ce que la grille de 8 points a toujours cherché à vous offrir : chaque distance sur la page expliquée par le même petit ensemble de nombres.