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.
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.