Close the books in three days
Every transaction is coded as it lands, so month-end is a review instead of a rebuild.
Start close
A type scale, two fonts max
Sizes from a fixed scale, two families at most, body at 400.
From refactoring-ui, section 3, Typography.
Free pixels versus eight steps
Drag the base size and watch the size counters.
Any px valueBad
Close the books in three days
Every transaction is coded as it lands, so month-end is a review instead of a rebuild.
Updated 2 hours ago · 214 transactions
34.4 / 15.3 / 12.2px3 sizesSnapped to the scaleGood
Close the books in three days
Every transaction is coded as it lands, so month-end is a review instead of a rebuild.
Updated 2 hours ago · 214 transactions
36 / 16 / 12px3 sizes--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
--text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px;One, two or four families
Switch the family count; only the fonts change.
Serif + sansGood
2 familiesBody weight
Drag the body weight; the bold phrase stays at 700.
Your pickToo thin
Close the books in three days
Bank feeds sync every hour. Three invoices are overdue and need a reminder before Friday; the rest reconcile on their own.
body 300 · strong 700ReferenceGood
Close the books in three days
Bank feeds sync every hour. Three invoices are overdue and need a reminder before Friday; the rest reconcile on their own.
body 400 · strong 600Why it matters, pros and cons
Why it matters
Steps about 1.2x apart read as distinct levels. A stray 15px or 17px signals nothing and adds noise.
Pros
- Eight choices, fast decisions.
- Hierarchy reads at a glance.
- Fewer fonts, fewer bytes.
Cons
- Marketing display type often needs sizes above 36px.
- Dense data UIs may want a 13px step.
- A mandated brand face can justify a third family.