Consistency Across Nine Pages

How a site drifts

Nobody decides to have four button styles.

A page is built, then another page needs a button in a slightly different context, and rather than reusing the existing one somebody makes a new one.

Repeat that over two years across nine pages and several people and the site has accumulated variants nobody chose.

The result reads as slightly amateur without anybody being able to say which page is wrong.

What should be decided once

• Headings, at three sizes and no more.
• Body text size and line spacing.
• Buttons: one primary, one secondary.
• Links within text.
• How a price is displayed.
• Space between sections.

The last is the one that produces most of the felt inconsistency and is never discussed. Sections separated by different amounts on different pages make a site feel unsettled even when every other element matches.

Three heading sizes is enough

Since this is where small sites accumulate the most variants.

A page title, a section heading, and a sub-heading covers almost every small business page.

Each should be visibly different from the others, since two headings a couple of pixels apart read as a mistake rather than as a hierarchy.

Where a page seems to need a fourth level, it usually needs restructuring instead, because four levels of nesting is more than a reader can hold.

Make the difference between levels obvious: a clear step in size, and weight where that helps.

Then use them in order without skipping, which matters for anybody navigating by headings as well as for how it looks.

Write it down somewhere

The step that makes it survive.

One page listing each element and how it looks: the sizes, the colours, the spacing, and an example of each.

That does not need to be elaborate, and for a small site it can be a single page on the site itself that nobody links to.

Its purpose is that the next person building a page has something to copy rather than something to invent.

Without it, every new page is a fresh set of decisions made by whoever is available, which is exactly how the drift happened.

Include what not to do, briefly, since that is what a new person most needs to know.

A worked example

A business site built over three years had nine pages and, on inspection, five button treatments, four heading sizes within a few pixels of each other, and prices shown three different ways.

Nobody had noticed individually, and everybody agreed the site felt slightly untidy.

They chose one primary and one secondary button, three heading sizes with clear steps between them, and one way of showing a price.

Applying it took an afternoon because most of it was in shared stylesheets rather than on individual pages.

The site looked considerably more assured afterwards with no page having been redesigned.

The most visible improvement came from standardising the space between sections, which nobody had expected.

Do it in the stylesheet, not the pages

Since where the change is made determines whether it holds.

Setting a heading size on one page fixes one page and leaves the next person free to do something else.

Setting it centrally applies everywhere and makes the consistent version the easy one to use.

That is the practical mechanism behind all of this: consistency survives when the standard is the default, and erodes when it depends on people remembering.

Ask whoever maintains the site to define these centrally, which is a small piece of work and prevents recurrence.

Where a page needs an exception, that should be a deliberate override rather than a new definition.

Consistency is not sameness

Worth separating, since the objection is usually that it will be boring.

Using the same button, heading, and spacing everywhere does not mean every page looks identical.

Pages differ by what is on them: a service page with a price table, a case page with photographs, a contact page with a form.

The consistent elements are what let those differences read as intentional rather than as three sites stitched together.

Variety belongs in the content and the imagery, not in the fifth button style.

Check it by putting pages side by side

Since the drift is invisible one page at a time.

Screenshot each page and lay them out together on one screen.

Differences that were unnoticeable in sequence become obvious in parallel: the heading that is slightly larger, the button that is a different shape, the section spacing that varies.

Do it at phone width as well, where the differences frequently increase because each page collapses differently.

That is a twenty-minute exercise and it produces a specific list rather than a general feeling.

The words drift too

Worth extending, since the same accumulation happens in language and is less visible than in styling.

One page says quote, another says estimate, a third says pricing, and all three mean the same thing.

The same happens with the name of a service, the name of the enquiry action, and how the areas you cover are described.

Pick one word for each and use it everywhere, since a customer who reads two names for the same thing has to work out whether they are different.

Add that short list to the same page as the visual decisions, because whoever writes the next page needs it more than they need the heading sizes.

The counter-case

Perfect consistency is not worth chasing.

A landing page built for a campaign will reasonably differ, and forcing it into the standard removes the reason it exists.

Very small sites also have little to be inconsistent about, and formalising three pages is more process than they need.

And an old site being replaced shortly does not merit the tidying.

Decide the recurring elements once, define them centrally, write down the list, and compare your pages side by side.

What to do

1. Screenshot every page and compare.
2. Count the button and heading variants.
3. Choose one primary and one secondary button.
4. Settle on three heading sizes.
5. Standardise the space between sections.
6. Define it centrally, not per page.
7. Write one page describing it.

Step five returns the most for the least effort, since uneven spacing is what makes a site feel unsettled and almost nobody looks for it.

The service page version of this is covered in making one template work for nine services.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.