information-density

Information Density

Design interfaces that let users control how much information they see at once — because the right density for a power user scanning 200 rows is the wrong density for someone who needs space to process each item.

The Density Spectrum

Compact

• Minimal spacing, smaller text, more items visible
• Suits: power users, data-heavy tasks, large screens
• Risks: overwhelming for cognitive disabilities, hard to tap on touch devices, hard to scan for low vision

Comfortable (Default)

• Moderate spacing, standard text size, balanced visibility
• Suits: most users in most contexts
• This should be the default — optimise for this first

Spacious

• Generous spacing, larger text, fewer items visible
• Suits: cognitive disabilities, low vision, touch devices, new users, stressful contexts
• Risks: requires more scrolling for experienced users

Design Patterns

Density Controls

• Offer 2–3 density options (compact, comfortable, spacious)
• Use clear labels — not just icon toggles
• Apply density change immediately (no page reload)
• Remember the preference across sessions
• Place the control near the content it affects

What Changes With Density

• Vertical spacing between items
• Horizontal padding within items
• Font size (within accessible range — never below 0.875rem)
• Line height (within accessible range — never below 1.5 for body)
• Amount of metadata shown per item
• Thumbnail or preview sizes
• Number of columns in grid layouts

What Should NOT Change With Density

• Content meaning — no information should be lost at any density
• Accessibility — every density level must meet WCAG requirements
• Interaction targets — minimum 44×44px on touch regardless of density
• Heading structure — structure stays consistent
• Keyboard navigation — tab order stays logical

Density by Context

• Lists and feeds: control row height and visible metadata
• Data tables: control row padding and visible columns
• Dashboards: control card size and spacing
• Inboxes: control preview length and row height
• Calendars: control event detail visibility

Defaults That Adapt

Viewport-Based Defaults

• Large screens (1440px+): comfortable or compact
• Medium screens (768–1439px): comfortable
• Small screens (below 768px): comfortable or spacious
• Touch devices: never default to compact

Preference-Based Defaults

• If system text size is increased: default to spacious
• If prefers-contrast is active: increase spacing slightly
• New users: default to comfortable
• Let users override all defaults

Assessment Checklist

• At least two density options are available
• Default density is comfortable, not compact
• No information is lost at any density level
• Minimum touch targets (44×44px) are maintained at all densities
• Minimum text size (0.875rem) is maintained at all densities
• Minimum line height (1.5) is maintained at all densities
• Density preference is remembered across sessions
• Density adapts to viewport and system preferences