Home » Tutorials » Graphic Design » White Space

White Space

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

Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "White Space". After Hours Programming. Accessed on April 23, 2024. https://www.afterhoursprogramming.com/tutorial/graphic-design/white-space/.

  • Stewart, Suzy. "White Space". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/graphic-design/white-space/. Accessed 23 April, 2024.

  • Stewart, Suzy. White Space. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/graphic-design/white-space/.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.