# Le système d’espacement 8px, ou pourquoi vos interfaces semblent bancales

URL: https://neexit.com/le-systeme-despacement-8px-ou-pourquoi-vos-interfaces-semblent-bancales/
Publié le : 2026-07-23
Mis à jour le : 2026-07-23

Une interface peut afficher les bonnes couleurs et une typographie soignée, et donner malgré tout l'impression d'un assemblage fait à la va-vite. Le responsable n'est presque jamais celui qu'on soupçonne. Regardez les vides entre les éléments plutôt que les éléments eux-mêmes.

L'écart entre un titre et son paragraphe. La distance entre deux cartes. Le rembourrage à l'intérieur d'un bouton. C'est là, neuf fois sur dix, que tout se délite. Le spacing n'a pas été décidé, il a été estimé à l'œil, un élément après l'autre, jusqu'à ce que plus rien ne se réponde.

C'est la partie du design que la plupart des gens négligent, parce qu'elle ne se photographie pas comme une palette. Personne ne fait de capture d'écran pour vanter la qualité de ses marges. Pourtant l'espacement travaille dur, et c'est ce qui se corrige le plus vite une fois le principe compris.

## Un espacement au hasard trahit toujours son auteur

Le spacing n'est pas décoratif, il communique. Ce constat s'appuie sur une loi de la perception visuelle héritée de la Gestalt, la loi de proximité : les éléments proches sont perçus comme un groupe, pas comme des objets séparés. Le cerveau opère ce tri seul, sans qu'on lui demande son avis.

Chaque décision d'espacement devient donc une décision de regroupement, que vous le vouliez ou non. L'erreur classique consiste à placer le label d'un champ à égale distance de deux zones de saisie. L'utilisateur doit alors calculer : ce label appartient-il au champ du dessus ou à celui du dessous ? Personne n'a conçu cette confusion exprès. Elle naît d'un espacement arbitraire.

Quand le spacing est aléatoire, le cerveau cherche quand même un motif, et échoue. Cet échec se traduit par un vague sentiment que quelque chose cloche, même quand la personne serait incapable de dire quoi. La plupart des interfaces qui paraissent brouillonnes souffrent d'un souci de proximité, pas de couleur.

