How to Format Headings for Scannable Content?

Picture a developer landing on your documentation page from a search result. They are looking for one thing: how to configure a single option. They will not read your introduction. Their eyes jump from heading to heading, and if none of them says what they are looking for within a few seconds, they hit the back button and try the next result. Your headings are the only part of the page that most visitors will read.

Formatting headings for scanning is part writing, part structure, and part typography. This article covers all three: how to write headings that carry information, how to structure them in HTML so both people and assistive technology can navigate, and how to style them so they stand out, wrap cleanly, and link directly to their sections.

What Makes a Heading Scannable

A scannable heading lets a reader decide, without reading the content underneath, whether that section is relevant. Scannable headings share four traits:

1. They are visible. Clearly distinct from body text in size, weight, and spacing.
2. They are informative. They describe the content, not just label it.
3. They front-load keywords. The important words appear in the first two or three words.
4. They are consistent. Parallel structure across sibling headings, so the pattern is easy to follow.

Eye-tracking research from the Nielsen Norman Group describes the layer-cake pattern, where users read headings and skip body text until they find a relevant section. Well-formatted headings make that pattern efficient. Poor headings force users into slower reading patterns or out of the page entirely.

Write Headings That Carry Information

Typography cannot rescue a vague heading. Before styling anything, edit the words.

Weak heading	Scannable heading	Why it works better
Overview	What a CDN Does for Your Site	States the topic in plain words
Configuration	Configure Caching Rules in next.config.ts	Names the task and the file
Pricing	Plans Start at $12 per Month	Delivers the key fact in the heading
Other Things	Common Errors and How to Fix Them	Specific and promises a payoff
Step 2	Step 2: Connect Your Domain	Keeps the sequence and adds meaning

Practical rules:

• Front-load the keyword. Readers scan the left edge of a heading. "Caching rules for static assets" is easier to scan than "How you can set up rules for caching static assets."
• Keep it short. Aim for under about 60 characters for h2 headings so they fit on one or two lines.
• Use parallel structure. If one step heading starts with a verb, all steps should start with a verb.
• Use questions sparingly. Question headings work well when they match search queries and FAQ sections, but a whole page of questions becomes tiresome.
• Avoid clever wordplay. Puns are hard to scan and even harder to search.

Structure Headings Correctly in HTML

Screen reader users navigate by headings — it is one of the most common ways they move through a page. Search engines also use heading structure to understand topics. The visual hierarchy should exactly match the HTML hierarchy.

<main>
  <h1>Deploying a Next.js App to a VPS</h1>

  <h2>Prepare the Server</h2>
  <h3>Install Node.js</h3>
  <h3>Create a Deploy User</h3>

  <h2>Build and Run the App</h2>
  <h3>Build in Standalone Mode</h3>
  <h3>Run with a Process Manager</h3>

  <h2>Put Nginx in Front</h2>
</main>

Rules for structure:

• One h1 per page, describing the page's topic.
• Do not skip levels. An h2 should be followed by an h3, not an h4, when you go deeper.
• Do not choose a level for its size. If you need a small-looking h2, style it with a class.
• Do not use headings for non-heading text. Taglines, card metadata, and decorative captions should be paragraphs or spans.

Check your outline using the browser's accessibility panel or a headings extension. Our guide on creating a typographic hierarchy explains how visual levels should map to these semantic levels.

Style Headings to Stand Out

Size and Weight

Each heading level needs a clear step up from body text. Use a type scale so the jumps are consistent:

:root {
  --text-body: 1.0625rem;
  --text-h3: 1.3rem;
  --text-h2: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  --text-h1: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem);
}

h1 {
  font-size: var(--text-h1);
  font-weight: 800;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 650;
}

Weight contrast helps a lot here, especially for h3 and h4 levels that are only modestly larger than body text. See our guide on using font weight to guide attention.

Line Height and Letter Spacing

Large headings need tighter line height than body text, around 1.1–1.25, so multi-line headings read as one unit. Very large headings often look better with slightly negative tracking:

:is(h1, h2, h3) {
  line-height: 1.2;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.02em;
}

Spacing Around Headings

Put more space above a heading than below it so it visually belongs to the section it introduces. This is the most underrated scanning aid: it creates visible chunks on the page.

