Elle & Company

Mastering Whitespace In Web Design

Rosa RoncoLauren Hooker5 Comments

Current design trends show a preference for clean, simple and minimalistic web designs. These simplistic layouts enhance the performance of a website, improve readability and lead to a cleaner and more professional look and feel.
 
A clean and simple web layout can be achieved thanks to an important design element: whitespace.

Mastering Whitespace in Web Design - The Elle & Company Collaborative

What is whitespace?


In web design, whitespace is the space between and around the elements of a web page, such as graphics, columns, images, text and others.
 
It’s also known as negative space, as whitespace doesn’t necessarily have to be white, a colour or black background can be also whitespace in the design. It’s just blank space.


How Whitespace Affects The Design


Text blocks, images and whitespace allow web designers to apply some principles of design to achieve:

  • Repetition – When the whitespace is used to separate groups of elements, it creates rhythm and a sense of movement.
  • Balance – When the visual weight is distributed equally in a web page, the whitespace provides stability and structure to a design.
  • Proximity – Whitespace can be used to separate or to connect elements in a web page. Wider spaces separate elements from each other and narrower spaces connect elements between them.
  • Emphasis – Whitespace can create a visual hierarchy in web design. The larger the whitespace around an element is, the more it stands out. Web elements gain importance by being separated from others.

How Whitespace Affects Legibility/Readability


Unlike a newspaper, web pages crowded by information can be hard to read and visually unattractive. Whitespace improves the readability of a web page creating layouts that are easy on the eyes.
 
Whitespace makes people feel motivated and less intimidated to read your copy by:

  • making the content easier to scan
  • keeping the navigation clear and smooth
  • allowing the reader to take breaks to absorb the message and improving comprehension

For example, instead of having a long text, break it into sections that allow you to add some whitespace every 2 or 3 paragraphs, or organise your layout in 2 or 3 columns to add some vertical whitespace between them.


How Whitespace Affects The Message


Whitespace can be used to convey a variety of meanings, some of which include:

  • Luxury – generous whitespace is used by many brands to communicate “luxury”, as it can convey a sense of up-market or high-end feel to the design
  • Sophistication – it can be used to achieve a classy and elegant brand positioning
  • Cleanliness – used by many cleaning brands to communicate neatness, sanitation, disinfection and freshness
  • Purity – it’s commonly used in medical websites to communicate sterility and asepsis
  • Openness – used by many financial institutions, law firms and professional service companies to transmit a sense of receptiveness, understanding and transparency
  • Calmness – used by many insurance brands to create a sense of tranquillity and peace of mind

How To Control Whitespace In Web Design


Whitespace in web design can be divided into micro whitespace and macro whitespace and can be controlled through CSS properties.

A. Micro whitespace
 
It’s the space between small elements, such as characters and lines of text. The micro whitespace improves the legibility of a web page, making the content more readable and easy to scan.

Design Tip: The leading (line-height) should be set at 120-150% of the point size of type or font. For example is your font size is 12pts your leading should be something in between 14-18pt.
 
Your CSS should look like something similar to this:

p { 
color:#000000;
font-size:14px;
font-family: Arial, sans-serif;
letter-spacing: 1px;
line-height:16px;
}

B. Macro whitespace
 
It’s the space between major elements such as the edges of a layout, margins and padding around pictures and blocks of text.

  • Whitespace around the layout can be controlled with CSS properties like top, right, bottom, left
  • Whitespace around an element can be controlled by the CSS property ‘Margin’
  • Whitespace between the element border and the element content can be controlled by CSS property ‘Padding’

 Any of these distances or macro whitespaces can be expressed in lengths – pixels, em, etc – or in percentages.

With the current fluid layouts - the ones in which distances are expressed in percentages, and may vary from screen to screen – web designers lose control of whitespace. If whitespace is essential to your design, then don’t use percentages in margins and padding. Use lengths instead.

The problem with lengths is that they will be the same in small and big devices, losing the responsiveness of your design. To keep your web design responsive while using lengths, you will have to manually tailor your design to different devices (tablets, iPhone, and Androids) by using CSS media queries.

Your CSS should look like something similar to this:

/* Desktops and laptops */
@media (min-width: 960px) {
body { 
width:960px;
margin: 0 auto 0 auto;
}
}

/* Tablets and iPads */

@media (min-width: 600px) and (max-width: 960px) {
body { 
width:600px;
margin: 0 auto 0 auto;
}
}

/* iPhones and Androids */
@media (max-width: 600px) {
body { 
width:400px;
margin: 0 auto 0 auto;
}
}

Design Tip: Set left and right margin values to auto to centre the body on the screen.


When Whitespace Should Be Reduced


As a general rule people expect less whitespace in web content than in print medium. Too much white space can mislead visitors or make them abandon the page too soon, as they didn’t realise there is more information below.
 
As whitespace is generally used for the up-market, discount packages, sale announcements, offers and any other message aimed to communicate a low pricing value should use less whitespace.


Learn To Love The Whitespace


Whitespace often causes controversy between designers and clients. While designers love it, many clients won’t understand the need of all of that empty space, due to two common misconceptions:

  • Waste – Clients tend to think whitespace is just a waste of space. They want to maximise the space available by adding more text and design elements that help to get their message across.
  • Scrolling - many clients will want to place as many content as possible above the fold in the belief that web users don’t scroll. However, modern studies have shown that users routinely scroll to the very bottom of pages.

Wrap-up


Learning to see and control whitespace is perhaps the most important skill you can learn as a designer. When a web design strikes you as amateur, it’s probably because of the incorrect use of whitespace.


About the Author


Rosa Ronco is an Australian-based web designer, and owner of Grafika Studio. After working for more than a decade in global organisations in Australia and Europe, she opened her own design studio in 2013 to help new brands and intrepid start-ups achieve their dreams of living a creative life and being paid for doing what they love the most.

Web   |   Facebook   |   Twitter   |   Instagram   |   Behance