Using font weight to build visual hierarchy
When distinguishing headings from body text, adjusting weight alongside size creates a much more stable visual hierarchy than resizing alone. But placing weights close together, like 400 next to 500, is barely perceptible to the eye and blurs the hierarchy instead of reinforcing it. As a rule of thumb, adjacent levels need a gap of at least 100 to 200 units to read as clearly distinct.
Pick the base weight you'll use for body text and how many hierarchy levels you need, and this tool recommends a combination evenly spread across the standard weight scale from 100 to 900. If a recommended weight isn't available in your font family, substitute the closest supported weight and make up any missing contrast with size or color.
Frequently Asked Questions
Generally a gap of at least 100 to 200 units is needed for the human eye to perceive a clear weight difference — weights too close together are hard to tell apart.
Check which weights your font family actually supports first, then substitute the closest available weight and reinforce the difference with size or color contrast.