How to Create a Clear Typographic Hierarchy on a Web Page?

Open a page that was assembled in a hurry and you will often see the same thing: the headline is 32px, the section headings are 28px, the card titles are 26px, and the body text is 18px with bold sprinkled through every paragraph. Everything is shouting, so nothing is heard. Readers do not know where to start, and they drift down the page looking for a foothold before giving up.

That problem is a missing typographic hierarchy. This article explains what hierarchy is, the visual tools you can use to create it, how to build a type scale and map it to semantic HTML, and how to test whether your hierarchy actually works. The examples use plain CSS and Tailwind CSS v4, but the principles apply to any stack.

What Is Typographic Hierarchy?

Typographic hierarchy is the ordering of text elements by importance, expressed visually so that readers can tell at a glance what to read first, second, and third. It answers three questions for every visitor:

1. Where am I? The page title and primary heading.
2. What is here? Section headings and subheadings that outline the content.
3. What are the details? Body text, captions, labels, and metadata.

A good hierarchy works even when the reader does not read. Someone skimming for five seconds should be able to reconstruct the outline of your page from its headings alone. If you are new to the broader subject, our overview of what typography is and why it matters covers the foundations.

Most pages need only three to five distinguishable levels. More than that and the differences become too subtle to perceive.

Level	Role	Typical element(s)	Purpose
1	Page title / hero headline	h1	Confirms the page's topic
2	Section headings	h2	Outline of the main content
3	Subsection headings	h3, card titles	Grouping within a section
4	Body text	p, li	The actual reading
5	Supporting text	captions, metadata, labels	Context that can be skipped

The Tools of Hierarchy

You have six main levers. Strong hierarchies use two or three of them together at each step instead of relying on one.

Size

Size is the most obvious tool and the easiest to overuse. Differences need to be large enough to read as intentional. A jump from 18px to 20px reads as a mistake; a jump from 18px to 28px reads as a heading.

Weight

Weight separates levels without needing more space. A semibold h3 at the same size as body text can still stand apart. Our guide on using font weight to guide attention goes deeper on weight contrast.

Color and Contrast

Darker, higher-contrast text reads as more important; muted text reads as secondary. Use this for metadata such as dates and bylines, but keep any secondary text at a minimum of 4.5:1 contrast (WCAG 1.4.3) so it remains readable.

Spacing

Space above a heading should be noticeably larger than space below it. That binds the heading to the content it introduces and separates it from the content before it. This principle of proximity is covered in our article on using whitespace in typography.

Typeface

A contrasting typeface for headings, such as a serif display face over a sans-serif body, adds a strong signal. It is optional; a single family with good weight range can carry a full hierarchy.

Case and Letter Spacing

Small uppercase labels with added tracking (around 0.05–0.1em) work well for eyebrow text above headings and for table headers. Avoid uppercase for long headings.

Step 1: Start with the Body Text

Hierarchy is relative, so you need an anchor. The body text is that anchor because it is the most-read element on the page. Set it first:

• Size around 16–20px depending on content density.
• Line height around 1.5–1.7.
• Line length of 45–75 characters.

Everything else is defined relative to this baseline. If you change the body size later, the rest of the hierarchy should scale with it, which is why rem and em units matter.

Step 2: Build a Type Scale

A modular scale multiplies a base size by a fixed ratio to produce each step. It gives you consistent, harmonious jumps instead of arbitrary numbers. The detailed method is in our guide on building a modular type scale; here is the short version.

Ratio	Name	Steps from 1rem (rounded)	Good for
1.200	Minor third	1, 1.2, 1.44, 1.728, 2.074	Dense apps and dashboards
1.250	Major third	1, 1.25, 1.563, 1.953, 2.441	Blogs and documentation
1.333	Perfect fourth	1, 1.333, 1.777, 2.369, 3.157	Marketing and landing pages
1.500	Perfect fifth	1, 1.5, 2.25, 3.375, 5.063	Editorial, big hero headings

In CSS, define the scale once as custom properties:

:root {
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
}

If you want headings to grow on wide screens, use clamp() so each step has a minimum and maximum:

:root {
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.75rem + 2vw, 3.25rem);
}

Step 3: Map the Scale to Semantic HTML

Visual hierarchy and document structure should match. Screen reader users navigate by heading level, and search engines use headings to understand topics. Use exactly one h1 per page, nest h2 and h3 in order, and never skip levels just to get a particular size.

<article>
  <p class="eyebrow">Guide</p>
  <h1>How to Plan a Content Migration</h1>
  <p class="lede">A step-by-step approach for moving 2,000 pages without losing traffic.</p>

  <h2>Audit Your Existing Content</h2>
  <p>Start by exporting every URL...</p>

  <h3>Identify Pages Worth Keeping</h3>
  <p>Look at traffic and backlinks...</p>
