Qu'est-ce que la grille 8pt ?

Une convention d'espacement où chaque distance et chaque taille dans une interface est un multiple de 8 pixels. Elle fonctionne parce que 8 se divise proprement, survit aux mises à l'échelle de densité d'écran courantes (1×, 1,5×, 2×) en pixels entiers, et donne aux équipes un menu court de valeurs autour duquel se coordonner.

Faut-il utiliser une grille 4pt ou 8pt ?

Généralement les deux, en couches — les multiples de 8 pour l'espacement au niveau de la mise en page entre composants et sections, les multiples de 4 pour l'espacement interne fin comme le rembourrage des icônes et les écarts d'étiquettes. Les produits à forte densité de données s'appuient davantage sur la couche 4pt.

Toutes les valeurs doivent-elles être des multiples de 8 ?

Non. Les bordures d'un pixel, les corrections optiques et les lignes de base du texte sont des exceptions légitimes — la grille réduit les décisions, ce n'est pas une loi. Ce qui compte, c'est que les exceptions soient des choix visibles, pas de la dérive.

La grille 8pt est-elle la même chose qu'une grille de ligne de base ?

Non — la grille 8pt quantifie l'espace (à quelle distance les éléments se trouvent), une grille de ligne de base quantifie le rythme du texte (sur quelles lignes le texte repose). Elles se combinent bien lorsque la ligne de base est dérivée comme la moitié de la taille du corps de texte, de sorte que les deux partagent un même quantum.

Comment les valeurs d'espacement deviennent-elles des tokens ?

Chaque palier de l'échelle reçoit un nom (space-1…space-8, ou xs–3xl) et s'exporte vers des propriétés personnalisées CSS, Tailwind ou Figma Variables — de sorte que les fichiers de design et le code lisent le même ensemble fini de distances.

Systèmes d’espacement et la grille 8pt : le guide pratique

Q: Combien de paliers d'espacement un système doit-il avoir ?

Environ 6 à 10 couvre de nombreux produits. Plus de paliers signale généralement que l'échelle est linéaire (8, 16, 24, 32…) — une échelle non linéaire, dense du côté des petites valeurs et clairsemée du côté des grandes, fait le même travail avec moins de valeurs.

Un système d’espacement est un menu court et ordonné de distances autorisées — au lieu de choisir chaque marge et chaque écart individuellement, vous choisissez parmi six à dix valeurs que toute l’équipe partage. La grille 8 points est la version la plus connue de l’idée ; une échelle d’espacement en est la forme plus puissante et non linéaire. Ce hub rassemble nos guides sur les deux ; la voie la plus rapide est de voir une échelle d’espacement générée en direct.

Pourquoi l’espacement quantifié fonctionne

La valeur n’est pas un mysticisme du pixel — c’est une économie de décisions et de la cohérence. Quand chaque distance provient d’un même menu court, des écrans construits par des personnes différentes à des mois différents restent apparentés, et « cet écart doit-il faire 12 ou 14 ? » cesse d’être un débat. L’œil le récompense aussi : moins de relations d’espacement distinctes signifie moins de bruit visuel à concilier.

Qu’est-ce que la grille 8 points ? décortique le menu le plus connu et pourquoi 8 en particulier a survécu : il se divise proprement et tombe sur des pixels entiers aux mises à l’échelle de densité courantes. Quand des composants ont besoin de distances internes plus fines — rembourrage des icônes, écarts d’étiquettes — une couche de demi-paliers prend le relais ; Grille 4pt vs 8pt explique quand chaque couche s’applique et comment les deux coexistent sans devenir « tout multiple de 4 passe ».

La grille est le cas particulier ; l’échelle est l’idée

Les multiples de 8 forment un menu linéaire, et des paliers linéaires sont mauvais aux deux extrémités — les petits écarts ont besoin de distinctions fines, les grands non. Une échelle d’espacement tirée d’une formule (la même progression base-et-ratio qui peut piloter une échelle typographique) vous donne des paliers non linéaires : 8, 11, 16, 23, 32, 45, 64. Dense là où la précision compte, clairsemée là où elle ne compte pas, chaque palier justifié par une seule règle.

Combien de paliers ce menu devrait contenir est une décision à part entière — Combien de paliers d’espacement un système doit-il avoir ? plaide pour six à dix, et Qu’est-ce qu’une échelle d’espacement ? construit la version non linéaire à partir de zéro. La formule partagée est aussi ce autour de quoi Scale Composer est bâti : une seule base et un seul ratio génèrent ensemble les tailles typographiques, les paliers d’espacement et les dimensions de la grille, si bien que changer un seul nombre réaccorde les trois d’un coup.

Le rythme du texte est aussi de l’espacement

La moitié des distances verticales d’une page vivent à l’intérieur du texte — interlignes, écarts entre paragraphes, marges de titres. Dériver une unité de ligne de base de la moitié de la taille du corps (8px sur un corps de 16px) met le rythme du texte et l’espacement de mise en page sur le même quantum, ce qui est la manière pratique d’obtenir la sensation que « tout s’aligne » sans lutter contre la mécanique des boîtes de ligne CSS. Grille de ligne de base vs grille 8pt trace la ligne entre les deux types de rythme, et Espacement vertical entre les blocs de texte applique le quantum partagé aux écarts entre paragraphes et aux marges de titres — les distances les plus susceptibles de dériver quand elles sont définies élément par élément.

