Close
Type at least 1 character to search
Back to top

Website white space

All web designs aim to communicate with the visitor. But crowding everything together is one way of making sure that information is not clear to anyone. With the use of white space and minimal web design, readers can find with they want easily, while you have control over what areas of a page grab the attention. Simplicity shouldn’t be underrated. 

Div layouts

To make use of white space on your web site, don’t try and pack every available space with a word or graphic. Giving each element room to breathe with enough space can be an instant website improvement, helping the visitor to feel less daunted and bring your site up to date with current trends. 

Take real care over the amount of margin you are using, and be consistent with it right across the web site design. Apply it to all of your main divs including header, body, navigation and footer, to make sure nothing is cramped up. Don’t go crazy though as too much spacing can disconnect things or make the site too wide for some browsers. The key word here is “balanced”.

Text line-height

Most sites will leave the line height set to “default”. I never find this is quite enough and blocks of text can be quite difficult to read. Try and go for a line height above the font size. So if it’s a 14px font, go with an 18px line height. Or 12px font, 14px line height. Different fonts will produce different amounts of space, so experiment a bit with this and see what works best in your case.

{module_contentholder,name=”Blog ad”}

Headings

Well defined and spaced web page headings can break up blocks of text and help your reader to scan the page.

Ensure your H1s, h2s and h3s work in a logical way, and each has enough top padding to separate them from the previous paragraph. They should also have a good amount of bottom padding to avoid be squashed up with the paragraph text below. Try going for 30px top padding with 10px/20px bottom padding. The space you create with this will add some real clarity to the web design.

Images 

Like everything else, images need enough margin. If any text is too close to the picture, text can be hard to read. A good tip is to apply a coloured border to your image, and then add a small amount of margin. This gives the image enough room on it’s own, without the text floating off.

Remember to treat white space as more than just a background. It’s an important part of your web site design which can improve your layout and content impact. 

Post a Comment