What are the factors that allow your website to be read quickly and effectively? How can you draw attention to that specific call-to-action that’s so vital to your web strategy?
The secret is simple. It's a powerful design tool called whitespace. And no, whitespace doesn’t mean space that’s white in color -- it simply refers to the negative space between margins, gutters and columns. It’s the space between lines of type, or between graphical elements such as photos or buttons. There are actually two types of whitespace:
Passive Whitespace: This is created within the general context of a page via elements such as margins, line height for rows of text and fonts used
Active whitespace: Active whitespace is deliberately added to better structure a page and emphasize specific areas or elements
Passive Whitespace
When both passive and active are used effectively, it can improve readability, enhance a website’s performance and make a great first impression. It’s truly the yin and yang to a well-balanced design and layout.
Let me demonstrate by using readability as an example. Check out the next two paragraphs:
"Without aesthetic, design is either the humdrum repetition of familiar clichés or a wild scramble for novelty. Without the aesthetic, the computer is but a mindless speed machine, producing effects without substance. Form without relevant content, or content without meaningful form." ~ Paul Rand
"Without aesthetic, design is either the humdrum repetition of familiar clichés or a wild scramble for novelty. Without the aesthetic, the computer is but a mindless speed machine, producing effects without substance. Form without relevant content, or content without meaningful form." ~ Paul Rand
This illustrates the power of passive whitespace. The first paragraph is using a leading (the space between the line of text) of 12 pixels; the second paragraph is using a leading of 20 pixels. I think you’d agree the second paragraph is much easier on the eye, allowing a user to scan information quickly. Now, I know the natural tendency is to stuff as much vital information on a page as possible, sometimes even above the fold but there must be a balance. Text -- and indeed, entire layouts -- need room to breathe. Otherwise, users feel cramped, overwhelmed and often unsure where to look first.
Active Whitespace Now, on to active whitespace: In the example below, we’re using whitespace to set priority and assign weight to certain graphical elements. This practice provides contrast, which often lets us direct where a user may look. Add greater contrast to the page, and a graphical element has a better chance of standing out among all other elements. Again, I think you’d agree that your eye is drawn to the button that has more whitespace around it. 
Now I don’t mean to make this whitespace concept seem as simple as black and white (no pun intended). This has taken years for designers to master, and its power and value is undeniable. When empty space is seen as equally as important as the content it surrounds, everyone’s that much closer to a well-designed web property.