Try the Generator

Why Hierarchy Is the First Thing Readers See

Before anyone reads a single word, the eye scans the page for structure: the big title, the section breaks, the body blocks. That scan takes a fraction of a second, and it decides whether the page feels organized or noisy. Typographic hierarchy is the system that makes the scan succeed. It answers three questions on sight: where does this page start, how is it divided, and what should I read first.

Weak hierarchy is easy to spot and hard to fix with tweaks. A page where every heading is nearly the same size forces readers to parse the text to find structure. A page where the h1 is enormous and everything else is flat leaves a one-note composition. The fix is a deliberate ladder: sizes that step down consistently, weights that reinforce each level, and spacing that groups content under its heading.

Screen readers depend on the same ladder in a more literal way. Assistive technology offers a document outline built from the heading elements themselves, skipping whatever visual styling is applied. A page that uses headings in document order, h1 to h6 without skipping levels, gives screen reader users the same structure the eyes get, which is why the generator keeps the semantic tags honest rather than styling divs.

How the Levels Are Assigned

The generator takes a modular scale and assigns its steps from the top down. The h1 gets the highest step, the h6 gets the step nearest the body size, and body text keeps the base size exactly. Captions sit below the scale at about 81 percent of the base, sized for labels, image credits, and helper text that should never compete with the reading.

Weights follow the size logic in reverse. The h1 leans on its size alone and sets a bold weight because it is the page title. The h6, close to body size, needs a bold weight to stay distinct. Levels in the middle step down through the weights so each heading separates from the ones above and below it.

Line heights tighten as sizes grow. Body text at 1.6 carries long paragraphs comfortably. An h1 at 1.05 keeps a one or two line title compact and prevents the large type from dominating the vertical space. Margins follow the conventional stack: more space above a heading than below, so each heading visually attaches to the content it introduces.

Serif Display or Single Family

The display serif toggle switches between the two classic structures. With it on, headings render in a serif face and body text stays in the sans, an editorial look that suits long-form articles and brand sites. With it off, everything uses one family and the hierarchy carries entirely through size, weight, and spacing, which suits products, dashboards, and documentation where a second font feels decorative.

Both are defensible, and the choice mostly follows the content. Text-heavy pages earn the contrast of a display serif. Interface-heavy pages usually read cleaner with a single family and careful weight steps. The font pairings library has tested pairs for the first route, and the font catalog shows which families offer the weight range the second route needs.

How to Use the Generator

1. Set the base size to your body size, usually 16px for the web.
2. Pick a ratio. Start with the major third at 1.25 and move steeper only if the h1 needs to dominate.
3. Decide on the serif display toggle by matching your content, as described above.
4. Scan the preview: the h1 should lead the page, the body should read easily, and no level should look like an accident.
5. Copy the CSS and paste it over your base stylesheet.

Common Hierarchy Mistakes

The most common mistake is skipping levels. An h2 followed directly by an h4 breaks the outline for screen readers and makes the visual ladder feel uneven. Use the levels in order, or restructure so the skipped level is not needed.

The second is styling by tag name on one page and by class on another. When the marketing page has h2 at 31px and the app has h2 at 24px, the hierarchy is two different systems wearing the same label. Export one set of rules and reference it from both places.

The third is overusing the display face. A serif h1 on every page is fine; a serif applied to every heading down to h6 starts to look fussy, and tiny serif text reads poorly on screens. Let the body sizes stay in the sans, which is the default this generator exports.

The fourth is ignoring small screens. A 49px h1 that works on desktop can push content below the fold on a phone. Keep the ratio modest, let the h1 wrap naturally, and use a fluid approach like the fluid type generator when the largest sizes need to scale down gracefully.

Where This Fits with the Other Tools

The hierarchy generator sits between the scale tools and the delivery tools. The type scale calculator tunes the ratio, the vertical rhythm calculator aligns the headings to a baseline grid, and this tool turns both into complete heading rules. The letter spacing calculator adds the tracking, and the typography playground is where the finished hierarchy gets tested with real content before the brand kit bundles it with the rest of the tokens.

FAQ

What is type hierarchy?

Type hierarchy is the ordered set of sizes, weights, and spacing that tells readers what matters on a page. The h1 says this is the subject. The h2 divides it into sections. Body text carries the reading. When the hierarchy is flat, everything shouts equally; when it is too steep, headings tower over thin content.

How many heading levels should a website use?

Most pages need three, and almost none need all six. A blog post uses an h1 for the title, h2 for sections, and h3 for the occasional subsection. The lower levels exist for dense documentation and dashboards. This generator maps all six so the scale is consistent when you do reach for them, then you simply stop using the levels your content does not need.

Should headings use a different font from the body?

Often yes, and that is the classic editorial pairing: a serif for display and a sans for reading, or the reverse. The contrast in form reinforces the hierarchy even before size does. When the contrast comes only from size, a single family with strong weight steps is the safer choice. The font pairings library has tested combinations for both approaches.

Why do smaller headings need higher relative weight?

Because size is the strongest signal, the biggest headings carry hierarchy on size alone and can afford regular weight. As headings shrink toward body size, weight takes over the job of separation. An h6 at body size only reads as a heading because it is bold. This generator raises the weight on the lower levels for exactly that reason.

What line height should headings use?

Tighter than body text. Headings rarely wrap to two lines, so they do not need the generous leading that long paragraphs do. Very large display headings can go below 1.1. The rule of thumb encoded here: the bigger the heading, the tighter the line height, with h1 at 1.05 and body at 1.6.

Does this replace a type scale calculator?

No, it builds on one. A type scale produces the sizes; this tool assigns those sizes to semantic levels, adds weights, line heights, and margins, and exports the result as complete heading rules. Run the type scale first to tune the ratio, then use this tool to distribute the steps.