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

Text Spacing Resilience

Text Spacing Resilience turns a frequent interface judgment into an executable constraint before generation.

typographyspacingaccessibility

Design Principle

Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.

Principle Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.

Design action Avoid fixed text heights; define wrapping/truncation for buttons, cards, and lists, and test 200% zoom plus long words.

Examples Positive example: Docs, knowledge bases, card summaries, form help, and mobile text need to survive zoom. Counterexample: Fixed-height containers clip multiline text.

Apply when Docs, knowledge bases, card summaries, form help, and mobile text need to survive zoom. Users need to judge state, scope, risk, or next action quickly.

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

Agent Directive

Avoid fixed text heights; define wrapping/truncation for buttons, cards, and lists, and test 200% zoom plus long words.

Apply When

  • Docs, knowledge bases, card summaries, form help, and mobile text need to survive zoom.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Fixed-height containers clip multiline text.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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