White space and layout

Space is information

Things close together are read as belonging together, and things far apart are read as separate. An answer engine gets none of that and reads the markup order instead. That is automatic and it happens before any of the words are read, which makes spacing a structural decision.

So a caption sitting closer to the next photograph than to its own is actively misleading, regardless of what it says. The layout has already told the reader something wrong.

Most layout faults on small business sites are this rather than anything aesthetic: related things spaced apart, unrelated things pushed together, and the reader doing the sorting.

Why crowding happens

Because everything on the page feels important to the person who built it. The instinct is to fit all of it above the fold, which produces a screen where nothing stands out.

Scrolling is not a problem to be solved. Visitors scroll without thinking about it, and a page that respects that is far easier to read than one compressed to avoid it.

The discipline is deciding what the page is for and letting that dominate. Our page on homepage structure covers making that decision deliberately.

Consistent gaps beat considered ones

Pick a small set of spacing values and use only those. A page built from three or four consistent gaps looks designed; one where each gap was judged individually looks approximate, because it is.

Consistency also survives editing. A page where somebody adds a section later will still look right if the spacing is systematic, and will drift if every value was chosen by eye.

This is the single easiest thing to get right without a design background, and it accounts for a surprising share of the difference between a professional site and a homemade one.

What good spacing looks like

The list below is what to check on any page. Every item is a relationship rather than a measurement, which is why they transfer to any screen size.

• More space above a heading than below it
• Captions closer to their own image than to the next
• A clear gap between sections, larger than between paragraphs
• Generous room around the main action
• A text column that does not span a wide screen
• Consistent margins on every page
• Nothing touching the edge of the screen on a phone

Alignment does quiet work

Things lining up along an invisible edge read as ordered. A page where headings, text and images share left edges looks composed without anybody noticing why.

Centred text is the common exception that causes trouble. A centred paragraph is harder to read because each line starts in a different place, so keep it for short lines only.

Avoid mixing alignments within a section. That is the layout equivalent of mixing typefaces, and it reads as indecision rather than variety.

On a phone, space matters more

A narrow screen makes crowding worse, because the same content occupies more vertical space and everything is closer to everything else. Layouts that feel tight on a desktop become oppressive on a phone.

Keep content off the edges. Text running to the screen edge is uncomfortable to read and looks broken, and it is one of the most common mobile faults.

Our page on mobile layout covers the wider set of adjustments, of which spacing is the one people most often forget to revisit.

When a page feels wrong

Look at your spacing before anything else. The instinct is to change colors or type, and the actual problem is usually that two things are too close or a section has no room around it.

Squint at your own page until the words blur. What remains is the layout, and problems that were invisible while reading become obvious as blocks in the wrong relationship.

Our page on modern design covers the broader picture, and space is the element that carries most of it for a small business site.