UI white space — de lege ruimte in een interface — wordt vaak gezien als "ruimte die opgevuld moet worden", terwijl die in goed design net zo bewust geplaatst is als de inhoud zelf. Deze negatieve ruimte is de ademruimte tussen elementen en laat het oog moeiteloos tekst, een knop of een afbeelding volgen. In dit artikel leg ik uit hoe white space de leesbaarheid en visuele hiërarchie versterkt, welke praktische regels erachter zitten en wat de meest voorkomende fouten zijn, telkens met concrete voorbeelden.
Wat white space is, en waarom het niet "leeg" is
White space is de niet-ingevulde ruimte rondom en tussen elementen. Die hoeft niet wit te zijn; welke achtergrondkleur dan ook (donkere thema's inbegrepen), deze ruimte heet negatieve ruimte. Twee onderscheidingen zijn handig:
- Macro-white space: de grotere tussenruimtes tussen blokken — secties, kaarten en marges. Bepaalt de algehele openheid en het ritme van de pagina.
- Micro-white space: kleine afstanden zoals regelafstand, letterafstand, de ruimte tussen een icoon en zijn label, of padding binnen een knop. Bepaalt de leesstroom en de waargenomen kwaliteit.
White space is geen "verspilling"; integendeel, het verlaagt de cognitieve belasting van de gebruiker. Op een scherm waar elke pixel gevuld is, weet het oog niet waar het moet kijken. White space is een stil hulpmiddel dat de aandacht stuurt.
Hoe UI white space de leesbaarheid verbetert
Leesbaarheid hangt grotendeels af van micro-white space. Voor tekst springen drie maten eruit:
- Regelhoogte (line-height): voor bodytekst leest ongeveer 1,4 tot 1,6 keer de lettergrootte comfortabel. Te krap op elkaar gepakte regels vermoeien het oog.
- Regellengte: mik op ongeveer 50 tot 75 tekens per regel. Erg brede paragrafen maken het lastig voor het oog om het begin van de volgende regel te vinden.
- Ruimte rond paragrafen en koppen: een evenwichtige ruimte boven en onder een kop verbindt die visueel met de inhoud waartoe hij behoort.
Een eenvoudig CSS-voorbeeld geeft een redelijk startpunt voor bodytekst:
.prose p {
max-width: 65ch; /* beperk de regellengte */
line-height: 1.6; /* comfortabele regelafstand */
margin-bottom: 1rem; /* ademruimte tussen paragrafen */
}De eenheid 65ch betekent ongeveer 65 tekens breed in het huidige lettertype en schaalt de regellengte mee met de inhoud.
White space en visuele hiërarchie
Visuele hiërarchie bepaalt wat de gebruiker eerst leest en wat daarna komt. White space is hier een van de krachtigste middelen, want volgens het nabijheidsprincipe voelen dicht bij elkaar geplaatste elementen verwant en verre elementen gescheiden. Door een formulierlabel dichter bij zijn invoerveld te zetten en verder van het volgende veld, maak je groepering zonder ook maar één lijn te tekenen.
Een praktische regel: de ruimte tussen verwante elementen moet kleiner zijn dan de ruimte tussen groepen. Binnen een kaart staan de titel, beschrijving en knop dicht bij elkaar, terwijl de afstand tussen kaarten groter is. Zulke consistentie versnelt merkbaar hoe snel het oog de pagina scant.
Bouw een consistent spacing-systeem
Willekeurig gekozen padding- en margin-waarden maken een interface rommelig. Professionele ontwerpen leunen meestal op een spacing-schaal — bijvoorbeeld een systeem op basis van 4 px: 4, 8, 12, 16, 24, 32, 48, 64. Elke tussenruimte komt uit die set. Dat geeft visueel ritme en haalt het giswerk uit de ontwikkeling.
Zo'n systeem is eenvoudig op te zetten met CSS-variabelen:
: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); }Gebruik je Figma, dan kun je dezelfde waarden definiëren als "spacing"-variabelen of als Auto Layout-tussenruimtes om design en code op één lijn te houden. De "gap"-instelling in Auto Layout laat je de spacing van kaarten en lijstitems vanaf één plek beheren.
Veelgemaakte fouten
- White space als "verloren" ruimte zien: de drang om elke hoek met inhoud te vullen is de meest voorkomende fout. Dichtheid betekent niet altijd waarde.
- Ongelijke padding: als de binnenruimte van een kaart links 16 en rechts 12 is, valt dat het oog op; symmetrie wekt vertrouwen.
- Te kleine touch-targets: ongeveer 44 tot 48 px laten voor aantikbare elementen op mobiel telt zowel voor spacing als voor toegankelijkheid.
- Inconsistent verticaal ritme: als de ruimte tussen kop, paragraaf en kop in elke sectie verschilt, oogt de pagina "wankel".
Een snelle checklist
- Ligt de regellengte van bodytekst tussen 50 en 75 tekens?
- Is de regelhoogte rond 1,4 tot 1,6?
- Staan verwante elementen dichter bij elkaar dan de ruimte tussen groepen?
- Komen alle tussenruimtes uit één spacing-schaal?
- Zijn touch-targets breed genoeg op mobiel?
Veelgestelde vragen
Betekent white space alleen een witte achtergrond?
Nee. De term "white space" is historisch; hij verwijst eigenlijk naar de lege ruimte tussen elementen. De achtergrond kan donker, gekleurd of met een patroon zijn — de functie van de ruimte verandert niet. Daarom wordt het ook negatieve ruimte genoemd.
Maakt te veel white space de inhoud niet "dun"?
Goed gebruikt is het tegenovergestelde waar. Bewuste white space geeft inhoud waarde en focus; interfaces van premiummerken gebruiken er vaak veel van. Het gaat erom dat de ruimte consistent en doelgericht is, niet willekeurig.
Waar begin ik met het schalen van ruimte?
Begin met een spacing-schaal op basis van 4 of 8 px en kies alle padding-/margin-waarden uit die set. Een systeem dat vanaf één bron wordt beheerd, biedt zowel consistentie als eenvoudiger onderhoud.
Oogt je interface rommelig en komt de boodschap niet over? Ik kan helpen met een UI-review die white space, typografie en hiërarchie samen aanpakt. Om je project te bespreken, neem contact met me op.