.prose h2 {
  margin-block: 2.5em 0.6em;
}

.prose h3 {
  margin-block: 1.8em 0.4em;
}

The broader principles are explained in our article on using whitespace in typography.

Color

Headings can use the same color as body text or a slightly darker one. Avoid making headings lighter than body text; that inverts the hierarchy. If you use a brand color for headings, make sure it still meets 3:1 contrast for large text (WCAG 1.4.3) and ideally 4.5:1.

Make Headings Wrap Cleanly

Long headings that wrap with a single word on the last line look awkward and slow scanning. CSS can balance them:

:is(h1, h2, h3) {
  text-wrap: balance;
}

text-wrap: balance evens out line lengths across a heading of up to a few lines. It is supported in all major browsers and degrades gracefully. Learn more in our guide on text-wrap: balance and pretty.

Also cap heading width so very wide containers do not produce one 120-character line:

:is(h1, h2) {
  max-width: 30ch;
}

Use this cap on standalone headings like hero titles rather than inside an already narrow article column.

Add Anchor Links and Tables of Contents

In long content, headings are also navigation targets. Give each h2 and h3 an id so users can link directly and so you can build a table of contents.

<h2 id="configure-caching">
  <a href="#configure-caching" class="heading-anchor">Configure Caching</a>
</h2>

.heading-anchor {
  color: inherit;
  text-decoration: none;
}

.heading-anchor:hover::after {
  content: " #";
  color: #6b7280;
}

:is(h2, h3)[id] {
  scroll-margin-top: 5rem;
}

scroll-margin-top offsets the scroll position so a sticky header does not cover the heading after a jump.

If your content is Markdown rendered with MDX or a remark/rehype pipeline, plugins such as rehype-slug and rehype-autolink-headings generate IDs and anchor links automatically:

import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

export const mdxOptions = {
  rehypePlugins: [
    rehypeSlug,
    [rehypeAutolinkHeadings, { behavior: "wrap" }],
  ],
};

Support Headings with Other Scanning Aids

Headings work best alongside other cues that let readers sample the content:

• Short paragraphs of two to four sentences under each heading.
• Bold key phrases within paragraphs, used sparingly.
• Lists for steps, options, and requirements.
• Tables for comparisons.
• Summary or TL;DR boxes at the top of long articles.

A good test: read only the headings and the bold text. If you understand the article's main points, the page is scannable.

Heading Density: How Often to Use Them

There is no exact rule, but for web articles a new h2 roughly every 200–400 words keeps the page scannable without fragmenting it. Use h3 subsections when a section grows beyond that or contains distinct parts. If a section has only one subsection, you probably do not need the h3.

Very short sections under every heading are also a problem: a page with a heading every two sentences reads like a list of fragments.

Common Heading Formatting Mistakes

1. Headings too close in size to body text. A 19px heading over 18px body text does not register.
2. Equal spacing above and below. Headings float between sections instead of attaching to their content.
3. All-caps long headings. Uppercase slows reading; keep it for short labels.
4. Underlined headings. Underlines look like links.
5. Ending headings with periods. Headings are labels, not sentences, unless they are questions.
6. Skipping levels for visual effect. Breaks screen reader navigation and document outlines.
7. Keyword-stuffed headings. They read badly and are less scannable, not more.

---

Scannable Headings FAQ

Conclusion

Scannable headings start with the words: specific, front-loaded, short, and parallel. They need correct HTML structure so assistive technology and search engines see the same outline that sighted readers do. Then typography makes them work visually — clear size and weight steps, tight line height, asymmetric spacing, balanced wrapping, and anchor links for navigation.

Test your pages by reading only the headings. If that skim tells you what the page covers and where to find each answer, your headings are doing their job. If not, rewrite the words before you reach for more CSS.

Here are some useful references for going deeper on headings and scannable content:

1. Nielsen Norman Group: Text Scanning Patterns: Eyetracking Evidence — the research behind the layer-cake pattern.
2. W3C WAI: Headings tutorial — how to structure heading levels for accessibility.
3. MDN Web Docs: The HTML Section Heading elements — semantics and usage notes for h1 through h6.
4. MDN Web Docs: scroll-margin-top — keeping anchor targets visible below sticky headers.
5. GOV.UK Design System: Type scale — a well-documented example of a heading scale built for clarity.