Combine levers, don't multiply

Make primary text large, bold or dark; all three only for one element.

From refactoring-ui, section 1, Visual Hierarchy.

Three levers, two elements

Switch caption levers off until the number wins.

Metric cardFlat
Revenue, September $42,300 +12% vs last month
0 / 3 levers apart
LeversOn = 36px · 700 · gray-900
Headline
Caption 
.metric-value   { font-size: 36px; font-weight: 700; color: var(--gray-900); }
.metric-context { font-size: 14px; font-weight: 400; color: var(--gray-400); }

Promote exactly one

Pick what the invoice card is about.

MultipliedBad
everything: 700 · gray-900
CombinedGood
36/700/900 → 16/500/600 → 14/400/400
.level-1 { font-size: 36px; font-weight: 700; color: var(--gray-900); }
.level-2 { font-size: 16px; font-weight: 500; color: var(--gray-600); }
.level-3 { font-size: 14px; font-weight: 400; color: var(--gray-400); }

De-emphasize, never hide

Drag until the terms fail 4.5:1 or 12px.

Plan cardHidden
Pro $29/month Free for 14 days, then $29 billed monthly. Cancel anytime in Settings › Billing.
2.1:1 · 11px
Terms lineFloor 4.5:1 · 12px
.terms { font-size: 13px; font-weight: 400; color: var(--gray-600); }

Why it matters, pros and cons

Why it matters

Emphasis is relative. Quieter secondary text makes the primary strong without making it louder.

Pros

  • The eye lands on one thing.
  • Three levels cover almost every layout.
  • Bold regains its meaning.

Cons

  • You must decide what matters most.
  • Gray below 4.5:1 fails WCAG for body text.
  • Dense tables scan better with uniform rows.