Typography hierarchy starts with the reader’s route through the article. Someone may read from the top, scan the headings for one answer, or return to a specific step. The type system should make each route possible without turning every sentence into a visual announcement.
Organize the content before styling it
Write headings that say what each section contains. For a tutorial on preparing images for a blog, “Choose the source image,” “Crop for the article card,” and “Check the export” are more useful than “The process,” “Best practices,” and “Final thoughts.” If a heading does not help a reader find an answer, revise the heading or the section.
Use actual heading levels. The page title is commonly the H1 in WordPress, though the theme can affect this; major article sections are usually H2, with H3 for subsections. The W3C heading guide explains that heading ranks communicate organization and support in-page navigation. Avoid skipping levels merely to get a smaller visual style. WordPress’s Heading block lets you set the level separately from the theme’s typography controls.
Set the body text as the reference
Take a typical paragraph from a real post, including a link and some bold text. Read it at the site’s actual content width on a phone and a desktop. Adjust size, line height, and line length until it is comfortable. There is no single pixel value that fits every typeface and layout; a narrow, condensed face and a generous text face will behave differently at the same nominal size.
Only then compare the headings with the body. An H2 needs enough difference in size, weight, and surrounding space to mark a new section. An H3 should look subordinate to the H2 while remaining easy to find. Captions should be secondary without becoming unreadably small or faint.
Use spacing to show relationships
A heading should sit closer to the paragraph it introduces than to the previous section’s last paragraph. That simple spacing relationship often clarifies the outline more than another font or color. Keep callouts visually distinct for genuinely important notes; if every paragraph is boxed, the reader loses a normal reading path.
Check the finished article
- Scan only the headings. Do they form a useful outline of the topic?
- Read a long paragraph at mobile width. Is it comfortable without zooming?
- Check that links and emphasized words remain visible in body text.
- Look at captions, quotes, and lists. Do they support the main text without competing with the title?
- Use the WordPress Document Overview to inspect heading levels, then confirm the rendered page matches the intended hierarchy.
Good hierarchy does not require many typefaces or a rigid size chart. It requires an honest content structure and enough visual difference for readers to know where they are.
