Handoff Design System

Typography Guidelines

How to use typography in your designs to create a consistent and accessible experience.

Typography Guidelines

Typography is a core component of effective interface design. Well-crafted typographic systems help establish hierarchy, clarity, recognition, and accessibility across all digital products. The following guidelines ensure typography remains consistent, readable, and accessible in all applications.

1. Use System Fonts

  • Always use the platform’s core typefaces and approved font stacks to maintain brand consistency.
  • Avoid introducing new fonts without design approval.

2. Hierarchy & Scale

  • Use the established type scale to create visual hierarchy (e.g., headings, body, captions).
  • Never alter font sizes outside the design system’s predefined tokens without explicit guidance.

3. Weights & Styles

  • Apply font weights purposefully (e.g., bold for emphasis, regular for body).
  • Avoid using italics or underlining except for denoting special cases (e.g., citations, links).
  • Don’t use more than two weights on a single page to avoid visual clutter.

4. Line Length & Spacing

  • Optimal line length for body copy is 50–75 characters per line.
  • Maintain consistent line-height (generally 1.4–1.6 times font size).
  • Use design system spacing tokens for vertical spacing between text elements.

5. Alignment

  • Text should be left-aligned for most Western languages to support readability.
  • Avoid center- or right-aligning large blocks of text.

6. Color & Contrast

  • Always use text color tokens to ensure consistency and support theming.
  • Maintain sufficient color contrast between text and background. Aim for WCAG AA:
    • Normal text: 4.5:1
    • Large text (18pt/24px and up): 3:1

7. Responsive & Adaptive Typography

  • Ensure text resizes and wraps properly across breakpoints and devices.
  • Avoid fixed sizes or hardcoded units—prefer relative units (e.g., rem, em).

8. Accessibility

  • Use semantic HTML elements for headings, lists, etc. (e.g., <h1>, <p>, <ul>).
  • Avoid using text as images.
  • Never rely solely on typography (such as color or weight) to convey meaning—support with labels or icons.

For more details, see our Typography Tokens and Resources pages.