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. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Avoid fixed text heights; define wrapping/truncation for buttons, cards, and lists, and test 200% zoom plus long words.