Effective use of white space can be the difference between an average web design and a great web design – yet it is often overlooked. I’ve wrote before about the benefits that a minimalist approach to web design can bring and good use of white space is one of the most important contributing factors of that.
White space, of course, doesn’t have to be white. It is essentially the spacing between the elements on a web page. This covers anything from the margins that surround areas of content to the spacing of typography. The definition from Wikipedia is a pretty good one:
“White space should not be considered merely ‘blank’ space — it is an important element of design which enables the objects in it to exist at all, the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition.”
This post explains why white space is important and shows common examples of its use in web design.
Why is white space important in web design?
Getting white space right is a balancing act. Too little and the elements on a web page appear cluttered, too much and they will look lost.
Achieving the right balance is important so that the elements of a web page are given space to breathe and the key messages are clear to the reader. An overuse of white space, however, can result in a design having an unfinished feel to it – something that is pretty common in bad attempts at minimalist web design.
A website with good use of white space will have a clean, simple, uncluttered feel but, at the same time, the elements on the page will hang together in a coherent way.
Margins and padding
The spacing between the elements on a web page. At the highest level this is the spacing of the top, bottom, left and right margins of a web page. At a lower level this is the spacing between the individual elements and containers that make up the page.
When thinking of how much white space to use in margins, consideration should be given to consistency, uniformity and getting the balance right.
Take the example below from the website I developed for In House Films. The first image is a screen capture of the website that I have edited with Firebug so that the spacing of the main content, navigation and logo is greatly reduced.
A bad example of content spacing.
In the above example the lack of spacing between the content and the background results in the impact of the banner image being lost somewhat. The overall layout of the website doesn’t feel like it hangs together as well as it could and, even though there isn’t a great deal of content on the page, it looks a bit cluttered.
The spacing used on the real version of the website (shown in the image below) addresses these problems.
A better use of white space.
Headings
Headings are used to separate sections of content but should also allow readers to scan through content to quickly understand the main messages on the page. Their spacing, therefore, needs to ensure that they are not lost amongst the paragraph body text. At the same time, the spacing of headings needs to not be so large that the heading feels disconnected from the paragraph text it relates to.
CSS properties such as font-size, font-weight, text-decoration and font-family can be used to further differentiate headings from paragraph text.
Take the examples below:
In the above example there isn’t enough spacing between the heading and the paragraph text. A reader who was skimming through the page for a particular section would have difficulty picking the heading out. Additionally, the styling is too similar to the paragraph text for it to be easily to differentiate between the heading and the body.
In the example above the there is too much spacing between the heading and the paragraph to the point where the heading appears disconnected from the paragraph below it.
A better example of heading spacing that finds a balance between too much and too little spacing.
Paragraph text
The spacing of paragraph text is controlled by the CSS line-height property. The aim of line spacing is to make the text as easy to read as possible. As with all other uses of white space, it’s a balancing act.
Some examples:
In the above example there is not enough space between each line of text. This makes the paragraph difficult to read. A page full of text spaced as in the example above would appear cluttered.
In the above example there is too much line spacing. This makes each line appear disconnected from the last and each line almost appears like a new paragraph.
The final example is a better. The text is well spaced, easy to read and the paragraph is displayed as a clear, consistent block of text.
Further reading
Minimal Sites – A minimal design gallery, full of websites that use white space well
CSS Typography: Techniques and Best Practices – article from Six Revisions
Typographic Contrast and Flow – article from Web Designer Wall
0 Comments
You can be the first one to leave a comment.