Espace blanc qui sépare deux colonnes.
En typographie et design, une gouttière (gutter en anglais) désigne l’espace vide entre deux colonnes de texte, d’images ou d’éléments visuels dans une grille de mise en page.
Contrairement aux marges extérieures (qui entourent le bloc global), la gouttière est un espace intérieur qui sépare des contenus voisins.
Exemple : Dans une mise en page à 2 colonnes, la gouttière est l’espace blanc au centre, entre les deux blocs de texte.
Fonctions principales
- Améliorer la lisibilité : évite que l’œil ne se perde d’une colonne à l’autre.
- Créer du rythme visuel : structure l’information de façon aérée et équilibrée.
- Renforcer la hiérarchie : isole les groupes de contenu pour mieux les distinguer.
Dans Figma et le design numérique
- Lorsque vous créez une grille de colonnes (
Layout Grid → Columns), le champ « Gutter » définit l’espace entre chaque colonne. - Valeurs typiques :
- Web : 16 px, 24 px ou 32 px (souvent multiples de 8)
- Mobile : 12 px à 24 px (écran plus étroit)
- Print/Éditorial : 6 mm à 12 mm
Astuce : une gouttière trop étroite crée de la confusion ; trop large, elle brise la cohérence du bloc.
Gouttière vs Marge
| Gouttière | Marge | |
|---|---|---|
| Position | Entre les colonnes (intérieur) | Autour du bloc global (extérieur) |
| Rôle | Séparer des contenus voisins | Isoler le contenu du bord de la page/écran |
| Exemple | Espace entre deux cartes produit côte à côte | Espace entre le bord de l’écran et la première carte |
Bonnes pratiques
- Utilisez des valeurs cohérentes avec votre système de grille (ex. : base 8 px).
- En responsive, adaptez la gouttière : plus petite sur mobile, plus large sur desktop.
- Pour les textes longs (livres, magazines), la gouttière centrale peut être plus large si le document sera relié (compensation de l’« empreinte » de la reliure).
En anglais : gap