By Alena Krupko

White space, also known as negative space, is a crucial element of UI design. Despite its name, white space doesn't have to be white – it can be any color, texture, pattern, or even a background image, as long as it's empty.

We can refer to micro and macro white space in UI design. Micro white space refers to the small spaces between individual elements, such as text and images. Macro white space refers to the larger spaces between sections or groups of elements, such as between paragraphs or sections of a page.

<aside> 💡 The Law of Proximity will help us understand whether we should use micro or macro white space - connect relative elements by placing them close together, and unrelated elements should be further apart.

</aside>

White space helps to

• improve the legibility
• design an organised layout
• create sense of hierarchy
• guide user’s attention
• emphasise important information

1. Improves the legibility and readability

White space can also improve legibility (your ability to recognize letters and words) and readability (how well you can scan the content) by making text easier to read. By adding space around text, it becomes easier for the eye to follow the text and distinguish between different lines. This is particularly important for long blocks of text, such as articles or blog posts.

To improve legibility and readability we should consider two main things - paragraph margins and line spacing. Generally, the larger the spacing, the better experience the user will have whilst reading. But you should find the right balance. Too much white space can break it all.