Hierarchy before semantics

Decide what matters most, then give it size and contrast.

Adam Wathan@adamwathan
💡 A more helpful look at what I notice when developers try to design... We all try to be semantic, but we forget about hierarchy:
Nov 2, 2016View on X ↗

The invoice is an invented example; both cards use exactly the same tags.

1 · Same tags, two designs

Toggle the blur test to see what stands out.

Tags onlyBad
Tags + hierarchyGood
.amount { font-size: 1.75rem; font-weight: 650; }   /* primary */
.status { color: var(--bad); font-weight: 600; }    /* secondary */
dt, .note { font-size: .75rem; color: var(--muted); } /* tertiary */

Why it matters, pros and cons

Why it matters

Correct tags say what things are. Size, weight and contrast say what to read first.

Pros

  • The eye lands on the amount and the action, not on every line equally.
  • Secondary detail stays available without competing for attention.
  • The markup does not change, so accessibility is untouched.

Cons

  • Too many emphasis levels bring back the flat page: keep to three.
  • Weight and color need contrast checks, especially for tertiary text.
  • What matters most depends on the user, so it needs a decision first.