« On pourrait mettre quelque chose, là. » La phrase arrive presque toujours au même moment : première présentation des maquettes, le regard s’arrête sur une zone calme autour d’un titre, et l’envie de l’occuper devient irrésistible. L’intention est bonne — on paie un site, on veut qu’il serve à quelque chose, et une surface vide ressemble à une surface gaspillée.
Sauf que l’espace blanc n’est pas de l’espace inoccupé : c’est de l’espace qui travaille. Il porte la hiérarchie, il rend le texte lisible, il évite les erreurs de clic. Voici ce qu’il fait exactement, et comment nous en décidons — parce que ce n’est pas une affaire de goût.
L’espace est la première chose qu’on lit
Avant de lire un mot, l’œil regroupe : ce qui est proche est perçu comme lié, ce qui est éloigné comme distinct. Ce mécanisme est plus rapide que la lecture, et il est plus fort que les mots eux-mêmes. Un intertitre collé au paragraphe qui le précède plutôt qu’à celui qu’il annonce est donc une erreur d’information, pas un détail esthétique : la page dit le contraire de ce que le texte raconte.
C’est pour cette raison que l’espacement est notre premier outil de hiérarchie, avant la taille des caractères et bien avant la couleur. Augmenter un titre de deux points est un pansement ; l’isoler correctement change la compréhension de la page.
Macro et micro : deux échelles, deux effets
Le macro-espacement — marges, gouttières, distance entre les sections — donne le rythme et dit où commence et où finit une idée. C’est lui qui permet de parcourir une page sans la lire, ce que fait tout visiteur pendant les premières secondes.
Le micro-espacement — interlignage, espace entre une étiquette et son champ, marge intérieure d’un bouton, espace avant un signe de ponctuation — décide du confort. Il ne se voit pas. Il se ressent sous forme de fatigue, ou d’absence de fatigue, au bout de trois paragraphes.
Le réglage le plus rentable : la longueur de ligne
Un texte courant se lit confortablement entre 45 et 75 caractères par ligne, espaces comprises. Au-delà, l’œil perd son point de retour à la fin de la ligne et doit chercher la suivante ; en dessous, la lecture est hachée. C’est la raison pour laquelle un article n’occupe jamais toute la largeur d’un grand écran : ce n’est pas de la place perdue, c’est une colonne de lecture.
Le corollaire vaut pour l’interlignage : environ une fois et demie la taille du texte pour un paragraphe, nettement moins pour un grand titre, dont les lignes seraient sinon perçues comme des blocs séparés. Ces deux réglages n’ajoutent aucun contenu et améliorent la lisibilité plus sûrement que n’importe quel choix de police.
« Ça fait vide » : deux façons de regarder la même page
Il y a une asymétrie intéressante dans la manière dont une maquette est vue. Le commanditaire la découvre en grand, quelques secondes, souvent à côté d’une autre proposition, avec la question « en ai-je pour mon argent ? » en tête. Le visiteur, lui, verra une page à la fois, souvent sur un téléphone, avec une intention précise et deux minutes d’attention.
Ces deux regards ne récompensent pas les mêmes choses. Le premier valorise la densité, parce qu’elle donne l’impression de valeur. Le second ne demande qu’une chose : comprendre où il est arrivé et quoi faire ensuite. Six messages entassés dans le premier écran, c’est zéro message transmis.
Cela dit, l’objection est parfois juste, et il faut savoir l’entendre. Une zone calme qui ne sépare rien, un bloc qui flotte sans ancrage, une page qui respire parce qu’elle n’a rien à dire : ce n’est pas de l’espace blanc, c’est un défaut. Dans le dernier cas, le problème à traiter est le contenu manquant, pas la mise en page.
L’espace ne se remplit pas : il se justifie. S’il ne sert ni la hiérarchie ni la lisibilité, alors oui, il est perdu — c’est le seul cas.
La densité juste dépend de la tâche
Il n’existe pas de bonne densité universelle, et c’est ce qui rend le sujet intéressant. Une interface de comparaison — tableau de bord, liste de résultats, grille tarifaire — doit être dense : le visiteur balaye, compare, revient en arrière, et chaque espace superflu l’oblige à scroller pour tenir deux informations ensemble dans son champ de vision.
Une page qui doit faire comprendre une idée, à l’inverse, gagne à n’en présenter qu’une par écran. La bonne question n’est donc jamais « est-ce trop vide ? » mais « que fait le visiteur ici : il compare, ou il comprend ? ».
L’accessibilité s’invite dans la conversation
- L’espace doit être extensible. Les règles d’accessibilité prévoient qu’un visiteur puisse augmenter l’interlignage et l’espacement des mots sans que le contenu soit tronqué ou chevauché. Une mise en page calculée au pixel près, où chaque bloc touche le suivant, casse dès qu’on augmente l’espacement — donc elle exclut.
- Les zones cliquables ont besoin d’air. Deux liens collés l’un à l’autre, c’est une erreur de clic garantie pour qui a un tremblement, un doigt gourd ou un téléphone dans une main dans le métro. L’espace, ici, n’est pas du confort : c’est de la fiabilité.
- Les groupes visuels aident la navigation non visuelle. Une page dont les sections sont clairement séparées est en général une page correctement structurée dans le code — et donc parcourable au clavier et au lecteur d’écran.
Nous détaillons ce volet dans notre page audit d’accessibilité RGAA.
Une échelle, pas des valeurs improvisées
La différence entre un site qui paraît soigné et un site qui « sent le bricolage » sans qu’on sache dire pourquoi tient rarement au graphisme : elle tient à la cohérence des espacements. Vingt-deux pixels ici, dix-huit là, trente ailleurs, et le rythme disparaît.
Nous travaillons donc avec une échelle d’espacement — une suite de valeurs limitée, dérivée d’une unité de base — déclarée une fois dans le système de design et réutilisée partout. Le site que vous lisez fonctionne ainsi : les espacements viennent de variables, pas de décisions au cas par cas. Deux bénéfices concrets : le rythme est reproductible d’une page à l’autre, et un ajustement global se fait en une ligne au lieu de cent.
Sur mobile, l’espace ne disparaît pas : il se redistribue
Le réflexe, sur petit écran, consiste à tout resserrer. C’est à moitié vrai : les marges latérales se réduisent, la colonne de texte se rétrécit, la grille passe sur une colonne. Mais la séparation verticale entre les blocs, elle, doit être maintenue — voire renforcée. C’est le seul repère qui reste quand on ne voit plus qu’un tiers de la page à la fois.
Le défilement n’a jamais fait fuir personne : c’est le geste le plus naturel du web. Ce qui fait fuir, c’est de ne pas savoir où l’on en est.
Nos arbitrages, en pratique
- Une idée dominante par section, un seul appel à l’action principal.
- Toujours plus d’espace entre deux sections qu’à l’intérieur d’une section — sinon la page perd son plan.
- Jamais un titre à égale distance du paragraphe qu’il annonce et de celui qui le précède.
- Une colonne de lecture bornée, quelle que soit la taille de l’écran.
- Le test des yeux plissés : si la hiérarchie de la page reste lisible en flou, elle est bonne. Si tout se vaut, il manque de l’espace, pas du contenu.
- Une vérification systématique à 375 px et à 1 440 px, parce que la plupart des problèmes d’espacement n’existent qu’à l’une des deux extrémités.
Un projet où le contenu doit respirer ?
C’est le cœur de notre travail de design et de direction artistique, et cela se joue dès la conception du site : la hiérarchie se décide avant la première maquette. Nos réalisations donnent une idée du résultat.
Vous hésitez entre deux versions d’une page, l’une dense, l’autre aérée ? Envoyez-les-nous via la page contact : nous vous dirons ce que chacune fait comprendre en trois secondes — c’est le seul arbitrage qui compte.