3

I've been reading about whitespace and there are mainly two ways of categorizing whitespace.

  1. Passive and active
  2. Micro and macro

To me passive/micro sound similar and active/macro sound similar. Can you help clarify the differences between passive vs micro and active vs macro?

Sites I used:

Improve this question
1
  • I always use actively passive micro macro whitespace just to be on the safe side.
    – Joonas
    Sep 5, 2019 at 20:38

2 Answers 2

Reset to default
1

From my perspective, it goes like this:

Active-passive axis - this is defining the whitespace based on intent or function - the active is part of visually guiding the viewer / user around the design composition, website mockup etc., whereas the passive whitespace is that used to give enough room around design elements for them to not visually intrude upon one another.

Micro-macro axis - this is defining whitespace based on literal scale - the tiny whitespaces afforded in kerning, leading and tracking are all micro, as are the tiny gutters around an in-line image embedded in a text column, and the whitespace between say a CTA button and the nearest active content, whereas a large area of whitespace between sections of content, or the edge of the defined page area for a website would be macro.

Thus you can have whitespace which is active macro, active micro, passive macro, and passive micro.

Hope this helps.

Improve this answer
5
  • 1
    This seems to make sense based on the article but I'm getting confused by the concept of the active/passive axis in that keeping elements from colliding can also guide the viewer (e.g. space between letters keeps letters from colliding together and also allows the user to follow the lines of text).
    – curious ♦
    Sep 4, 2019 at 20:37
  • TBH I think these categories are largely capricious and arbitrary - don't really have a lot of meaning in daily design tasks AFAIK - for myself, I don't recall ever sitting and thinking about "which KIND of whitespace should I use here" as much as I think "need more breathing room" or "the flow from xx to yy could use a more open path".
    – GerardFalla
    Sep 4, 2019 at 21:36
  • 1
    Thanks @GerardFalla. It's good to know that it's as simple as ensuring there's enough breathing room instead of getting caught up with technical terms. I'm a newbie so I appreciate your insights.
    – user229302
    Sep 5, 2019 at 0:15
  • 1
    After reading the article again, I can see some use in the micro/macro. It seems like micro is the whitespace used within a block of content, while macro is the space used between the blocks of content. While it's more likely that macro space will be larger, you can see in both articles that some examples of micro and macro are almost the same size give or take a few pixels.
    – curious ♦
    Sep 5, 2019 at 2:06
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – curious ♦
    Sep 5, 2019 at 2:11
1

For the record, I've been working in this industry for over 20 years and have never heard of any of these terms before today. They seem to only exist to bring traffic to blogs, and I can find no official sources or texts where either originates.

That said based on reading a few of those blogs each with their own interpretation here's what I am gathering:

Micro vs Macro - This is considering Micro to be the density or weight within an element. For example making text Bold vs Regular would be making a Micro change to the amount of white space. Macro is the spacing between such elements.

Passive vs Active - This is less clear and seems to be almost the same as the above but what I gather is that Passive is really the minimum amount of space between elements for clarity. So if you have let's say a list of bullets:

  1. Apples
  2. Oranges
  3. Bananas

The minimum space between those items would be passive space. If you decide to exaggerate the spacing in some way it's now active space.

I'm not sure this Active vs Passive really makes sense. In fact when I first starting writing this answer I said this axis appears to be lazy or constrained by technology. Good design should never really be passive. You shouldn't put the minimum amount of space in just to make something legible, it should be considered.

Of the articles I just read the best was https://www.awwwards.com/white-space-in-interaction-design.html

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.