← Go Back

Typography

What is typography?

Typography is the use of type (typefaces, sizes, weights, spacing) to make content readable and to create hierarchy. In UI, typography includes font choice, scale (e.g. 12px–24px), line height, and contrast so text is legible and scannable.

Use it when: you’re defining or implementing UI design, design systems, or content layout. Typography affects usability and accessibility (readability, colour contrast).

Copy/paste checklist (UI typography)

  • [ ] Type scale – 4–6 sizes (e.g. 12, 14, 16, 18, 24px) for body, small, and headings; consistent scale across the product.
  • [ ] Line height – Body text ~1.4–1.6; headings can be tighter. Enough for readability.
  • [ ] Contrast – Text meets accessible colour contrast (e.g. WCAG AA: 4.5:1 normal, 3:1 large).
  • [ ] Hierarchy – Headings distinct from body (size, weight); one clear H1 per view.
  • [ ] Limited fonts – 1–2 families; avoid clutter. Design system tokens for font family, size, weight, line height.

Why typography matters

What good UI typography includes

Checklist

  • [ ] Scale – Defined sizes (tokens or variables) so typography is consistent.
  • [ ] Readable body – 16px or equivalent minimum for body; line height 1.4–1.6.
  • [ ] Hierarchy – Heading levels (H1–H4 or equivalent) that are visually distinct and used consistently.
  • [ ] Colour contrast – Text/background meets WCAG AA. See accessible colour contrast.
  • [ ] No tiny text – Avoid <12px for critical content; support zoom/reflow.
  • [ ] Documented – In design system or style guide so teams use the same scale and tokens.

Common formats

  • Modular scale: 1.25 or 1.5 ratio between sizes (e.g. 12, 15, 18, 24). Use for a harmonious scale.
  • Design tokens: font-size-sm, font-size-base, line-height-body, etc. Use so code and design share the same values.
  • Two families: One for headings, one for body (or one family with weights). Keeps the system simple.

Examples

Example (the realistic one)

Scale: 12, 14, 16, 18, 24px. Body: 16px, line height 1.5, dark grey on white; contrast > 4.5:1. Headings: 24px H1, 18px H2, 16px H3; bold or semibold. Small: 12–14px for captions and hints. You define these as tokens in your design system and use them in UI design and code. You check WCAG and zoom to 200% to ensure text reflows and stays readable.

Common pitfalls

  • Too many sizes: 10 different font sizes with no scale. → Do this instead: Use a small set (4–6) and tokens so it’s consistent.
  • Low contrast: Grey text on light grey. → Do this instead: Meet WCAG AA (4.5:1 for normal text); see accessible colour contrast.
  • No hierarchy: Everything the same size and weight. → Do this instead: Distinguish headings from body; one clear H1 per page or view.
  • Tiny body text: 12px or smaller for long copy. → Do this instead: 16px (or equivalent) for body; reserve small sizes for captions and labels.
  • Outline or thin fonts: Hard to read at small sizes. → Do this instead: Prefer regular or medium weight for body; test at small sizes and with accessibility in mind.
  • Typography vs hierarchy: Hierarchy is the visual structure (what’s primary vs secondary); typography is one tool (size, weight) to create it.
  • Typography vs design system: Design systems usually include typography tokens (font, size, weight, line height); typography is the discipline and the outcome.
  • Typography vs readability: Readability is the result of good typography (size, line height, contrast, line length). Typography is the choices you make to get there.

Next step

Define a simple type scale (4–6 sizes) and document it in your design system or style guide. Check body text contrast against WCAG AA and fix if needed. Use the scale consistently in one flow and review hierarchy with your team.

Related Terms