information-density

---
name: information-density
description: Design interfaces where information density can be adjusted to suit different cognitive needs and preferences. Use when designing dashboards, data tables, feeds, inboxes, settings panels, or any interface with variable amounts of content. Triggers on: information density, too dense, too sparse, compact view, comfortable view, spacing, whitespace, data density, content density, crowded, breathing room.
license: MIT
---

# 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