Où l’espacement rencontre le reste du système

Les paliers ne gouvernent quoi que ce soit qu’une fois nommés et livrés. Tokens d’espacement couvre le nommage et le nombre de paliers, et le hub design tokens couvre comment ces noms voyagent d’un fichier source unique vers CSS, Tailwind et Figma. En mise en page, la même échelle fixe les distances entre les colonnes — Gouttières et écarts la relie au système de colonnes décrit dans le hub grille de mise en page. Deux guides couvrent le plancher ergonomique qu’aucune échelle ne peut passer sous : Cibles tactiles sur pourquoi 44px compte, et Modes de densité sur le fait de servir des interfaces compactes et spacieuses à partir du même ensemble de tokens.

Guides de ce hub

Cibles tactiles : pourquoi 44px compte
La taille des cibles tactiles expliquée : Apple recommande 44pt, Material 48dp, WCAG 2.2 exige 24px. Découvrez comment la marge intérieure transforme une icône de 24px en cible de 48px, et pourquoi les écarts comptent.
Combien de paliers d'espacement un système doit-il avoir ?
Combien de valeurs d'espacement un système doit-il avoir ? De six à dix, réparties par zone — micro, intermédiaire, macro — plus un audit qui montre pourquoi votre CSS en compte probablement quarante.
Compact, confortable, spacieux : les modes de densité
Les modes de densité d'interface — compact, confortable, spacieux — sont une seule mise en page résolue contre différents crans d'espacement. Comment fonctionne le remappage d'alias, avec le calcul d'une rangée de tableau.
Échelles de rayon de bordure
Une échelle de rayon de bordure est un court menu de valeurs d'angle partagé par chaque composant — avec la règle des angles imbriqués (intérieur = extérieur moins l'écart) que la plupart des guides oublient.
Espacement vertical entre les blocs de texte
Combien d'espace entre paragraphes et titres ? Multiples de ligne de base, marges de titre asymétriques, listes plus resserrées — une pile de texte travaillée à partir d'une seule échelle.
Gouttières et espaces : l'espacement entre les colonnes
Une gouttière de grille est l'espace entre les colonnes — gap en CSS. Quelle largeur donner aux gouttières, comment elles se rapportent aux marges et aux colonnes, avec des calculs par point de rupture.
Grille 4pt vs 8pt : quand utiliser laquelle
La grille 4pt vs 8pt est une question de couches, pas un choix : les multiples de 8px pour l'espacement de mise en page, les multiples de 4px pour l'espacement interne fin et la typographie. Découvrez où chacune s'applique.
Grille de ligne de base vs grille 8 pt : la différence
Une grille de ligne de base quantifie le rythme du texte ; une grille 8 pt quantifie l'espace. Découvrez en quoi elles diffèrent, comment elles partagent un même quantum de 8 px, et ce qui tient sur le web.
Jetons d'espacement : nommage et paliers
Les jetons d'espacement transforment une échelle d'espacement en vocabulaire partagé. Comparez le nommage numérique et par tailles de t-shirt, ajoutez des alias sémantiques et exportez vers CSS, Tailwind et Figma.
Marge vs padding : les règles système
Marge vs padding : le padding est l'espace à l'intérieur de la bordure, la marge à l'extérieur — et la règle système qui compte plus : les composants possèdent le padding, les mises en page possèdent les espaces.
Qu'est-ce qu'une échelle d'espacement ?
Une échelle d'espacement est un ensemble court et ordonné de distances autorisées. Découvrez pourquoi les bonnes échelles sont non linéaires, comment trois nombres en génèrent une, et combien d'échelons il vous faut.
Qu'est-ce que la grille de 8 points ?
La grille de 8 points fait de chaque espace et de chaque taille d'une interface un multiple de 8 px. Découvrez pourquoi 8 fonctionne, quand utiliser des demi-pas de 4 pt et comment elle devient une échelle d'espacement.
Synchroniser l'espacement entre Figma et le code
Les tokens d'espacement de Figma dérivent du code quand chaque côté maintient sa propre liste. Exportez une seule échelle en Figma Variables et CSS pour que design et code lisent une source unique.
Tailles d'icônes sur la grille (16, 20, 24)
Les tailles d'icônes standard — 16, 20, 24, 32 — sont des boîtes englobantes sur la grille de 4px. Découvrez pourquoi des tailles d'icônes égales peuvent paraître différentes et comment associer icônes et texte.

Essayez-le sur de vraies colonnes

L’espacement devient concret quand la mise en page entre en jeu : ouvrez la vue grille — 4 colonnes sur mobile, 8 sur tablette, 12 sur ordinateur — et faites défiler les gouttières et les marges à travers l’échelle avec les touches fléchées. Regarder une gouttière se déplacer palier par palier montre à quoi sert un système d’espacement plus vite que n’importe quelle définition.