Labels are secondary to values

Make labels smaller, lighter or small caps so the eye lands on data.

From refactoring-ui, Hierarchy: “Labels are secondary”.

Account details

Edit the values, then press Squint.

Name

Loud labelsBad

Name:: Ada Lovelace
Email:: ada@analytical.engine
Plan:: Pro, $24/mo
Member since:: Mar 2021

dt { font: 700 16px; color: var(--ink) }

Labels step backGood

Name: Ada Lovelace
Email: ada@analytical.engine
Plan: Pro, $24/mo
Member since: Mar 2021

dt { font: 500 12px; uppercase; color: var(--muted) }

dt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); }
dd { font-size: 16px; color: var(--gray-900); }

Table headers

Switch headers, then find the largest amount.

Client	Invoice	Due	Amount
Northwind	INV-2041	Oct 3	$4,120.00
Globex	INV-2042	Oct 9	$12,480.00
Initech	INV-2043	Oct 14	$860.50
Umbrella	INV-2044	Oct 21	$7,300.00
Hooli	INV-2045	Oct 28	$2,015.75

th { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); }
td { font-size: 14px; color: var(--gray-900); }

Pick the levers

Turn Bold off, then add one lever at a time.

Bold Smaller Lighter Uppercase

Invoice summaryCompeting

Balance due: $12,480.00
Due date: Oct 9, 2026
Client: Globex

16px · 700 · ink

Why it matters

Readers scan for the value; the label is read once. Quiet labels let the data lead.

Pros

Values scan in one pass.
Frees weight for the value that matters.
Small caps read as structure, fewer borders.

Cons

Smaller plus lighter can drop below 4.5:1.
In edit forms the label is the prompt.
Self-explanatory values need no label at all.