How much weight contrast do you need between a heading and its body?

Published Read 3 min read

On this page

You need a clear, comfortable step: enough of a jump in weight or size that the hierarchy reads instantly, without a leap so large it jars. As a working guide worth confirming against your own type, a reliable approach is to skip a weight rather than nudge one, pairing a regular body around 400 with a bold heading around 700, so the contrast looks intentional rather than accidental. The threshold is not a precise number; it is a perceptual one. The heading must announce itself at a glance, and the gap that achieves that is a confident step, not a timid one and not a violent one.

The reason a too-small gap fails is that the eye reads hierarchy through difference, and small differences register as errors rather than levels. If a heading is only slightly heavier than its body, the brain does not parse “this is more important,” it parses “something is inconsistent here,” because the change is large enough to notice but too small to mean anything. That is why nudging one weight, say going from regular to medium, so often looks like a mistake. Skipping a weight to a clearly heavier value crosses the perceptual threshold where the difference becomes a signal instead of a glitch. The heading reads as a deliberate level, and the body recedes to support it.

Picture an article page. The body is set in a regular weight at a comfortable reading size, and the section heading is set in the same family one or two steps up in size and bumped to bold. Drop into that page and your eye lands on the headings first, then settles into the paragraphs; the structure is obvious before you read a word. Now flatten that contrast, set the heading to a medium weight at nearly the body size, and the page turns into an undifferentiated wall where you have to read to find out what is a heading. Push it the other way, a razor-thin body under an enormous ultra-black heading, and the jump is so abrupt it feels like two unrelated typefaces collided. The comfortable middle, the clear step, is where the hierarchy reads instantly and still feels like one coherent system.

The point worth naming is that the contrast does not have to come from weight alone, and often should not. Size, weight, and the two combined are all legitimate sources of the step, and the right mix depends on the family and the layout. A family with a narrow weight range may need to lean on size to make the jump read; a family with a dramatic black weight may achieve plenty of separation at the same size. So skip-a-weight is a guide, not a mandate; the real test is whether the heading separates at a glance using whatever combination of size and weight your type affords. What this rules out is the habit of bolding everything you want noticed, which flattens the gap by making the body compete with the heading.

When you set a heading against its body, look at the pair from a normal reading distance and ask whether the heading separates instantly without jarring. If it blends in, increase the step, by weight, by size, or both, until it reads at a glance; if it shocks, ease it back. Set a clear, comfortable step rather than a hair’s difference, and let instant legibility, not a fixed value, tell you when you have it.

Related posts:

  1. When should an action be undoable instead of guarded by a confirmation? Reach for undo whenever the action can be reversed and you care about keeping the flow fast, and save confirmation for the truly irreversible or dangerous. The deciding question is......
  2. What breaks when every element on a page competes for attention? When every element shouts, the page goes silent, because emphasis is relative and relative emphasis cancels out. The thing that breaks is hierarchy itself, and with it the eye's path......
  3. Why does a “clever” navigation pattern usually cost more than it gains? A clever navigation pattern usually costs more than it gains because navigation runs on learned conventions, so anything unconventional forces users to spend attention learning the mechanism before they can......
  4. How do you handle a button that triggers a slow action? A button tied to a slow action needs three things in sequence: immediate acknowledgment that the tap registered, a busy state that prevents a second submission, and a clear success......
  5. When is it worth building a component vs designing the screen directly? When you are in the middle of designing a screen and meet an element that looks repeatable, it is worth building the component only once the real pattern has emerged......
  6. Why does justified text often read worse on the web than left-aligned? Justified text reads worse on the web because of how browsers achieve the flush edge: they stretch the spaces between words to push each line out to both margins, and......
  7. How do you handle a case that breaks the system’s own rules? When a case breaks the system's own rules, the first move is not to force it in or quietly override it but to ask whether the rule or the case......
  8. When is a badge or pill meaningful vs decorative clutter? A badge or pill is meaningful when it conveys status, count, or category that users act on, and it is clutter when it labels something that needs no marker or......
  9. Tabs or an accordion, when does each suit the content? Tabs suit a few parallel sections that a user views one at a time, where switching is quick and the sections are peers; an accordion suits a longer list of......
  10. When does consistency help vs make a product feel monotonous? Consistency helps when it makes the interface predictable and learnable, and it tips into monotony when it flattens meaningful differences so everything blurs together and nothing stands out. The test......
  11. When should you wireframe vs jump straight to high fidelity? Wireframe when the structure, flow, and priority of the screen are still unsettled and you need to decide them cheaply; jump straight to high fidelity when the pattern is well......
  12. When is a full-width section right vs a contained, centered one? Choose full width when the content is meant to envelop the viewer and a contained, centered width when the content is meant to be read. That single distinction settles most......
  13. How do you keep a hero readable from phone to ultrawide? A hero stays readable across every width when you decouple the text's legibility from the background image's behavior. The mechanism is that an image and the type laid over it......

Leave a comment

Your email address will not be published. Required fields are marked *