In the context of web designing, white space is referred to the space between different design elements. The area between text, paragraphs, images, links and footers etc. are referred as white space. White space is not necessarily “white” it is essentially a blank space.
Use of white space helps in scanning different sections of websites and web pages. While designing web site template designers are often found to underrate the importance of white space. It reduces the amount of text that a visitor is required to scan at one go. Visual separation of different designing elements can be effectively done by using white space. A web site template using white space effectively appears clean, uncluttered and fresh. Let us explore several aspects of white space (also referred as negative space) that are relevant to web designing.
While designing a web site template white space is used by designers for organizing text, graphics creating contrast, highlighting and guiding readers’ eyes from one topic to another. This increases the scope of scanning and readability. Positive space – the space where images and text are positioned, can be highlighted appropriately with negative space. White space is also used to create a sophisticated elegance for highly valued brands. White space is associated with something that is expensive and high quality.
Types of white space
There are two types of white spaces in web designing. Active white space is the space intentionally left out for a better structure and layout. It is also used for emphasizing the content. Empty space around the page or blank areas within the content are left blank as by product of layout process during web site designing. This area is called passive white space.
A web site template is more readable and easy to scan when there is enough space between lines. If lines are pushed too close, scanning becomes difficult. When the lines are too far apart the words are virtually disconnected from each other and the visitors feel confused. Optimum line spacing can be achieved with the help of CSS.
Space between the lines is also referred as – leading. This is usually set at 120-150% of the point size of type or font. As such, for type of 10pts a leading of 12-15pt is considered optimum. Leading that is smaller than this may not make the copy more legible or scannable. Larger leading may lead the eyes of visitors to wonder around the content and coherency is lost.
This is the space around a particular element while designing a web site template. It can be controlled by using CSS margins. Try to maintain a consistent margin throughout the layout. With a consistent spacing, a web site template looks more organized and professional. Think of vertical and horizontal separation while planning about the margin.
Too large margin creates a feel of disconnection. While designing a web site template you should be careful about the pixels that can fit on the screen. It is not desirable to waste too much real estate of screen on margin.
While designing web site template you need to ensure that text is not pressed up against images, sidebars, navigation bars, headers. Use necessary margins to give your readers a breathing space. A site is designed to fit within the common screen resolution 800×600 pixels. This has been expanded to 1024×768 over time.
Headings are great ways for separating content into manageable portions. There are different types of headings H1, H2, H3 etc. that highlight different sections of content. The white space used below and above a heading is very useful for separating relevant portions of content.
Balancing the layout
White space is used for creating a balanced layout. Without ample white space viewers can’t rest their eyes. A web site template should try to maintain a balance of open space and content. Online marketing agencies have found out that too much white space in wrong areas like just above footer may misguide the users. They may leave the page thinking it has ended. People expect less white space in web content than in print medium.
Designing web site template with white or negative space has gained attention in recent time. Its presence or use is not defined by the amount but by the way it is distributed on a website. Some users see too much wide space as an indication that the site is void of sufficient content.
White space is increasingly gaining desired importance in designing web site templates. It is now treated as an integral part of designing rather than just as a background. Several template designers are using it for highlighting content, making web pages readable and balancing the layout of a website. Conventions and customs are being replaced with innovations and creativity. While balanced use of negative space helps in achieving desired results, getting overboard may ruin its benefits.
Image from gardena.com