</article>

Then style the elements from your scale:

h1 {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.2;
  margin-block: 2.5em 0.6em;
}

h3 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.75em 0.5em;
}

.lede {
  font-size: var(--step-1);
  color: #374151;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4b5563;
}

When a component needs a heading that looks smaller than its semantic level — say, a card title that must be an h3 but should look like body text plus weight — use a utility class instead of picking the wrong element. Decouple style from structure.

Step 4: Use Spacing to Group Content

Size and weight tell readers what is important. Spacing tells them what belongs together. The rule is simple: more space above a heading than below it, typically a ratio of 2:1 to 4:1.

.prose > * + * {
  margin-block-start: 1em;
}

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

.prose h2 + * {
  margin-block-start: 0;
}

Tighter line height on headings (1.1–1.3) also helps, because multi-line headings with body-text line height look like separate lines rather than one unit.

Step 5: Limit the Number of Styles

Hierarchy breaks down when every component invents its own text style. Audit your CSS or design file and count the distinct combinations of size, weight, and color. Most sites can work with:

• Three or four heading styles.
• One body style, plus one larger lede style.
• One or two small styles for captions, labels, and metadata.

That is seven or eight styles in total. If you have twenty, merge the near-duplicates. A 17px and an 18px body style are not two levels; they are one level with an inconsistency.

Implementing Hierarchy in Tailwind CSS v4

Tailwind v4 uses CSS-first configuration. Define your scale in @theme, including paired line heights, and the matching text-* utilities are generated automatically.

@import "tailwindcss";

@theme {
  --text-sm: 0.8rem;
  --text-sm--line-height: 1.4;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.45;
  --text-xl: 1.563rem;
  --text-xl--line-height: 1.3;
  --text-2xl: 1.953rem;
  --text-2xl--line-height: 1.2;
  --text-3xl: 2.441rem;
  --text-3xl--line-height: 1.1;
}

@layer base {
  h1 {
    @apply text-3xl font-extrabold tracking-tight;
  }
  h2 {
    @apply mt-10 mb-3 text-2xl font-bold;
  }
  h3 {
    @apply mt-7 mb-2 text-lg font-semibold;
  }
}

Keeping the scale in tokens means your designers and developers share one vocabulary, and nobody reaches for text-[27px] to make something "a bit bigger."

How to Test Your Hierarchy

You cannot judge hierarchy while staring at your own design for hours. Use these quick tests:

1. The squint test. Blur your eyes or apply a CSS blur filter to the page. You should still see clear blocks: one dominant headline, a few section headings, and gray body text.
2. The headings-only test. Hide everything except headings. Does the list read like a coherent outline?
3. The five-second test. Show the page to someone for five seconds, then ask what it was about and what they would do next.
4. Heading structure check. Use the browser's accessibility tree or an extension such as HeadingsMap to confirm there is one h1 and no skipped levels.
5. Mobile check. Large desktop heading sizes often become cramped on phones. Make sure the hierarchy still holds at 375px width.

A quick blur toggle you can paste in the console:

document.body.style.filter =
  document.body.style.filter === "blur(4px)" ? "" : "blur(4px)";

Common Hierarchy Mistakes

• Too many levels that look alike. If two adjacent levels differ by less than about 20% in size and share the same weight, merge them.
• Bolding everything. Bold loses meaning when half the page uses it.
• Skipping heading levels for style. Choosing h4 because it is the size you want breaks document structure.
• Equal spacing everywhere. Uniform margins flatten the outline because headings float between sections instead of attaching to their content.
• Competing focal points. A huge hero headline, a bright banner, and a large image all fighting for first glance.

---

Typographic Hierarchy FAQ

Conclusion

A clear typographic hierarchy is a set of deliberate decisions: a body text anchor, a modular scale with distinct steps, headings that match semantic HTML, spacing that groups related content, and a short list of reusable text styles. Each level should differ from its neighbors in more than one way, and the whole page should read as an outline even when nobody reads the body.

Build the hierarchy into tokens and base styles so it survives future pages and new team members. Then test it with blur, headings-only, and five-second checks on both desktop and mobile. When readers can find what matters without effort, you have done the job.

Here are some useful references for going deeper on typographic hierarchy:

1. MDN Web Docs: The HTML Section Heading elements — semantics and accessibility guidance for h1 through h6.
2. W3C WAI: Headings tutorial — how to structure headings for assistive technology users.
3. Tailwind CSS Docs: font-size — defining text sizes and paired line heights with @theme.
4. Butterick's Practical Typography: Headings — practical rules for sizing, spacing, and emphasizing headings.
5. Google Fonts Knowledge: Choosing type — guidance on building hierarchy with typeface and weight choices.