How To Develop A Great Law Firm Website
August 28, 2020
5 Ways to Boost Your Response Rates
5 Ways to Boost Your Response Rates
September 3, 2020

The Importance of White Space in Graphic and Website Design

Is “zero” everything or nothing? If you think back to your elementary school days, you might remember if you try to divide by zero you get a result of “undefined”.

Some people contend that nothing is everything, because it is the foundation for everything. Whatever your belief, of mathematics or the universe, in graphic design it truly is our foundation.

What is? Nothing. To be more accurate, white space. It’s between and within every word and glyph (typographical element) that you read, and every element on your page.

It simultaneously is the page you see and the environment you see it inside of.

Today, as a designer, you’re going to learn about this amazing and powerful idea and tool of… Nothingness, AKA white space.


What Is White Space, Anyway?

As we’ve already discussed, white space (or whitespace as it is also referred to) is nothingness. Within that nothingness, you can have yellow, red, or blue—the color doesn’t matter. Patterns are also acceptable.

For webpages, posters, business cards, books, magazines, and everything you see on a daily basis, what makes that thing important is the constant context that contains the elements.


Micro and Macro White Space

Micro white space refers to the spaces between and within elements. An example can be the closed counter of an “O” or “A” or even the open counter of a “y”. As well, the space between the letters and lines of text or between menu items on a navigation menu, or a grid of tiles or images on a website.

Macro white space refers to the swaths of open areas—let’s say on either side of an article on a webpage on a monitor. It would be less noticeable on the limited real-estate of a phone or business card, but not completely missing.

Which is most important? Simultaneously, both. Without micro white space you just get a closed block or shape (technically, white space; but a conversation for another day). Without macro white space, you get a cluttered and totally disorganized mess of major elements.

The idea of “broad strokes first” greatly improves your use of white space as a designer.


Active vs Passive

A related idea to micro and macro white space is how you are using those spaces.

Active white space relies on using white space as the focus, such as the open counter of a “y” or “u” to create an image out of typography. Another example would be to use a closed counter of a letter to encapsulate a shape in logos.

The possibilities of creating shapes between shapes are virtually endless.

For this to work, however, you need to cause the rest of the viewing area to remain passive, so as not to distract from the focused, active portion.

Next time you look at Apple’s website or ads, take a look at how they use traditionally micro spaces to create larger macro white spaces. They turn the focus on the product by making the space around it passive to the point of total transparency.

Is your intention to create chaos and unease? Less white space with less structure might be the order of the day. Luxury, on the other hand, might include a large open space with a high focus on minimalism and great use of micro white space.


Time to Space Out

White space is as complex an idea as there is, but simple enough the concept can be introduced in a moment. You’ll probably spend the bulk of your design career assessing and reassessing your use and balance of white space in your designs.

Just remember that white space is a tool, like any other part of visual or graphic design. A tool doesn’t make the professional, it’s how you use it that matters. At Burlington Press, as a group of professionals, we’ve mastered that tool.


Want to see how? Get in touch with us today to see how we can bring your project to the next level.

Conveniently located in Burlington, NJ — just a short drive from Philadelphia or Trenton — we're your local source for marketing and visual communications.