Typography & Spacing
Type scale
Use a small, consistent set of font sizes and weights.
See it
Don't
- Heading barely bigger than the items
- Two typefaces and random weights
- Titles and descriptions look alike
Do
Case studies
Fintech onboarding
We cut signup time in half.
Healthcare portal
Patients book 2x faster.
Why it matters
Use a small set of sizes and weights from a scale (like 13 / 15 / 22) and one or two typefaces. Random sizes and mixed fonts make every item look like a different kind of thing.
How to apply it
- Pick a scale, for example 13, 16, 20, 25, 31
- Stick to one or two typefaces
- Give each size a role: body, caption, H1 to H3
Common mistakes
- Mixing many fonts
- Sizes that differ by 1px
Quick answers
What is Type scale?
Use a small, consistent set of font sizes and weights. Use a small set of sizes and weights from a scale (like 13 / 15 / 22) and one or two typefaces. Random sizes and mixed fonts make every item look like a different kind of thing.
How do I apply Type scale in UI design?
Pick a scale, for example 13, 16, 20, 25, 31. Stick to one or two typefaces. Give each size a role: body, caption, H1 to H3.
What are common mistakes with Type scale?
Mixing many fonts. Sizes that differ by 1px.