Hierarchy

Typographic hierarchy is built by varying size, weight, color, and typeface classification. The most reliable hierarchy uses two typeface classifications, say a sans-serif for UI and a serif for long-form content, and one weight contrast within each. Avoid relying on size alone; a clear weight distinction between heading and body carries hierarchy even when sizes are similar. The type scale calculator generates mathematically coherent size steps; the typography playground lets you test heading and body together to feel the hierarchy in practice.

Relying on size alone. If heading and body text are the same color and weight, size differences alone create a weak hierarchy. Add weight contrast or color to make the distinction obvious at a glance.

Too many levels. Most designs need two heading levels maximum. Adding a third or fourth level forces readers to parse hierarchy they should be able to feel instinctively.

Hierarchy is the plan that tells the reader what to look at first. Size is the loudest lever, followed by weight, then spacing, color, and case. A working pattern starts from the body size, steps headings up through a small set of defined sizes, and keeps captions and metadata in a single quiet level below. Three levels cover most pages; more than four and the reader stops believing the difference matters.

Two practical rules keep hierarchy honest. First, make the jump between levels obvious: two sizes a few pixels apart read as an error, not as two levels. Second, never signal a level by color alone, because colorblind readers lose the ordering. The type scale calculator builds the numeric skeleton of a hierarchy, and the fluid type generator keeps that skeleton proportional as the viewport grows.