Design Principles: Space

Become a Subscriber

You may have already heard the term “white space.” When designers throw this term around, they are talking about the spacing between various elements in a design. Space is one of the most important design principles when it comes to heavy copy such as magazines and websites. However, space also plays an important role in brand and logo design as well. Space has the ability to create a feeling of movement in a design, as it plays a primary role in changing establishing the focal point of the eye. Too much space and the user will evaluate the various regions as unrelated, while too little space can cause confusion or disconnect.

Space Matters - Graphic showing the importance of white space and separating elements

Bad use of space is often the most common mistake made by designers and is most quickly felt by users. The first consideration when evaluating space should involve estimating the weight of the various components in your design. This should be done on multiple axis and the design can be split based upon this weight. Take a look at where the eye focuses by only using space:

Space in Logos - A graphic showing how with only space alone design can have movement or focal points

You may notice that without any other principles of design involved, we can already create feelings of movement. Combined with other principles, space can give a logo a feeling of dimension, movement, or personality. Space also becomes incredibly relevant for typography, user interfaces, and overall user experience.

Typography should probably be an entire chapter by itself. Most design communicates with text as much or more than graphics. Many of the core elements of typography are affected by space more than any other design principles. In a specific font, the kerning, leading and measure are all defined by space. Take a minute to look at the example below, and form your own opinions, then read on to learn some typography definitions:

Good and Bad Typography - A graphic that shows examples of type

Kerning: the space between individual letters. In the example, you might have noticed that ‘Good’ header has a more readable kerning, while the ‘Bad’ header feels a bit too compact. Tight or loose kerning can be used in many different ways, and neither should be viewed as good or bad by default. Generally speaking, you want to leave the kerning to defaults defined by the typeface creator when it comes to large copy, and tweak for headers or branding. However, this is making the assumption that you are working with very well established typefaces. If working with indie-created typefaces, rules go out the window and you may have to tweak significantly in many areas. Leading: also known as line-height or line-spacing, this is the space between sentences. In the example, the paragraph on both sides use the same 38pt font but the copy on the left has a 46pt line-height vs 34pt on the right. Which do you find more pleasing and readable? Generally you should have more leading for body text and less for headers. Measure: is the boundary width and height for which your copy is confined. In the example, the left size represents a good max-width measure and the right represents a width that is too narrow. These rules can be different based on the length of your content. If the left column in the example was much wider, the text would be harder to read, as eye movements tend to be jittery when forced to continuously follow a horizontal path. Narrow measure can be easier to follow for the eye, but create pauses in thought and as such make harder to track context and meaning.

Space is very important for in publication for both web and print design. Have you ever tried to read a news website that had too much clutter? Commonly on the web you will find advertisements colliding with body copy or a lack of space between paragraphs, and so on. This lack of white space is such a common issue in web design, that Apple decided to build a “reader” mode into Safari, so that users could extract out the main article content in a more readable format. Take a look at the progression of design and process following the thoughts and rules we have established:

Process of creating space in design

First and foremost, you should always give thought to where you want the user to look. This will help you establish a grid and take into consideration some of the principles of balance you have already learned about. After deciding what the regions are on one axis, you should switch perspective and re-evaluate on the perpendicular axis. In the example, we use a news page as our concept, so it is easiest to split up regions on the x-axis first. After that, we try to establish our vertical spacing between text and regions. Finally, we err on the side of too much white space. Usually the first pass at white space is biased and often has too little space, so evaluating the last step with a fresh perspective is best.