Design is often mistaken for decoration. But the highest-leverage skill in web design is the opposite of decoration: it controls the order in which information is consumed. Visual hierarchy decides what gets read, skimmed, or skipped. Get it right and even a plain page communicates; get it wrong and a beautiful page confuses.
The eye works on priority, not equality#
Users do not read pages top-to-bottom like books. They scan, sample, and jump. The design must therefore offer an unambiguous first stop — one dominant element, then a clear path through to secondary stops.
If everything is bold, nothing is bold. Hierarchy is produced by contrast between elements, not by making everything important.
The five levers#
These are the knobs. They compound: changing two at once reads far more loudly than changing one.
- Size — bigger is read first. Title sizes dominate prose.
- Weight — bold attracts the eye on a line of regular text.
- Contrast — darkness against background, or color against a muted field.
- Position — top-left and above-the-fold catch early glances; below the fold is a deliberate drop.
- Spacing — whitespace around an element makes it a "stop". Crowded elements become background.
The practical rule: pick one dominant element per screen, two or three secondary ones, and let everything else be quiet.
Three typing layers that structure a page#
Almost every content page needs exactly three text levels. This is the "typography that makes posts readable" pattern applied:
- H1 / hero — the single claim of the page (largest)
- H2 / section heads — the mini-promises the reader will scan
- Body — the quiet workhorse (smaller, but generous line-height)
Choose one scale rhythm (e.g., 16 → 20 → 28 → 40px) and hold it. A page where heading sizes wander reads as noise. What matters most is a consistent ratio, not the absolute values.
Where users actually look#
Funded eye-tracking studies converge on a few durable facts:
- Top-left gets the first fixation for left-to-right readers.
- A dominant image or headline above the fold gets disproportionate attention.
- Users form an F-shaped scan on dense text blocks: first line fully, second less, then a diagonal skip.
- Whitespace is a signal: what is surrounded by space is "important", what is crowded is "secondary".
For a blog post, that means: title + a compelling opening above the fold, short subheads every ~300 words to re-enter the F, and generous margins around screenshots and code.
Hierarchy for the four common pages#
Blog post: H1 title → meta (author/date, quiet) → first paragraph → H2 sections → pull-quote once per 3 sections for rhythm.
Landing page: one headline (dominant) → one supporting line → one CTA (the only visually loud button) → three quiet supporting cards below.
Form: the primary action (Submit) is the loudest control; the "Cancel" link is deliberately quiet so it doesn't compete. Section labels sit above fields, helper text below.
Dashboard: one KPI as the visual "point", the rest in a uniform but scrubbable list. Alerts get contrast; recurring data gets none.
A common failure: making the CTA and the navigation the same weight. The eye then can't tell "which action is this page asking for" — both compete.
Contrast is the sanity check#
Before redesigning, squint at the page. The test:
- Can you name the one thing the page wants you to do? If not, hierarchy is missing.
- Cover the content with wide swaths of whitespace: does the structure still tell a story?
Color does the same job as size#
Hue draws the eye faster than weight when used sparingly. Use one accent color for actions and links; keep everything else neutral or muted. Every additional loud color weakens the previous ones — this is where "hierarchy" and "branding" part ways.
The paragraph rule for non-designers#
If you design content (not just graphics), the same law applies to words: one idea, one emphasis per paragraph. Put the key sentence first or last, keep the paragraph visually one mass, and don't underline/bold two ideas in a row. That mirrors what the CSS does for layout: it makes one thing the point.
Combine these patterns with core web vitals so the hierarchy you design actually renders fast, and with accessible blog practices so contrast minimums (WCAG) don't collide with your color choices.
