Type Hierarchy Planner

The type hierarchy planner assigns every text role a step on one modular scale, then renders the whole outline so the jump between body and the smallest heading can be judged against the jump between the largest headings. Most hierarchies fail in the middle, not at the top.

What is Type Hierarchy Planner?

The type hierarchy planner takes a body size and a ratio, assigns each text role a step on the resulting modular scale, and renders the page outline the assignment produces. The default role map is the opinionated part, and it is worth reading before it is changed.

• Display sits six steps above the body at weight 700 and a line-height of 1.05, for a hero marketing line that is read once.
• H1 sits five steps up at the same weight and a leading of 1.1, which is the page title.
• H2 and H3 take four and three steps at weight 600, leading 1.15 and 1.2, for sections and sub-sections.
• H4 takes two steps at weight 600 and a leading of 1.25, which is the group label that most hierarchies get wrong.
• Body sits at step zero, weight 400 and a leading of 1.6, and Small drops one step below it at 1.45 for captions and metadata.

The scale itself is the familiar modular construction: each role's size is the body size multiplied by the ratio raised to its step number, so changing the ratio re-proportions the whole outline at once and changing the base shifts it. Every role above the body takes the heading weight set in the panel rather than keeping its own, which is the quick way to see whether a hierarchy is carried by size or by weight. The table reports each role in pixels, as a multiple of body size, with its weight and leading, and the exported CSS writes one class per role — so the plan transfers as a set of declarations rather than as a description.

The outline is where the plan is tested. In page mode, body-sized roles also render a paragraph beneath them, which is how a reader will actually meet them; in type-only mode the ladder is shown alone. Two things become visible that a table hides. The step from Body to H4 is usually the weakest link, because if the ratio is small the group label barely differs from the paragraph beneath it. And mid-step sizes are the giveaway of a hierarchy that grew by accident: when a design has a 15px role between a 14px and a 17px one, the map has a hole in it, and the honest fix is to move the role rather than add a step.

What the tool does not do is set the type, and the gaps are worth knowing before the role map is adopted.

• Sizes are not snapped to a baseline grid, so a plan that has to sit on one is re-derived afterwards with a grid tool.
• The sample copy is a single string, so roles are judged at one length rather than at the short and long lines real pages produce.
• Heading weight is uniform above the body, which hides the case where two headings need different weights to separate.
• Nothing accounts for measure, so a heading that works at 60 characters has to be re-checked at 20.
• The role list is fixed at seven entries, so a project with a different set of roles edits the exported classes rather than the map.

Read the map as a starting structure to be argued with rather than a specification to be applied.

How to use Type Hierarchy Planner

1. Set the body size and the ratio first, since every role's size is derived from those two numbers.
2. Read the role map table and check the multiple-of-body column, which is easier to judge than the pixel values.
3. Switch to page mode and compare adjacent roles in the outline, starting with the jump between the group label and the paragraph under it.
4. Set the heading weight and copy the role classes, remembering that the plan still has to be snapped to any baseline grid the project uses.

When to use Type Hierarchy Planner vs related tools

Reach for it when a page has too many text sizes to keep straight, when a heading level looks redundant against the copy beneath it, or when a scale has to be documented as roles rather than as a list of sizes. The role map is the transferable part. For the raw steps, the modular scale calculator and the type scale generator build the ladder, the vertical rhythm builder snaps each role's line box to a unit, and the CSS typography token generator exports the whole set as tokens.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Type Hierarchy Planner