responsive

Relative size is the fastest signal of importance and the easiest one to overuse.

FND·012UI foundation · Visual design

How the parts are arranged on the whole surface, which determines where the eye goes and in what order.

FND·014UI foundation · Visual design

A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.

FND·031UI foundation · Typography

One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.

FND·037UI foundation · Typography

Type that adapts to viewport and container without breaking user zoom or the accessible minimum.

FND·038UI foundation · Typography

A shared structure that makes alignment automatic and layout decisions repeatable.

FND·039UI foundation · Layout

The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.

FND·041UI foundation · Layout

One layout that reflows across sizes, ideally driven by content limits rather than by device categories.

FND·043UI foundation · Layout

Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.

FND·044UI foundation · Layout

The widths at which the layout changes, chosen from where the content breaks rather than from a device list.

FND·045UI foundation · Layout

The conventions phones have settled on, what each one is actually for, and where they break.

PAT·027Pattern · Structure

Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.

A11Y·013Accessibility · Perceivable

Text must scale to 200 percent without breaking, which means never sizing type in absolute units.

A11Y·014Accessibility · Perceivable

Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.

CASE·005Case study · Data products