Improve Your Blog Design with Whitespace

In a previous post we talked about 3 Easy Ways to Improve Your Blog Design by proper placement of key text, consistent alignment of sidebar elements and decluttering of social icons.  Well, it's time to look at one more -- whitespace ! It's all about showcasing your blog content and making it easy for visitors to continue reading.

What is whitespace?

Whitespace  refers to that part of the page left blank. Some call it 'negative space.'  The terms come from the fact that most letters, ads, brochures, etc. used to be printed on white paper. For the purpose of blog design, the term refers to the space between elements like headers, images, columns, paragraphs and lines of text.

White space should not be considered merely 'blank' space — it is an important element of design which enables the objects in it to exist at all, the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition. -   Wikipedia

Why do I need whitespace; isn't content enough?

Proper spacing between different elements of your blog allow visitors to focus on each element rather than look at a cluttered clumps of text and images. Simply adding spacing between lines and paragraphs makes your content easier to read.

Your header, post column and sidebar also need sufficient negative space. Within a header, the image, blog title and description are more appealing when properly spaced. You don't want anything to detract from your great blog content!

How can I enhance whitespace in my post content?

Unlike word-processing software, you can't just open a page setup menu to specify text-size and spacing. But you can use key editing options, often overlooked,  to create negative space.

Create more paragraphs

Very simple editing step. Many people cram too much into one paragraph. So review your draft and use that enter key often to break up text! Give you readers' minds and eyes a break.

Add images and subheadings above key sections

Thumbnail size image and icons can separate thoughts and make scanning easier. So can subheadings. Every template comes with different size heading text, larger and bolder than regular paragraph text.

How can I automatically adjust whitespace in my lines and paragraphs?

Granted margins, padding and line spacing defaults are hidden in your template. Pressing the enter key to separate lines can have vastly different results from theme to theme.

Select the right template styling

So the first thing is to look for the right balance before you activate a template. Buyer beware.Examine the theme's demo or preview very carefully. Don't just go for the flashy slideshows, wallpapers and bright colors!

Look at column size and spacing. Do widgets have good padding and margins? Is the text spacing between lines crammed? Also look for a wider design to take advantage of today's wide screens. Wider structures, allow larger text with greater line spacing.

Make basic adjustments to the template

There are just a few elements you can change without impacting the core structure of your template: padding, (top/bottom) margin and line-height.Line-height controls the space between text lines. Our current template uses a font size of 1.4em; line height of 1.571em and paragaph margin-bottom of 1.571em.

Let's translate that:

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses - W3schools

So right away you say, 'this is supposed to be easy!' Don't worry you can do this. Let's use the Herdo Live theme as an example:

Only after installing this theme for a recent client did we realize the default is double line spacing.  It's as clear as day in the demo, but we missed it. Here's what the demo disclosed in the elements section (click image for larger view): too much negative space between lines --- adversely affecting reader concentration.

Demo Elements - click to enlarge

Here's how I made the simple change. First I suggest you install the theme on a test blog. If you must use the live blog, make sure you backup the Style.css and perhaps put your blog in maintenance mode --- often taking so many precautions ensures nothing will happen! lol

1. Go to dashboard, Appearances, Editor.
2. Select the Style.css to edit.
3. Do a Ctrl +F or find for the words "line-height:". This theme has one associated with the pargraph tag, p. So that's what we want.
4. The current value is 200%  (double the size of the font). Just change that to 150%.
5. Press Update File button

This image shows the five steps graphically.

Paragraph style change - click to enlarge image.

Let's hear from you!

Do you notice formatting and negative space in blogs on your reading list? What is your reaction when you see a narrow, tightly spaced posts?