Skip to main content

Visual Presentation

Principle​

Layouts and typography must remain readable and functional when users adjust text size, zoom level or spacing — without breaking the interface or hiding content.

Text Resizing​

Principle​

Users must be able to resize text up to 200% without loss of content or functionality.

Guidance​

  • Use relative units (em or rem) for all font sizes. Avoid px-based font sizes that prevent text resizing.
  • Do not block zoom using user-scalable=no or maximum-scale=1 in the viewport meta tag. This prevents users with low vision from zooming in and is a direct WCAG violation.
  • Content must remain readable and functional when text is zoomed to 200%.
  • No text should be cut off, overlap other content, or become unreachable at any zoom level.
  • Test by zooming browser text (or the entire page) to 200% and verify that no content or functionality is lost.

WCAG Reference​

Reflow​

Principle​

Content must adapt to narrow screens and high zoom levels without requiring two-dimensional scrolling.

Guidance​

  • Content must reflow naturally at a viewport width equivalent to 320 CSS px without requiring horizontal scrolling.
  • Avoid fixed-width layouts or elements that overflow their container on narrow screens.
  • Do not rely on horizontal scrolling for standard page content — users zooming to 400% on a 1280 px screen effectively view the page at 320 px width.
  • Exception: Content that inherently requires a two-dimensional layout (e.g. large data tables, complex diagrams) may use horizontal scrolling.

WCAG Reference​

Text Spacing​

Principle​

Content and functionality must not be lost when users override text spacing properties.

Guidance​

Ensure no content or functionality is lost when the following CSS properties are overridden — without changing any other style:

  • Line height to at least 1.5 × the font size
  • Spacing after paragraphs to at least 2 × the font size
  • Letter spacing to at least 0.12 × the font size
  • Word spacing to at least 0.16 × the font size

Practical rules:​

  • Avoid fixed-height containers that clip text when line height or spacing increases.
  • Avoid overflow: hidden on text containers unless there is a reliable mechanism to reveal the full content.
  • Test with a browser extension such as the Text Spacing Editor or equivalent bookmarklet.

WCAG Reference​