L'UI white space — l'espace vide d'une interface — est souvent pris pour « une place à remplir », alors qu'en bon design il est placé avec autant d'intention que le contenu lui-même. Cet espace négatif, c'est l'air qui circule entre les éléments, et il permet à l'œil de suivre un texte, un bouton ou une image sans effort. Dans cet article, j'explique comment le vide renforce la lisibilité et la hiérarchie visuelle, quelles règles pratiques le régissent et quelles erreurs sont les plus fréquentes, le tout avec des exemples concrets.
Qu'est-ce que le vide, et pourquoi n'est-il pas « vide » ?
Le white space est la zone non remplie autour et entre les éléments. Il n'a pas besoin d'être blanc ; quelle que soit la couleur du fond (thèmes sombres compris), cette zone s'appelle l'espace négatif. Deux distinctions sont utiles :
- Macro-espace : les grands intervalles entre les blocs — sections, cartes et marges. Il définit l'aération et le rythme général de la page.
- Micro-espace : les petites distances comme l'interligne, l'interlettrage, l'écart entre une icône et son libellé, ou le padding intérieur d'un bouton. Il gouverne le flux de lecture et la qualité perçue.
Le vide n'est pas « du gaspillage » ; au contraire, il réduit la charge cognitive de l'utilisateur. Sur un écran où chaque pixel est rempli, l'œil ne sait plus où regarder. Le vide est un outil silencieux qui dirige l'attention.
Comment l'UI white space améliore la lisibilité
La lisibilité dépend en grande partie du micro-espace. Pour le texte, trois mesures ressortent :
- Interligne (line-height) : pour le corps de texte, environ 1,4 à 1,6 fois la taille de police se lit confortablement. Des lignes trop serrées fatiguent l'œil.
- Longueur de ligne : visez environ 50 à 75 caractères par ligne. Des paragraphes trop larges empêchent l'œil de retrouver le début de la ligne suivante.
- Espace autour des paragraphes et des titres : un écart équilibré au-dessus et en dessous d'un titre le relie visuellement au contenu auquel il appartient.
Un exemple CSS simple offre un bon point de départ pour le corps de texte :
.prose p {
max-width: 65ch; /* limite la longueur de ligne */
line-height: 1.6; /* interligne confortable */
margin-bottom: 1rem; /* respiration entre paragraphes */
}L'unité 65ch correspond à environ 65 caractères de large dans la police courante, et adapte la longueur de ligne au contenu.
Le vide et la hiérarchie visuelle
La hiérarchie visuelle détermine ce que l'utilisateur lit d'abord et ce qui suit. Le vide est ici l'un des outils les plus puissants, car selon le principe de proximité, des éléments rapprochés paraissent liés et des éléments éloignés paraissent séparés. En rapprochant le libellé d'un formulaire de son champ et en l'éloignant du champ suivant, vous créez un regroupement sans tracer la moindre ligne.
Une règle pratique : l'espace entre éléments liés doit être plus petit que l'espace entre les groupes. Dans une carte, le titre, la description et le bouton sont proches, tandis que la distance entre les cartes est plus large. Cette cohérence accélère nettement le balayage de la page par l'œil.
Construire un système d'espacement cohérent
Des valeurs de padding et de margin choisies au hasard rendent une interface brouillonne. Les designs professionnels s'appuient généralement sur une échelle d'espacement — par exemple un système basé sur 4 px : 4, 8, 12, 16, 24, 32, 48, 64. Chaque écart est pris dans cet ensemble. Cela donne un rythme visuel et supprime les approximations pendant le développement.
Un tel système se met facilement en place avec des variables CSS :
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
}
.card { padding: var(--space-4); }
.card + .card { margin-top: var(--space-5); }Avec Figma, vous pouvez définir les mêmes valeurs comme variables « spacing » ou comme écarts d'Auto Layout pour aligner design et code. Le réglage « gap » de l'Auto Layout permet de gérer l'espacement des cartes et des listes depuis un seul endroit.
Erreurs fréquentes
- Voir le vide comme une zone « perdue » : l'envie de remplir chaque coin de contenu est l'erreur la plus courante. La densité ne signifie pas toujours de la valeur.
- Paddings inégaux : quand l'espace intérieur d'une carte vaut 16 à gauche et 12 à droite, l'œil le remarque ; la symétrie inspire confiance.
- Cibles tactiles trop petites : laisser environ 44 à 48 px pour les éléments cliquables sur mobile compte autant pour l'espacement que pour l'accessibilité.
- Rythme vertical incohérent : si l'espacement entre titre, paragraphe et titre varie à chaque section, la page paraît « bancale ».
Une checklist rapide
- La longueur de ligne du corps de texte est-elle entre 50 et 75 caractères ?
- L'interligne est-il autour de 1,4 à 1,6 ?
- Les éléments liés sont-ils plus proches que l'écart entre les groupes ?
- Tous les écarts viennent-ils d'une seule échelle d'espacement ?
- Les cibles tactiles sont-elles assez larges sur mobile ?
Questions fréquentes
Le white space veut-il dire seulement un fond blanc ?
Non. Le terme « white space » est historique ; il désigne en réalité l'espace vide entre les éléments. Le fond peut être sombre, coloré ou texturé — la fonction de l'espace ne change pas. C'est pourquoi on parle aussi d'espace négatif.
Trop de vide ne rend-il pas le contenu « léger » ?
Bien utilisé, c'est l'inverse. Un vide intentionnel donne de la valeur et du focus au contenu ; les interfaces des marques premium en utilisent souvent beaucoup. L'essentiel est que l'espace soit cohérent et intentionnel, pas arbitraire.
Par où commencer pour dimensionner l'espace ?
Commencez par une échelle d'espacement basée sur 4 ou 8 px et choisissez toutes les valeurs de padding/margin dans cet ensemble. Un système géré depuis une seule source apporte cohérence et maintenance facilitée.
Votre interface paraît encombrée et le message ne passe pas ? Je peux vous aider avec une revue UI qui traite ensemble le vide, la typographie et la hiérarchie. Pour parler de votre projet, contactez-moi.