Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

One of the greatest assets in graphic design is actually the absence of graphics. White space is essential to graphic design. The key is to create enough white space so the eye knows where to go and can rest a bit when it gets there, also known as readability. However, white space isn't just applicable in terms of text, but it is very relevant to the relation of any element to another. White space should be considered first to separate content before using lines and other dividers. I know we all throw around the phrase white space quite often, but let's not forget that white space isn't just white. It is whatever color the background is. Let's look at an example of how a spacing change dramatically affect the look of a layout.

Ineffective use of white space in a design

Effective use of white space in a design

Obviously, the first example is very crowded and uninviting to the eye. If the user's eye feels like this, think about how the user feels about your page. The second example is very open and easily readable. This welcoming effect adds to the ability of the eye to scan the page, which ultimately, allows the user to find the content they are looking for. Sadly, users generally don't want to read all of your content; they just want to read the part that contains their search.

Spacing Elements and Attributes

Controlling the spacing is very easy by using a combination of smart CSS and HTML. The default styling of HTML elements lacks the appropriate spacing in most contexts. (Scientists, not graphic designers, invented HTML) A small list of CSS properties that can manipulate spacing:

  • line-height
  • margin
  • padding

Every one of those CSS properties are covered in the CSS tutorial. However, there is a point that too much white space leads to less than desirable effects. Unfortunately, there isn't a standard quantified way to determine the appropriate size. That, my friend, is up to your crafty eye.

Reference about Spacing in Graphic Design

As I've said, I'm not a designer, but just a programmer. You should consider reading the following book to understand graphic design from a designers perspective.

Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    stumpfmi June 23, 2013, 6:59 p.m.

    This is one of the best tutorials on this site, especially with the linked content



Advertisement