Using White Space Effectively In Web Design
Posted on 12. Jan, 2009 by Brian in Web Design
Jump To A Section:
- What Is White Space?
- How To Use White Space Effectively
- White Space In Modern Web Design
- Further Reading
What Is White Space?
Put simply, white space is the space between different elements of a design – the area between text, images, paragraphs, headers, footers, links, etc. It is the space between different elements on a page, the space between letters, and the space between lines in a paragraph.
White space allows for easier scanning of a website. It reduces the amount of text visitors see all at once and makes reading much easier. It allows for the visual separation of design elements without adding any new elements such as visible lines or boxes. It is clean, looks professional when used correctly, and gives a site an uncluttered and fresh feel.
White space is sadly one of the most underrated elements of a strong web design. Just because it isn’t shiny or glossy doesn’t mean it isn’t important or essential to a website.
To start our exploration into this subject, let’s take a look at a couple of websites that are using white space effectively in their design.
1. Made By Sofa
Made By Sofa creates a strong design message by using a large image at the top of the site with content and navigation below. Sofa works with white space to separate three elements: titles, paragraphs, and tagline. Take a look at the following close-up:
Note: Shaded areas represent white space
This creates an organized and separated feel making it easier for readers and potential clients to scan their website quickly and efficiently.
2. Information Architects
Information Architects creates a clean and uncluttered feel on their website by using white space to separate their logo, text, paragraphs, and headings. The following image is a close-up of the Information Architects website.
Note: Shaded areas represent white space
How To Use White Space Effectively
Using white space effectively can be tricky business. Here are a few tips to get you started:
1. Line Spacing
The white space between lines in a paragraph makes all the difference when it comes to readability and scannability on a web page. If the lines are pushed too close together, it becomes nearly impossible to scan. If the lines are spread too far apart, your words will begin to float apart and feel disconnected from one another.
Line Spacing Is Too Close
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.
Line Spacing Is Too Wide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.
You want your line spacing to be just in the middle of the above two examples – not too much, not too little. For information on controlling your line spacing with CSS, read this article on the CSS line height property.
2. Margins
A margin is the space around a particular element in a design. CSS Margins are a great way to control this space to your advantage. When working with margins, there are a few things to remember:
1. Consistency
Keep your margins consistent throughout your layout. The more consistent the spacing, the more organized and a professional your site will look. When thinking of margins, think in both vertical and horizontal separation, as both have an effect on the overall design.
2. Not Too Much
Don’t make your margins too large. Too much separation can make a website feel disconnected, as seen in our line spacing example above. Also keep in mind that there are only a certain amount of pixels that can fit on a screen, so don’t waste too much screen real estate on margins (unless of course the context of the site calls for such margins).
3. Not Too Little
Remember, we’re learning about white space here, so be sure that there is some! It looks shoddy to have text pressed up against a picture, sidebar, header, navigation bar, or any other element of a design. Keep these spaced out to give your readers room to breathe.
3. Minimalist Does Not Equal White Space
One of the problems in the modern design world is that too many people equate white space with minimalistic. That is just plain wrong. A site can be packed with content, but be very easy to scan and read with a clever use of white space.
Take Smashing Magazine for example. This is a website literally overflowing with content, yet they have managed to make their site easy to scan and read. They were able to achieve this through a careful selection of colors, text sizes, and the use of white space.
Upon closer examination:
Notice how there is visual separation between text and images, between navigation elements, and between the content and the sidebar? This is the effective use of white space.
4. Headings
Headings are a great way for you to separate your content into manageable chunks. By reading this article, you are seeing four different types of headings in use: H1, H2, H3, and H4. These headings are the large, bold, underlined “section headers” that you have been seeing throughout this post.
What you need to look at is the white space above and below these headings, and how they influence the scannability of this post. For example, my H2 tags (the second largest headers) have a 5 pixel separation between the text and the underline. They also have a 15 pixel margin above and below the text. This creates white space to help organize and section the content.
By creating this white space, it becomes much easier for readers to scan through the post and identify which bullet or which heading they would like to learn more about, rather than digging through twenty paragraphs of solid text.
If you’re interested in the CSS used to create my H2 tag, simply copy and paste this code into your style.css file:
h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}
5. Images
The separation between images and text can make or break a design. If the words are too close to the picture, the content will become very cluttered and hard to read. If the words are too far from the picture, the post becomes disconnected and loses its flow.
On Web Design Tuts, I use a special class of images to help organize my posts and make them as visually attractive as possible. Whenever I write a post, much like this one, I use the following code for an image:
<img class="imagelist" src=# />
To style this image class in CSS, I did the following:
.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}
Notice how I have kept my margins a consistent 15 pixels in both my images and headers?
White Space In Modern Web Design
You now should be aware of why white space is needed: to clean up a site, make it easier on readers, and to appear more professional. You should also have a couple ideas of how to effectively use white space using consistent margins, text separation, and the visual separation of images and headers. However, you may still be wondering what a “good” use of white space really is.
Here are some examples of websites that effectively use white space to help communicate their message to their visitors.
1. Surfstation
Observe how the use of white space has effectively separated the content from the sidebar on Surfstation’s website. It is this separation that helps visitors scan the website, picking out information that is relevant to their own needs.
2. Jason Santa Maria
Jason’s website uses a wise combination of lines and white space to help present his content in a clean and elegant manner.
3. Digital Mash
Digital Mash, the website of Australian designer Rob Morris, utilizes a very simple design with a navigation, main image, and four content areas at the bottom of the page. Notice how the margins are consistent and the copy is very readable through the spacing of text and the use of headings and icons.
4. Odd Web Things
![Home [at] Odd Web Things](http://www.quicksnapper.com/files/1577/1993431092495ABC02BD326_m.jpg)
As a type-based website, Odd Web Things uses white space to separate their logo from their sidebar, their sidebar from their portfolio, and their portfolio from their blog.
5. Vitor Lourenco
Vitor’s site uses an all-white background with some typography here and there. A bold navigation, strong links, and simple color scheme make this website work.
@Twitter On White Space
When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of white space. I posed the question, “Why do you think white space is important in web design?” Here is what they said:
@Brendan – Whites space! I think it is critical in getting focus = conversion and it exudes confidence & professionalism when done well.
@Brandon – So that information and design elements can relate to each other properly, rather than blending in to a big mess of graphics.
@sthursby – When all you have is a couple seconds to entice a visitor into your site, you want the important info easily findable.
@Hyermish – White space gives the illusion of simplicity; sometimes helps to reduce clutter.
@Drew Douglass – My main reason would be to draw focus to a certain element on the page, and to leads eyes through the content.
Further Reading
On White Space In Graphic Design
CSS: Typography And White Space
For more web design tutorials check out the new tutorial site, The Tutorialist.
Share This Post
65 Responses to “Using White Space Effectively In Web Design”
Leave a Reply
User Link Feed
Please submit your resources at Elite By Design. Elite By Design provides more traffic for your submissions!
Htoo Tay Zar
12. Jan, 2009
Oh Really useful article. I’ve learn a lot from this.
ReplyBrandon Cox
12. Jan, 2009
Extremely thorough! You’ve used whitespace very nicely in the writing of this article! And thanks for including my twitter comment – I’m flattered. Love your site by the way!
ReplyPiotr Godek
12. Jan, 2009
Thank you for featuring my website in the article
Replyjoyoge designers' bookmark
12. Jan, 2009
really nice tuts thanks..
Replychris morin
12. Jan, 2009
Excellent examples of white space usage… Thanks!
ReplyFubiz
12. Jan, 2009
Great examples!
ReplyAaron Irizarry
12. Jan, 2009
Great Read Thanks! I will be send this article to a couple of the people at my work who swear that white space is of the devil!
keep em comin.
~ Aaron I
ReplySelene M. Bowlby
12. Jan, 2009
Great examples! I love a lot of white space in a design, unfortunately some clients believe in filling up every available space (of course that’s our job as designers to try to explain the importance of white space).
ReplyTimothy
12. Jan, 2009
Good list. Thanks.
Very useful topic
ReplyBrad C
12. Jan, 2009
Great article. I really loved how you decided to show the white space up close by using colored blocks to fill it in and show the padding between content.
I’m adding this to my list of “design 101″ sites I show to folks.
ReplyDigispiration » Blog Archive » White Space a Red-Hot Element in Web Design
12. Jan, 2009
[...] Just as with all of the text elements on your page that need to have a consistent amount of white space in between, your images should reflect that as well. Text should not run into the photo, and it’s a good idea to add a short caption describing the photo when applicable. It may not be the most interesting part of designing a Website, but white space is just as important as content development, design, and functionality. For more details about white space and examples of sites, please refer to the full article. [...]
ReplyBill Biwer
12. Jan, 2009
The next time a client asks if I can make this and this bigger to use the whole screen this will be emailed to them.
Nice post.
Replymike
12. Jan, 2009
This is a great break-down
I love white-space, tried to make the best use of it on my own site. Gonna need to bookmark this for later! 
Replymyows
12. Jan, 2009
whitespace ! So important and under-rated in web apps as well… when designing our soon-to-come online app, we payed extra attention to white space and the scanability of the page.
vlourenco has been a huge inspiration ! talking of which, don’t you love the way hugeinc.com uses white space as well ?
ReplyRob Fab
12. Jan, 2009
This should not be news to anyone with a degree in graphic design. One factor overlooked here as in most sites out there today is font size. Most designers carry what they were taught about font size used in print over into web design without factoring in the viewing distance to the design. In most cases today, that distance is further than it would be in print. Our flat screen monitors tend to be a little better than an arms length away from our eye so what in print might be set as 10 or 11 point text should be set as maybe 13 or 14 point in web design. Try it, it makes text so much easier to read and I’m not even talking about the older crowd with glasses.
ReplyDaily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
12. Jan, 2009
[...] Using White Space Effectively In Web Design | Web Design Tuts How to use White Space in Web Design (tags: web webdesign work white space design) [...]
ReplyDrew
12. Jan, 2009
A great article and excellent source of inspiration. Thanks for taking the time to put this together for all of us! Best of luck with the new WebDesignTuts, its looking great so far.
ReplyZach Dunn
12. Jan, 2009
One of the big hurdles I hit with clients is to overcome their desire to fill as much space as possible. White space is valuable in itself, and it is an uphill battle to express this sometimes.
Great post.
ReplyJordan Dobson
12. Jan, 2009
Using a grid really helps with whitespace as well.
We used a grid extensively when we built our new site to celebrate our 7 years as a company. Using a grid helps to create harmony between the elements and the whitespace on the page. Check it out.
http://MadeBySquad.com/
ReplyUsing White Space Effectively In Web Design | Web Design Tuts | web-web-guide
13. Jan, 2009
[...] Read the rest here: Using White Space Effectively In Web Design | Web Design Tuts [...]
ReplyOn UX » Blog Archive » Whitespace
13. Jan, 2009
[...] came across an article explaining what is white space and how to use it in modern web design. A must [...]
ReplyWordpress UK » Using White Space Effectively In Web Design | Web Design Tuts
13. Jan, 2009
[...] original here: Using White Space Effectively In Web Design | Web Design Tuts This entry was posted on Monday, January 12th, 2009 and is filed under Uncategorized. You can [...]
ReplyBrenelz
13. Jan, 2009
White space is indeed really important. I think it is the single biggest problem with beginner designers. They try and fill whitespace areas with content when It would be best not too.
Don’t worry I used to do it as well.
Replylinks for 2009-01-13 « links and tweets
13. Jan, 2009
[...] Using White Space Effectively In Web Design | Web Design Tuts "Put simply, white space is the space between different elements of a design – the area between text, images, paragraphs, headers, footers, links, etc." (tags: design webdesign web css tips tutorial resources article tutorials inspiration web-design grid whitespace white minimal space work minimalism how-to) [...]
ReplyOUVYT » Blog Archive » Daily Del.icio.us
13. Jan, 2009
[...] Using White Space Effectively In Web Design | Web Design Tuts [...]
Replypete dooley
14. Jan, 2009
G
o
o
d
ReplyAmber Weinberg
14. Jan, 2009
A lot of web designers I know often don’t have formal design training, although they are awesome designers. One thing I always have to remind them off is the use of white space.
ReplyUniverso em Bits | Minimalismo na web
14. Jan, 2009
[...] o que dificulta a navegação. (veja os sites Justin Kropp, Iconwerk da Frabel Fundation e este tutorial de como usar o espaço em [...]
Reply15 Dicas para seu Blog | DanAlvares.net!
15. Jan, 2009
[...] Uso efetivo de espaços em branco no Web Design (inglês) [...]
ReplyThe 25 Must Read Articles For Web Designers
16. Jan, 2009
[...] Using White Space Effectively In Web Design This article, while being very new has received much attention in its insight into the usage of white space in design. A great article. I expect to see much from this website in the near future. [...]
ReplyBergfest-Links III - datenkind/blog
21. Jan, 2009
[...] Using White Space Effectively In Web Design – Webdesigntuts.com präsentiert einen umfangreichen Artikel, der so ziemlich alle Aspekte hinsichtlich des gekonnten Ausnutzens des Weißraums informiert. Sehr lesenswert! [...]
ReplyINTERESSANTE: Design Minimalista « MAC MAX DESIGN
21. Jan, 2009
[...] que dificulta a navegação. (veja os sitesJustin Kropp, Iconwerk da Frabel Fundation e este tutorial de como usar o espaço em [...]
Replyfractalfrog
22. Jan, 2009
White Space? Bah, Humbug!!!
ReplyWhat the world *really* need, is more “White Space Eliminator” ;-D
Available here: http://www.makemylogobiggercream.com/
Inspiration: Whitespace, 10 examples | Jigowatt Premium Templates
26. Jan, 2009
[...] Reading: There’s an excellent article over at webdesigntuts detailing whitespace and it’s effectiveness in web site design most extensively. Share and [...]
ReplyMyInkTrail: Best of the Web, January 2009 | My Ink Blog
01. Feb, 2009
[...] Using White Space Effectively In Web Design Here is another area that young designers tend to struggle with. How and when to use white space. This is a good article about how to do it right, and it’s filled with quality inspirational examples. [...]
Replynino
03. Feb, 2009
I love this article,
ReplyI love this site.
But the white space between each post on the home screen has to be larger. I keep getting confused with the images and what posts they relate to.
Best of the Web: January - NETTUTS
04. Feb, 2009
[...] Visit Article [...]
ReplyMark Sanborn
04. Feb, 2009
Very nice!
Replyana
05. Feb, 2009
so much to learn, so little time
ReplyLeonid
05. Feb, 2009
To show structure one needs to space elements out… Thanks, good tutorial.
ReplyBrad
05. Feb, 2009
There’s definitely a ton of white space in this article! Great information.
ReplyDaily Digest for 2009-02-05 | Pedro Trindade
06. Feb, 2009
[...] Using White Space Effectively In Web Design | Web Design Tuts [...]
ReplyGreg
07. Feb, 2009
Very important stuff
Reply??? ??? | ???? ????? | ?????
07. Feb, 2009
[...] ???? ??? ?????? ?????. ?? ???? ?????? ????? ??????, ??? ?? ??? ???? ????? ?? ??????? ???????. ?? ?? ????? ???? ??? ???, ????? [...]
Replyricardo filipe » Blog Archive » CSS and Web design tips!
08. Feb, 2009
[...] Using White Space Effectively, by Web Design Tuts [...]
Reply3sides
08. Feb, 2009
Good round up there. Thanks
ReplyBest of the Web: January - All web resource stuff
13. Feb, 2009
[...] Visit Article [...]
Reply» Web Tasar?m?nda Bo?luklar? Verimli Olarak Kullanmak Duymadim.com: Bunudam? duymad?n? Araç Bilgisayar Bilim Donan?m Fragmanlar Genel Komedi Magazin Müzik Mobil Oyunlar Son Dakika Spor Teknoloji Uzay Video Yaz?l?m ?nternet Yeni teknolojiler Yeni tel
16. Feb, 2009
[...] Kaynak: Web Design Tuts [...]
ReplyMojito
21. Feb, 2009
Despite some of critical voices here I find this article very useful. The CSS code tips are great. I also disagree with some that the article is too long. It’s long enough.
Speaking as a beginner designer white applying white space was a real fight with an inner irracional force to pack lots of “cool&fancy” stuff into a design. One has to get used to feel the design with a big dose of objectivity, and leaving all the cool brushes for next projects.
I think the next step is to learn how to improve used white space. By improving I mean filling it with some graphical content, not leaving it just empty. That is encouraging!
Reply25??????? - iamjun.NET
15. Mar, 2009
[...] Visit Article [...]
Reply