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

Type Scale Hierarchy

Type scale should serve page structure and avoid hero-sized text in compact panels.

typographyhierarchytype-scale

Design Principle

A clear type scale lets headings, labels, body text, and numbers each do their job.

Principle A clear type scale lets headings, labels, body text, and numbers each do their job.

Design action Limit typography to 4-6 roles; reserve large display type for true heroes and use compact headings in cards, sidebars, and toolbars.

Examples Positive example: Dashboards, forms, detail pages, and admin pages. Counterexample: All headings are too large.

Apply when Dashboards, forms, detail pages, and admin pages. Several heading levels appear on one screen.

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

Agent Directive

Limit typography to 4-6 roles; reserve large display type for true heroes and use compact headings in cards, sidebars, and toolbars.

Apply When

  • Dashboards, forms, detail pages, and admin pages.
  • Several heading levels appear on one screen.

Avoid

  • All headings are too large.
  • Small card headings behave like page H1 text.

Knowledge Metadata

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