UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Font Pairing by Function

Font pairing should start from product function: brand voice, long reading, numeric comparison, and controls have different needs.

typographyfont-pairingbrand

Design Principle

Typeface differences need a clear purpose; decorative mixing can increase reading cost.

Principle Typeface differences need a clear purpose; decorative mixing can increase reading cost.

Design action Default to a clear sans-serif; add contrast fonts only at heading level when brand expression needs it, and use monospaced or tabular numerals for data.

Examples Positive example: Brand pages, portfolios, data products, and knowledge content. Counterexample: Several decorative typefaces appear on one screen.

Apply when Brand pages, portfolios, data products, and knowledge content. Numeric or technical interfaces need tabular clarity.

Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.

Agent Directive

Default to a clear sans-serif; add contrast fonts only at heading level when brand expression needs it, and use monospaced or tabular numerals for data.

Apply When

  • Brand pages, portfolios, data products, and knowledge content.
  • Numeric or technical interfaces need tabular clarity.

Avoid

  • Several decorative typefaces appear on one screen.
  • Data tables use numerals that are hard to compare.

Knowledge Metadata

Category
Typography Color Accessibility
Quality
82%
Version
v1
Published
6/6/2026