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

Font Weight Emphasis

Font weight creates emphasis; it should not make every label bold.

typographyfont-weightemphasis

Design Principle

Too much bold text loses emphasis and makes dense interfaces feel heavy.

Principle Too much bold text loses emphasis and makes dense interfaces feel heavy.

Design action Use a small set of regular, medium, and semibold roles; strengthen values or current items while keeping notes light.

Examples Positive example: Metrics, tables, settings, and navigation. Counterexample: Body, labels, and buttons all use heavy weight.

Apply when Metrics, tables, settings, and navigation. Titles, labels, values, and notes need distinction.

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

Agent Directive

Use a small set of regular, medium, and semibold roles; strengthen values or current items while keeping notes light.

Apply When

  • Metrics, tables, settings, and navigation.
  • Titles, labels, values, and notes need distinction.

Avoid

  • Body, labels, and buttons all use heavy weight.
  • Weight alone represents error or state.

Knowledge Metadata

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