Espacements

Dernière mise à jour : 1 mai 2025

Les espacements permettent d’offrir à l’utilisateur un design visuellement bien équilibré, quelle que soit la taille de son écran.

Unité de base

L’unité de base des espacements est de 8 px. Voici les valeurs établies pour la création de pages Web.

Image représentant les unités de base des espacements

Utilisation dans les sections

Trois types d'espacements ont été définis pour assurer harmonie et cohérence entre les pages du site Web. Ils s'adaptent en fonction des points de rupture établis.

Image représentant les trois types d'espacements dans les sections

Au début et à la fin des sections

On utilise l'espacement de type vertical‑plein pour marquer le début et la fin d'une section. On l'insère aussi avant et après un filet lorsque celui-ci divise deux sections.

Les valeurs de ce type d'espacement ont été déterminées pour garantir un espace suffisant et équilibré entre deux sections sans qu'il y ait de rupture qui laisserait présager que la page est terminée.

Image représentent la mise en page des espacements au début d'une section
Image représentent la mise en page des espacements à la fin d'une section

Entre deux régions d'une section

Dans une section, les espacements de types vertical‑demi ou vertical‑quart servent à séparer des régions, par exemple l'introduction et le contenu, ou à assembler deux modules.

Pour qu'une section soit mieux équilibrée, on privilégie un espacement de type vertical‑demi entre les régions.

Image représentant la mise en page des espacements entre deux sections
Image représentant la mise en page des espacements entre deux sections

Entre un titre et un paragraphe

Les titres servent à structurer et à hiérarchiser l'information qui est présentée sous forme de paragraphes. On introduit un espacement vertical en dessous du titre pour faciliter la lecture et la compréhension de la hiérarchie du contenu. Selon le style du titre utilisé, la valeur de l'espacement vertical varie.
 

Titre Affichage, Titre 1 et Titre 2

16 px (1 REM)

Image représentant la mise en page des espacements entre des titres affichage, titre 1 et titre 2 et un paragraphe

Titre 3 et Titre 4

8 px (1 REM)

Image représentant la mise en page des espacements entre des titre 3 et titre 4 et un paragraphe

Titre 5

0 px (0 REM)

Image représentant la mise en page des espacements entre un titre 5 et un paragraphe
Image représentant la mise en page conforme d'un espacement
À faire : Utiliser un espacement de type vertical – petit ou vertical – moyen pour bien définir l'espace entre deux régions distinctes.
Image représentant la mise en page non-conforme d'un espacement
À ne pas faire : Appliquer la règle d'espacement vertical sous le titre, si ce dernier n'est pas suivi d'un paragraphe.

Design

Les espacements ont une importance capitale dans la conception d'une page, puisqu'ils permettent de créer des liens entre les éléments ou de les distancer. Le respect des espacements prédéfinis contribue à bien communiquer graphiquement les contenus groupés.

Consulter les règles de base de conception relatives aux espacements.