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

Line Height and Measure

Long text needs comfortable line height and measure; dense interfaces still need readable text.

typographyreadabilityline-height

Design Principle

Overwide lines lose place, tight line height feels cramped, and loose line height reduces useful density.

Principle Overwide lines lose place, tight line height feels cramped, and loose line height reduces useful density.

Design action Constrain body text measure; multiline summaries need stable height and form help text should use smaller but readable line height.

Examples Positive example: Docs, knowledge detail pages, descriptions, and form help text. Counterexample: Text spans the full ultrawide page.

Apply when Docs, knowledge detail pages, descriptions, and form help text. Card summaries need multiple lines.

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

Agent Directive

Constrain body text measure; multiline summaries need stable height and form help text should use smaller but readable line height.

Apply When

  • Docs, knowledge detail pages, descriptions, and form help text.
  • Card summaries need multiple lines.

Avoid

  • Text spans the full ultrawide page.
  • Labels and help text cram into one line and wrap badly.

Knowledge Metadata

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