Grille 8pt : définition du système d'espacement en design

Grille 8pt : la définition du système d'espacement

La <strong>grille 8pt</strong> est une méthode de design qui consiste à fixer tous les espacements d'une interface sur des multiples de 8 points. Concrètement, un bouton aura 16 points de marge interne, deux blocs seront séparés de 32 points, une section de 64. On ne choisit plus les espaces à l'œil, on les prend dans une échelle courte et connue d'avance.

Le mot « point » vient du monde des applications mobiles, où l'unité tient compte de la densité de l'écran. Sur le web, on parle plutôt de pixels CSS : 8 points équivalent à 8 pixels, soit 0,5 rem avec une taille de texte par défaut. Le principe reste le même : une seule unité de base, et tout le reste en découle.

À quoi sert une grille d'espacement en design ?

Une page web, c'est d'abord du vide bien placé. Les espaces séparent les idées, regroupent ce qui va ensemble et guident l'œil vers le bouton qui compte. Sans règle, chacun invente ses valeurs : 13 pixels ici, 17 là, 22 ailleurs. Le résultat paraît légèrement bancal, même si personne ne sait dire pourquoi.

Une interface cohérente, page après page

Le premier gain est la <strong>cohérence</strong>. Quand toutes les marges sortent de la même échelle, les pages se ressemblent naturellement, même conçues à des mois d'écart. La perception de qualité s'améliore : un visiteur ne mesure rien, mais il sent qu'un site est soigné ou approximatif. C'est également ce qui rend une identité visuelle reconnaissable.

Un travail plus efficace entre designer et développeurs

Le deuxième avantage tient au gain de temps. Le designer n'hésite plus entre 14 et 15 pixels. Les développeurs n'ont plus à deviner une valeur sur une maquette : ils savent qu'elle sera forcément 8, 16, 24 ou 32. Les échanges se simplifient et les écarts entre maquette et site en ligne diminuent nettement.

Un affichage net sur tous les écrans

Le chiffre 8 n'a pas été choisi au hasard. La plupart des largeurs d'écran courantes, comme 320, 768, 1024 ou 1440 pixels, se divisent par 8. Et quand un écran multiplie l'affichage par 1,5 ou par 2, une valeur de 8 donne 12 ou 16 pixels entiers, là où une valeur de 5 donnerait 7,5 pixels flous. Google a d'ailleurs bâti son système Material Design sur une grille de base de 8 dp.

Comment fonctionne la grille 8pt

La logique tient en une phrase : on part de 8 et on multiplie. Il est important de garder une échelle courte, sinon la règle perd sa valeur. Six à huit paliers suffisent pour structurer la quasi-totalité d'un site.

L'échelle de valeurs de base

• <strong>8</strong> : écart entre une icône et son texte, entre un libellé et son champ.
• <strong>16</strong> : marge interne d'un bouton ou d'une carte, espace entre deux paragraphes.
• <strong>24 et 32</strong> : séparation entre deux blocs d'un même groupe.
• <strong>48 et 64</strong> : respiration entre deux sections d'une page.
• <strong>96 et plus</strong> : grandes ruptures, par exemple sous une hero section.

Le demi-pas de 4 points

Certains détails demandent plus de finesse : l'écart entre un badge et son chiffre, ou le décalage d'une petite icône. On autorise alors un demi-pas de 4 points. Il reste réservé aux petits composants, sinon la grille redevient un réglage au cas par cas.

Typographie, icônes et hiérarchie

La typographie suit la même logique. Une hauteur de ligne de 24 pixels pour un texte de 16 tombe pile sur la grille, ce qui aligne les blocs de texte avec le reste de la page. Pour aller plus loin sur ces réglages, voyez notre article sur le line height et le letter spacing. Les icônes, elles, se dessinent souvent en 16, 24 ou 32 pixels. L'espacement sert enfin la hiérarchie : plus deux éléments sont liés, plus ils sont proches.

Exemple concret : une carte de service

Cette carte devient ensuite un composant UI réutilisable. Dupliquée sur la page d'accueil, une page service ou une landing page, elle garde les mêmes proportions. C'est tout l'intérêt d'un système plutôt qu'une suite de décisions isolées.

Les erreurs courantes avec les espaces

La grille 8pt est simple à comprendre, mais facile à mal appliquer. Voici les écueils que l'on rencontre le plus souvent lors d'une reprise de site.

• <strong>Mesurer la mauvaise chose</strong> : on règle la boîte à 16 pixels, mais la hauteur de ligne du texte ajoute un vide invisible qui fausse le rendu.
• <strong>Multiplier les exceptions</strong> : un 20 par-ci, un 12 par-là, et la grille n'existe plus que sur le papier.
• <strong>Une échelle trop longue</strong> : proposer 15 valeurs revient à ne rien imposer.
• <strong>Oublier le mobile</strong> : un écart de 96 pixels sur ordinateur doit souvent passer à 48 sur un petit écran, en restant dans l'échelle.
• <strong>Ne pas la coder</strong> : une grille présente dans la maquette mais absente du CSS disparaît à la première mise à jour.

Intégrer la grille 8pt dans votre site

Pour intégrer ce système durablement, la bonne méthode consiste à déclarer l'échelle sous forme de variables CSS ou de jetons dans un design system. Les développeurs appellent alors « espace-4 » plutôt qu'une valeur en dur. Le même principe s'applique au responsive design : on change de palier selon l'écran, sans sortir de l'échelle.

Pour un dirigeant de PME, l'utilisation d'une grille d'espacement n'est pas un caprice de graphiste. Elle réduit le temps passé sur chaque nouvelle page, limite les allers-retours et rend un site plus lisible, donc plus convaincant. C'est un réflexe que nous appliquons sur chaque projet de création de site internet, au même titre que les principes d'UX et d'UI.

Questions fréquentes