Pick text sizes that grow by the same ratio, and a clear hierarchy appears.
A geometric scale (e.g. 1.25× or 1.333×) gives proportional jumps the eye can parse.
A geometric scale makes each step a clear jump. Ad-hoc sizes sit too close to signal any order.
Define 5–6 sizes max. Pair with weight + line-height to amplify the hierarchy.
Pick a ratio, say 1.25, and generate sizes from a base (16, 20, 25, 31, 39) instead of choosing them by hand. The jumps are proportional, so a heading reads as clearly one step above the text below it and the page gains a musical order. Ad-hoc sizes (15, 16, 18, 19, 22) sit too close to signal a real hierarchy, so everything looks vaguely the same weight. Most type systems, from Material to bespoke brand scales, are built this way.
A strict geometric scale is a strong default, not a rule. Display and marketing type sometimes wants a dramatic, off-scale jump for impact, and dense data tables may need one or two custom sizes the ratio doesn't produce. Use the scale to keep the everyday hierarchy honest, then break it deliberately where a specific effect calls for it.
A landing page sets its headings at 14/15/16/17/18/19/20px — every level a pixel apart. With no real jump between them, the eye finds no anchor and skims straight past the H1.