![Deux champs de formulaire avec un label ambigu placé à égale distance des deux, illustrant la confusion visuelle](https://neexit.com/wp-content/uploads/2026/07/inline-148-495.jpg)

## Pourquoi tout le monde a fini par choisir 8 pixels

La solution vers laquelle presque tous les grands systèmes de design ont convergé tient en une phrase : choisir une unité de base et faire de chaque valeur d'espacement un multiple de celle-ci. On travaille donc en multiples de 8, soit 8, 16, 24, 32, 40, 48, 56, 64, pour les marges, le padding, les largeurs, les hauteurs, les interlignes et même la taille des icônes.

Ce chiffre n'a rien d'un caprice. Les écrans réclament des calculs qui tombent juste partout. La plupart des résolutions se divisent proprement par 8 sur au moins un axe, ce qui évite le flou des demi-pixels sur Android, iOS et bureau. Les largeurs mobiles de 360, 375 ou 390 pixels se divisent toutes sans reste par 8.

Google Material Design place ce système au cœur de son fonctionnement. Les Human Interface Guidelines d'Apple s'y réfèrent aussi, avec un peu plus de souplesse. La grille de 8 points s'est imposée entre 2017 et 2018, portée par des designers comme Elliot Dahl et adoptée par des acteurs comme Google et IBM. Chez Atlassian, chaque valeur d'espacement reste un multiple de l'unité de base, de 0 à 80 pixels.

Le vrai gain n'est pas la pureté esthétique. C'est la disparition d'une décision que vous prendriez sinon des centaines de fois. Plutôt que de vous demander si un bouton mérite 13 ou 15 pixels de padding, la grille tranche : 8 ou 16. Cette contrainte libère l'attention pour ce qui compte vraiment, la hiérarchie et l'interaction.

Pour les zones serrées, écart entre une icône et son label ou rembourrage compact d'un badge, la plupart des systèmes autorisent une sous-unité de 4px. Quand 8px paraît trop large et 0 trop petit, 4px comble le vide. La cohérence prime sur le dogme. Ce qu'il faut fuir, ce sont les valeurs sorties de nulle part comme 13 ou 19 pixels, retenues parce qu'elles sentaient bon sur le moment.

Une échelle courante sur laquelle beaucoup d'équipes se calent : 4, 8, 12, 16, 24, 32, 48, 64, 96. Elle couvre la grande majorité des besoins, du petit écart entre une icône et son texte jusqu'à l'espace qui sépare deux sections de page.

## Interne et externe : la proximité mise en pratique

Une fois l'échelle choisie, la vraie compétence consiste à décider quelle valeur va où. Une règle suffit : l'espace à l'intérieur d'un groupe doit rester plus petit que l'espace entre les groupes.

Prenez une carte avec 20px de padding intérieur. Si vous en posez deux côte à côte, la marge qui les sépare doit atteindre au moins 20px, voire davantage. Chaque carte reste alors une unité distincte, entourée d'un vrai souffle. Si la marge tombait sous le padding, les deux cartes fusionneraient à l'œil et le regroupement deviendrait illisible.

Cette logique de l'interne vers l'externe s'applique partout, pas seulement aux cartes. Sur un formulaire, on colle le label à son champ, 4 à 8px, puis on ménage un écart net, 24px et plus, avant le groupe suivant. Un label proche de son champ dit « ceci va ensemble ». Le même label noyé dans le vide force l'utilisateur à calculer au lieu de lire.

Sur une fiche produit, le prix se colle au titre pendant que le bouton d'ajout au panier reçoit une séparation franche, parce qu'il s'agit d'une action d'une autre nature. Le principe ne bouge pas : un espacement serré signifie « c'est une seule idée », un espacement généreux signifie « ce sont des idées différentes ». Inversez ce rapport quelque part, et l'utilisateur devra deviner une structure qui aurait dû sauter aux yeux.

![Deux cartes côte à côte annotées de flèches montrant le padding intérieur plus petit que la marge extérieure](https://neexit.com/wp-content/uploads/2026/07/inline-148-497.jpg)

## Un audit d'espacement en dix minutes

Aucun outil supplémentaire n'est nécessaire pour contrôler votre propre travail. Ouvrez l'interface, site en ligne ou fichier Figma, peu importe, et déroulez cette vérification en une dizaine de minutes.

- Mesurez cinq écarts : le padding d'une carte, l'écart entre deux cartes, l'espace entre un label et son champ, la marge autour du texte d'un bouton, le vide entre un titre de section et son contenu. Si l'une de ces valeurs tombe sur 13, 19 ou 27 pixels au lieu d'un multiple de votre échelle, notez-le.
- Faites le test des yeux plissés : reculez ou dézoomez, puis demandez-vous, en ne regardant que les vides, ce qui semble aller ensemble. Si le regroupement visuel ne colle pas au regroupement logique du contenu, l'espacement induit l'utilisateur en erreur.
- Vérifiez le rapport interne-externe : pour chaque conteneur, carte, groupe de formulaire, élément de menu, confirmez que le padding intérieur reste inférieur ou égal à la marge extérieure.
- Suivez un parcours de lecture : choisissez un écran, tracez le chemin de votre œil de haut en bas ou de gauche à droite. Chaque endroit où le regard hésite ou revient en arrière signale d'ordinaire une incohérence d'espacement.

Si la majorité de vos cinq mesures sortent de l'échelle, ou si le regroupement ne suit pas le contenu, vous avez trouvé où corriger et pourquoi la mise en page vous semblait bancale avant même de pouvoir l'expliquer.

## Les fautes qu'il vaut mieux appeler par leur nom

Trop de padding dans les cartes. C'est la surcorrection la plus fréquente. On lit quelque part que le blanc fait premium et on applique la formule sans limite, 32 ou 40 pixels de rembourrage partout, quelle que soit la densité du contenu. Résultat : des cartes creuses plutôt qu'aérées. Le padding doit suivre la densité réelle, pas une croyance floue selon laquelle plus vaut mieux.

Pas assez d'espace entre les sections. L'erreur inverse, souvent motivée par l'envie de caser plus de contenu au-dessus de la ligne de flottaison. Quand les ruptures de section sont compressées, l'utilisateur perd le repère qui indique qu'un sujet s'achève et qu'un autre démarre. Il finit par lire la section trois comme la suite de la deux.

Un espacement incohérent entre composants voisins. Si une carte affiche 16px de padding et sa jumelle 20px, personne ne le remarquera consciemment. Mais la mise en page paraîtra vaguement instable, comme un cadre légèrement de travers qui agace avant qu'on n'en trouve la cause.

Oublier le mobile. Des éléments qui semblent groupés sur un écran de 1440 pixels peuvent s'effondrer à 375 pixels si la mise en page n'a pas été vérifiée aux deux tailles.

## Les outils qui ancrent le système dans le quotidien

Dans Figma, réglez le « Big nudge » sur 8px depuis les préférences. Chaque Maj + flèche déplace alors un élément d'exactement une unité de grille. Ce simple paramètre supprime presque toute tentation d'estimer un écart à l'œil, puisque la manière la plus rapide de bouger un objet est déjà verrouillée sur votre échelle.

Définissez ensuite votre échelle sous forme de variables plutôt que de nombres bruts, avec space/100 = 8, space/200 = 16, et ainsi de suite, pour que chaque membre de l'équipe pointe vers les mêmes jetons. Côté développement, les propriétés personnalisées CSS reproduisent la même logique :

*:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; }*

Une fois ces jetons en place, plus personne ne tape une valeur en pixels bruts dans une marge ou un padding. On appelle un token, et le token est toujours sur l'échelle par définition. Une carte utilise *padding: var(--space-4)* et *margin-bottom: var(--space-6)*, sans débat.

Le système en lui-même n'a rien de fascinant. C'est une courte liste de nombres. Son mérite est de prendre une décision que vous prendriez sinon mal, des centaines de fois, et de la ramener à un choix fait une seule fois. Le reste n'est que de l'application, et c'est cette application qui donne à une interface l'air d'avoir été voulue.