Typographic Hierarchy: Balancing Heading and Body

A solid typographic hierarchy guides the reader's eye across the page without effort: first the title, then the subheading, and finally the body text. What establishes this order is rarely color or ornament; most of the time it comes down to differences in size and weight. In this article I'll walk through how to balance heading and body, which ratios to reach for, and how to write all of it in CSS in a way that stays maintainable.

Why hierarchy is built from size and weight

When you open a piece of text, your eye catches the largest and darkest element first. The brain flags it as "important" and starts reading there. So hierarchy is really a map of priority: as a designer you're telling the reader "look here, then there." You do this with three core tools:

• Size (font-size): Bigger gets read first. It's the strongest and fastest signal to perceive.
• Weight (font-weight): Even at the same size, bold text steps forward. It's how you add emphasis without changing size.
• Whitespace: The space above a heading separates it from the previous block and signals "new section."

Color and italics help too, but size and weight carry the skeleton. A good hierarchy keeps working even when you print the page in grayscale.

Choosing a scale: use a typographic ratio

Instead of picking heading sizes at random, use a modular scale. You set a base size (usually 16px / 1rem for body) and multiply each level up by a fixed ratio. Common ratios are 1.2 (minor third), 1.25 (major third), and 1.333 (perfect fourth). Larger ratios feel more dramatic; smaller ones feel calmer.

:root {
  --text-base: 1rem;     /* 16px body */
  --ratio: 1.25;
  --text-sm:  calc(var(--text-base) / var(--ratio));
  --text-lg:  calc(var(--text-base) * var(--ratio));
  --text-xl:  calc(var(--text-lg)  * var(--ratio));
  --text-2xl: calc(var(--text-xl)  * var(--ratio));
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }

The payoff is consistency: because every size is mathematically related, the page looks "in tune." You can change the ratio in one place and rescale the whole hierarchy at once.

Fluid typography: scaling with the screen

On mobile a 48px heading can swamp the screen, while on desktop the same heading can feel small. Rather than stacking fixed media queries, building a fluid scale with clamp() is much cleaner:

h1 {
  /* min, preferred (viewport-based), max */
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

clamp() holds the heading at 2rem on small screens, never lets it exceed 3.5rem on large ones, and smoothly interpolates in between based on viewport width. For body text a fluid scale is usually unnecessary; a fixed base of 16–18px is the most comfortable reading range on most devices.

Keeping body text readable

If half of hierarchy is headings, the other half is body. However striking the heading, body text that doesn't get read collapses the design. A few solid rules:

• Line length: 50–75 characters per line is the most comfortable range. In CSS you cap it practically with max-width: 65ch;.
• Line height: line-height: 1.5–1.6 is ideal for body. Headings can be tighter (1.1–1.25), because wide leading looks scattered at large sizes.
• Contrast: Setting body text in very dark gray (e.g. #1a1a1a) rather than pure black reduces eye strain, but keep the WCAG contrast threshold (at least 4.5:1).
• Rhythm consistency: Tie the spacing between paragraphs to the line height; arbitrary margin values break the vertical rhythm.

Weight and contrast: striking the balance

Size isn't the only thing that carries the balance between heading and body; weight matters just as much. A classic mistake is pairing a heading that's both large and very heavy (e.g. 800) with very thin (300) body — that contrast feels unbalanced and "shouty." A safer recipe:

• Use 400 (regular) for body; 300 reads too faint in long text.
• 600–700 is enough emphasis for headings; the size difference already draws attention.
• Use <strong> and <em> for emphasis; bolding everything emphasizes nothing.

If you mix two typefaces (e.g. serif for headings, sans-serif for body), limit it to two and make sure their x-heights are compatible. In most cases, different weights of a single family give the cleanest result.

Testing the hierarchy

You can validate a design's hierarchy with two quick tests. First, the squint test: narrow your eyes at the screen; as the text blurs, only the large/dark elements should remain distinguishable, and the reading order should still make sense. Second, the grayscale test: turn off color; if the hierarchy still works on size and weight alone, it's solid. For accessibility, use heading levels (h1 → h2 → h3) according to semantic order, not visual size; screen readers navigate this structure.

Frequently Asked Questions

How many different sizes should I use on a page?

Usually 4–6 is enough: one main title, two or three subheading levels, body, and a small/helper text. More than that blurs the hierarchy instead of clarifying it; every extra level asks the reader for one more decision.

Should I use px or rem?

Prefer rem for font sizes: it respects the user's browser font preference and improves accessibility. You can use px for small details that genuinely need to stay fixed, like a border.

Is it a problem to use the same typeface for heading and body?

No — in fact it's often the safest choice. You can build a strong hierarchy with different sizes and weights of a single family. Mixing two typefaces takes skill, and a poor pairing reads as amateurish.

Typographic hierarchy is the quiet but most decisive layer of design. If you want size, weight, and whitespace working together as a system for your brand, get in touch — let's build a readable, balanced, and scalable typography system together.