A page can feel busy even when it uses one typeface and two colours. Often the problem is not the font. It is the number of things competing to look important: bold navigation, heavy headings, bold sentences and bold labels. Good font weight hierarchy gives readers a route through the page without making every stop shout.
The goal is not to use every available weight. It is to create a dependable system in which heavier text earns its emphasis. Once each weight has a job, pages become easier to scan and calmer to read.
Think of weight as an attention budget
Font weight describes the thickness of a typeface’s strokes. In common CSS conventions, 400 is regular, 500 is medium, 600 is semibold and 700 is bold. These numbers do not promise that every typeface will look equally heavy. Different font families can look quite different at the same setting.
Every heavier element attracts attention away from nearby regular text. If everything is bold, that contrast disappears. Readers must rely on size, position or colour to decide what matters. Instead of asking whether something could be bolder, ask what readers should notice before it.
Start with three weights, then justify extra ones
For many content websites, three font weights are enough: regular for paragraphs, medium or semibold for smaller headings and controls, and bold for major headings. Two may suit a minimal blog. Complex interfaces sometimes need more, but each should represent a distinct role.
Check which weights your font supports. A design requesting 500 and 600 may show little difference when those faces are unavailable. Browsers can substitute available weights or synthesize bolder ones. Variable fonts offer finer adjustments, but that does not automatically mean clearer hierarchy. Inspect actual browser rendering.
Assign each text type a predictable role
Page titles and section headings
Let the page title lead through size, placement and a strong weight. Section headings can use bold at a smaller size, or a lighter weight if the distinction remains clear. A heading does not need to be extra-black simply because its topic matters.
Subheadings, labels and controls
Smaller subheadings often work well at 600 against 400 body copy. Navigation, form labels and buttons may use 500 or 600 depending on context. Making every card title, navigation label and button 700 creates competing priorities rather than a useful reading sequence.
Body copy and inline emphasis
Keep paragraphs at a comfortable regular weight. Use heavier inline text selectively for a crucial warning, a named setting or a short takeaway. When entire paragraphs are bold, emphasis stops being selective and long passages become visually tiring.
Weight is only part of the system. The related topic of type scale for websites shows how size can distinguish levels without requiring extreme boldness.
Make weight contrast clear, not dramatic
Effective typography emphasis comes from visible differences between neighbouring roles, not a leap from thin to black. Regular 400 paragraphs alongside 600 subheadings may create enough weight contrast. If headings are large and spaced well, 500 might work too. Evaluate with real paragraphs rather than isolated samples.
Context changes perceived strength. A dark title on a quiet background may stand out at 600. Put it among colourful badges, icons and crowded cards, and it may struggle at 700. Before increasing weight, try removing a competing accent or adding whitespace.
A practical example: calm a crowded service page
Imagine a local service website with a bold hero title, bold introduction, bold pricing cards, bold descriptions and bold booking instructions. Everything seems designed for scanning, yet visitors cannot tell what deserves attention first.
Keep the hero title at 700 and introduction at 400. Set service-card titles at 600, descriptions at 400 and prices at 600. Give the booking button a contrasting background and breathing room instead of making its label the heaviest text. Emphasize only an instruction customers cannot afford to miss.
Now shrink the browser view or step away from the screen. Your eye should move from title to service choices, prices and booking action. If a repeated feature label grabs attention first, reconsider its weight. This tests bold text hierarchy more realistically than comparing swatches.
Spot the habits that make typography noisy
Using barely distinguishable weights
Values such as 500, 550 and 600 can be useful with a variable font, but spreading them across unrelated components may create inconsistency. If the differences do not improve navigation, combine those roles. Fewer styles are easier to apply across templates.
Boldening every takeaway
Editorial pages gradually collect bold introductions, definitions and summary sentences. Remove some of that emphasis and check the result. Keep it where readers can find an answer faster or avoid misunderstanding. Clear wording and spacing often do the remaining work.
Confusing appearance with structure
A sentence styled to look like a heading is not necessarily a proper document heading. Use real heading elements in logical order and reserve inline emphasis for text within paragraphs. Typography should reinforce structure, not replace it. Explore heading structure and readability for related guidance.
Check mobile readability and accessibility
Very thin weights can look elegant in mockups yet become difficult to read at small sizes, especially on phones. Avoid extremely light strokes for essential instructions. Font weight cannot compensate for inadequate text-to-background colour contrast; assess that separately.
Review pages on a phone and at increased browser zoom. Confirm subheadings separate sections, paragraphs remain comfortable and actions stand out without exaggerated boldness. Check several templates, not just the home page.
Try making all text the same colour temporarily. If the hierarchy collapses, colour may be doing too much. Even without images, headings, spacing and modest weight changes should suggest a reading order. The related topic of accessible text contrast helps complete this check.
Frequently asked questions
How many font weights should a website use?
Two or three usually cover a blog or small business website. Add another only when a distinct role needs visibly different treatment. Consistency matters more than reaching a particular count.
Is 600 better than 700 for subheadings?
Neither is universally better. A 600 subheading may stand apart from 400 body copy while leaving 700 for major headings. Compare the actual font, size and spacing before deciding.
Should important words always be bold?
No. Emphasize words only when they improve understanding or scanning. Precise language, thoughtful placement and whitespace often communicate priority without adding weight.
Do variable fonts improve hierarchy?
They allow finer control when the font supports a range. The benefit comes from choosing consistent text roles, not assigning a different number to every component.
Let quieter text carry the page
A strong weight system leaves most content calm. Regular paragraphs carry information, moderate weights organize supporting details, and bold marks genuine priorities. Start with fewer styles, test complete pages and add weight only when it clarifies the reader’s path. The best hierarchy is one readers follow without thinking about it.