Headings let a reader find their section without reading the page, which is how most people use a business site. That only works if the levels are visually distinct, spaced so each heading attaches to the content below it, and frequent enough that no section is longer than a screen or two.

The visual job, separate from the structural one

Heading tags describe a page's structure to machines. How headings look decides whether a reader can use that structure, and the two are set independently.

A page can have perfect markup and be unusable if every level looks identical, and it can look clear while the underlying structure is wrong. Both matter and this is the visual half.

Levels have to look different

The most common failure. An H2 at twenty-four pixels and an H3 at twenty-two pixels are the same heading as far as a reader is concerned, because nobody measures type.

Distinguishing levels needs a visible step, and size alone is usually not enough. Weight, colour, and spacing all contribute, and a combination reads more clearly than a large size difference alone.

The practical test is to look at the page from across the room. You should be able to identify which headings are major sections and which are subsections without reading any of them. If they all read as one level, the hierarchy exists only in the code.

How many levels

Two visible levels is enough for most small business pages. Three at most.

Beyond that the distinctions become too fine to perceive, and a page needing four levels is usually a page that should be two pages. The depth is a signal that the content has outgrown its container rather than a design problem to solve with more type sizes.

Spacing, which does more than size

A heading belongs to the content that follows it, and spacing is what communicates that.

The rule is more space above a heading than below it. Equal spacing makes a heading float between two sections, and a reader momentarily cannot tell whether it introduces what follows or concludes what came before.

That sounds like a small thing and it is one of the most common reasons a well-written page feels disorganised. Fixing it is a stylesheet change affecting every page at once.

How often

Frequently enough that no section runs longer than about two screens on a phone.

A section without a heading for eight hundred words gives a skimmer nowhere to enter and nothing to navigate by. On a phone, where the screen shows perhaps two hundred words, that is four screens of undifferentiated text.

The counter-error is a heading every two sentences, which fragments the content into a list of labels and removes any sense that ideas connect. Roughly every two hundred to four hundred words is a reasonable rhythm for a business page.

What a heading is not for

Length of the heading itself

Short enough to scan, long enough to say something.

A heading running to two lines on a phone is doing too much, and one word is usually a label rather than a heading. Between three and eight words covers most cases, and the useful test is whether it says what the section contains rather than naming a topic.

That wording question is covered separately in writing for people who skim; the design question is whether it fits on one line at the size you have chosen.

On a phone

Two adjustments matter at narrow widths.

The size difference between levels should be smaller than on a desktop, because a heading scaled proportionally from a large screen becomes enormous on a phone and pushes content down. Most well-built sites reduce the scale rather than the hierarchy.

And the spacing should not shrink proportionally. Space is what does the structural work in a single-column layout, and reducing it along with everything else is what makes phone versions of pages feel like a continuous scroll of undifferentiated text.

The check

Scroll your own page on a phone at speed, without reading.

You should be able to tell where sections begin and roughly what each covers. If the page reads as continuous text with occasional slightly larger words, the headings are present in the markup and doing none of the work they exist for.

Frequently asked questions

How many heading levels should a page have?

Two visible levels for most small business pages, three at most. A page needing four levels is usually a page that should be split into two.

Why do my headings not look like a hierarchy?

Usually because the size difference is too small. Levels need a visible step, and combining size with weight, colour, and spacing reads more clearly than size alone.

How should headings be spaced?

More space above than below, so each heading visually attaches to the content it introduces. Equal spacing makes a heading float between sections and momentarily confuses the reader.

How often should headings appear?

Roughly every two to four hundred words, so no section runs longer than about two screens on a phone. A heading every two sentences fragments the content into labels.

How long should a heading be?

Three to eight words, fitting on one line at the size you have chosen. Two lines on a phone is doing too much, and a single word is usually a label rather than a heading.

What changes on mobile?

Reduce the size difference between levels, since headings scaled proportionally from a desktop become enormous. Do not reduce the spacing, since space is what creates structure in a single column.

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.

Pages that read as one long block on a phone?

We fix the heading scale and spacing in your stylesheet, which corrects every page at once.

Start a Conversation