Designer Lingo 101 - White Space
Ever heard a designer say “that’s too much white space on your website” or “your brochure needs more white space between elements” and been like what does that mean!? It’s common that us designers will use this term, especially if we are reviewing client websites or marketing materials, likely without explaining what it actually means. If you’ve been scratching your head at this commonly used term, I’m here to help you better understand it.
So what is white space?
Fun fact: White space isn’t actually space that is the colour white! The term ‘white space’ refers to the blank or unoccupied/empty space used in graphic and web design. Sometimes we use white space interchangeably with the term ‘negative space’ but we’re really just talking about the same concept. White space is just empty space between elements (elements are things that are in your design, like text, buttons, shapes, images, etc).
Types of White Space
Now that we’ve simplified the term ‘white space’, it’s time to blow your mind and talk about the different types of white space. There are four subcategories of white space: active, passive, macro, and micro.
Active White Space
Active white space is intentionally added blank space that helps highlight different aspects of a design. When we use active white space, we (us designers) are ensuring that all of the content flows well and that you (the reader) can maintain a steady focus and easily find the call-to-action/the elements we are trying to emphasize to you.
Passive White Space
Unlike active white space that is intentionally added, passive white space is naturally created and is often the space you see between words or fixed objects. If we didn’t have passive white space, all of our elements would overlap one another (not ideal).
Macro White Space
You’ve probably seen macro white space (a lot actually) when you’re browsing a website. Macro white space is that empty space between different design elements, such as surrounding your text body and images. It’s used to improve the layout of your design, whether that’s on a website or in print/digital marketing. This is often where I will see some ‘design issues’ when auditing a client’s website. Macro white space can be found in the margins of a website, around call-to-action buttons, and the separation between content. When we have too much macro white space, it can make the design look disproportionate. More on this later!
Micro White Space
Similarly to passive white space, micro white space is that space between minor layout elements, such as the space between individual letters, how spaced out your paragraphs are, and the space between lines. Micro white space helps ensure your design is legible and has great readability.
Why should I care about white space at all?
Great question! Why SHOULD you care anything about white space? Well, for starters, white space is used daily and is an essential part of design.
White space has several purposes:
Organize and Structure Content
White space is used to separate and group various elements within your design, showing how they relate to each other and visually organize content for the reader.
Ensure Text Legibility and Readability
By using white space, we can make text easier to read and consume. White space around text elements can help ensure that the reader doesn’t get overwhelmed with too much information and keep them focused on the important aspects of the design.
Promotes a Visual Hierachy
A visual hierarchy is how the eye travels through a design. White space guides the user through the design, helping them easily find the information that they are looking for. Using a visual hierarchy through white space helps prevent distractions for the reader and can help them navigate to do an intended action.
Creates Balance and Harmony
With appropriate proportions and equal distribution of white space and design elements, we can create a harmonious graphic or web design that is not only visually appealing but works in our favour, bettering the user experience. Using white space can also help create a clean and minimalist design (for those of your looking for a luxurious design, this is a piece of your golden ticket!)
Okay I know what white space is now, but what if I don’t want to use the colour white?
Guess what - white space doesn’t need to be white! White space is just a term for blank or empty space used in design. It can be white or have no colour at all, but it can also be any colour of the rainbow! If your background colour is blue, any area without another design element is considered ‘white space’.
What if I have too much white space?
Did you get carried away and use TOO MUCH white space? Excessive white space can lead to a disconnected design. If you have too much white space, those interacting with your design (graphic or web) may not know where to look or what content is most important. For all the purposes mentioned earlier, white space is imperative to creating visual hierarchy, unifying a design, organizing structure, and ensuring everything can be read.
Let’s go over an example:
Let’s say your website has all of the content featured down the centre third of the site, with a bunch of blank space on either side (the other two-thirds of the site). That makes the content pretty squishy and not very aesthetically pleasing, right?
By utilizing the page from edge to edge, working through a visual hierarchy, and structuring your design with white space can really elevate the overall look and feel of the design as a whole.
This usage of white space in not ideal as it bunches up the content and doesn’t make it easy for the reader to digest.
This is a good usage of white space as it helps guide the reader’s eye throughout every element within the design.
To Wrap It Up
White space is empty or blank space used to make designs visually appealing, organized, legible, and balanced. Using too much white space can be detrimental to the overall design, as can not using enough. Find that sweet spot where the white space works in harmony with the design and you’ll be working with aesthetically pleasing designs all day long!
