Whitespace guides the way the sound of silence speaks volumes. Why nothingness can work hard for you.
The blank page stares back at you, taunting you to fill it with images and words. Its emptiness is like the awkward lull in a conversation, and our instinct is to fill it with words. The void makes us uncomfortable, and seeing or hearing nothing when you paid for something, makes you question why you even hired a professional. But whitespace is a powerful design tool—think of it as the lesser-known sister of the sound of silence.
Effective use of whitespace
You’ve seen those websites. The ones crammed full of single-space type, graphics everywhere, and (gasp!) flashing fonts and corny cartoon animations. With just one quick glance, you know the website was created by an amateur lacking in artistic skills. Obviously, we can’t all be artists; someone has to run the business, right? And we get it, there are products and services to explain, required regulations to post, disclaimers to mention, and all the FAQs you want to address right up front. If your target market is a computer user who loves to read websites like a novel or pick through junk, then you’ve found yourself the perfect format. For the other 99.9% of online shoppers, you can safely assume that they have no intention of reading a novel. They want answers, and a well-designed website will help them find it quickly.
Logically speaking, would you want to read a crowded page that looks like someone was having fun trying out every funky font? You don’t, and neither does anyone else. In fact, leaving little to no whitespace is not only ineffective, but it pretty much guarantees that no one will ever read what you put there. Your target audience will immediately bounce, because hey, there’s a million other options out there, so why should they struggle to read through that hot mess? It’s a usability nightmare.
In the world of web design, fewer words and clean space are the cool kids. Whitespace (or negative space) is simply space on the page that contains no content, words, pictures, or graphics. You’ll see it between columns, lines, or letters and in the margins, padding, gutters, and the space surrounding images and graphics.
Think of whitespace as the time your site visitors need to chew and swallow between bites. It maximizes focus, emphasis, and organization. And just because it is called whitespace doesn’t mean it has to be white. For instance, on a website with a blue background, there would be plenty of blue space around blocks of text or design elements, which just as effectively guides the eye to the content you want them to see or read.
Benefits of whitespace in your business website
- Guides the eye.
When readers glance at a website, whitespace cues them on where to start reading. Whitespace in the margins helps lead the reader’s eye along each sentence, while space between paragraphs leads the reader to continue down through the text. Whitespace breaks up a page of black or grey text, making it easier on the eye, and it can prolong the time readers stay before they bore or tire. - Allows the reader to focus on what is important.
White space allows the reader to focus on important visual cues, such as bullets, headings, font styles, type size, and photos. These design elements help the reader organize the information in a meaningful way. Most business website users scan for information using headings and titles. Making sure there is enough white space to focus on those cues helps your audience find the information they want. - Allows the reader access to all the information.
The “more is better” philosophy is a myth. Trying to cram all the information you can into a small space turns the reader off, and you’ve accomplished nothing. Sometimes more is just more, making your business website noisy and overwhelming. If it’s easily accessible, you stand a better chance that your readers will actually read the text. Whitespace keeps your site visitors reading and helps to improve reading comprehension. It’s also a good idea to keep this in mind for document attachments (like PDFs), which have a tendency to be heavy on the text. - Get your calls to action (CTAs) noticed.
Want to convert visitors into real leads? Every marketing type will tell you that prominent CTA buttons are a must. For your business, this could mean quote requests, free downloads to enroll them in your ongoing communications and marketing campaigns, or appointment requests to discuss customer needs. Providing good use of whitespace means those CTAs will stand out from the rest of the page, making them easier to find and act upon.
Next time you’re surfing the net, take a good look at the websites you frequent. How do those sites employ whitespace? Now think about the websites you’ve bounced off of because they looked messy and were difficult to read and navigate? Compare how they use whitespace to the websites you prefer. You may find that your own business website isn’t as effective as you thought. Make your website effective—embrace the space!
Say no to cluttered websites. Ultimately, you want a balanced, easy-to-navigate site where your visitors can find what they need quickly and intuitively. Here are a few examples of sites we’ve designed that effectively utilize white space:
And just for giggles, here’s the World’s Worst Website for your viewing pleasure.
Website typography & readability
Another important aspect of usability and effective business website design is web typography. As the industry has evolved, we’ve seen larger typography and faster page-load speeds. The latter is a particularly critical factor in your website’s success (especially when it comes to good search engine optimization and being found on the web). By building a clutter-free site with a responsive website design, using web fonts, and content-first page loads, you create an aesthetically appealing and uncomplicated user experience for your business site visitors. The time you put up front into the design nearly ensures that your visitors will take the time to stay on the site long enough to find the information they seek. And isn’t that the whole point of a business website?
Website typography has a large effect on your site’s readability. Macrotypography is a big word referring to the readability and design of paragraphs and the page. The best business websites make their website a positive reading experience, which is a key part of creating a great user experience (UX). If your business website has poor readability, your site visitors will get confused and frustrated. But when it is a great reading experience, they won’t notice a thing and will stay because your site is engaging and helpful. It’s a big win-win!
Typography tips:
- Font type. Use fonts that are easy to read based on where the text is used. For example, short, easy-to-scan headlines allow you to exercise a bit of creativity for your font choice, but you’ll want to use both capital and lowercase letters because the height variation makes scanning easier. For longer blocks of text, use sans serif fonts. Standard sans serif fonts that are easy to read on a screen include Arial, Helvetica, Lucida Sans, Trebuchet, and Verdana.
- Font size. Let’s be real—your users are going to come at you from a variety of devices, especially smartphones, so just plan on designing a responsive website. To ensure your fonts remain readable on all formats, you will want to use percentages rather than fixed heights. (We actually use viewport units for our websites rather than percentage, but for our purposes here, just know that it allows for flexibility based on screen resolution.)
- Contrast. Another factor in readability is the contrast between background and text. This is critical for ADA website compliance, which requires a contrast ratio of at least 4.5 to 1 in most situations. Having too little contrast makes reading especially difficult and tiring on the eyes. And absolutely avoid bad color combinations like blue on red or white on yellow and busy background images that make your head spin.
- Line length. While we typically don’t mind reading longer lines of text for our print media, shorter is better on the web. Keep lines under 70 characters (depending on font size), or consider using columns to avoid scaring your visitors off. The idea is to allow the reader’s eyes to flow easily from the end of one line to the beginning of the next. Another assist to your readers is to use short paragraphs to help your readers scan the text more easily (some say 75% of site visitors prefer to scan text rather than read word for word).
- Header usage. Using headers effectively is essential to readability. They are vital to hierarchy, which guides readers where to read. Headers assist in scanning by differentiating sections from body text. Headers are typically indicated by size and boldness. When using headers and titles, be sure to use H tags rather than just bold or italics to maintain ADA website accessibility standards.
- Website content readability. Keep in mind that your typical site visitor reads at a seventh to eighth grade level (not an insult, just a fact about the average reader’s comfort level). The best way to be safe and keep people reading is to make sure your content is conversational and avoids the use of industry-specific jargon. You don’t want to make your readers think they have to use a dictionary just to understand what you are trying to say. You don’t have to prove to anyone that you have an advanced degree—just communicate in a friendly and inviting way. And don’t feel like you are “dumbing” things down—even highly literate audiences prefer easy-to-read copy.
The purpose of your business website is to draw potential customers in and have them respond to your CTA. Make sure your website looks and works worthy of their business. Keep your content scannable using whitespace, headers, and good font choices, and keep your website content conversational by avoiding jargon. When you follow these best practices with your business website design and layout, you’ll attract and connect with the customers you want.