Skip to content
UX Atlas
Plate FND·016 · UI foundationGrid D1 · Rev. 2026-08-14

Density

How much information occupies a given area, which should follow the user's expertise and task rather than a house style.

UI foundationCraft conventionIntermediate

Definition

Density is the amount of information presented per unit of screen area. It is a deliberate trade between scanning ease and the amount visible without scrolling, and different users legitimately need different points on that trade.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Choosing a density
  3. 3Density is a user preference, not only a design decision
  4. 4Designing a dense interface well
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Designing data-heavy interfaces.
  • Deciding spacing for a professional tool.
  • Adding a user-facing density preference.
  • The same product serves people who visit monthly and people who live in it daily.

Common mistakes

  • Applying marketing spacing to professional tools.
  • Compressing hit areas along with visual spacing.
  • Assuming one density suits every user.

Choosing a density

ContextDensityWhy
Marketing and landing pagesLowOne message at a time, first-time readers, no repeated use.
Consumer applicationsMediumOccasional use, mixed expertise, touch targets matter.
Professional toolsHighDaily use, learned layout, scrolling is more expensive than tightness.
Data tables and monitoringVery highComparison across many rows is the entire task.
MobileMedium regardlessTouch target minimums set a floor that density cannot cross.

Density is a user preference, not only a design decision

Mature professional tools offer a density setting because the correct value differs by user, screen and task. Offering compact, comfortable and spacious variants driven by a single spacing token multiplier is a small implementation cost with a large payoff for power users.

The constraint is that touch targets have a hard floor. Density can compress visual spacing without compressing hit areas below the accessible minimum.

Designing a dense interface well

Do

  • Keep touch targets at the required size even when rows are compact, by extending the hit area.
  • Use alignment and tabular figures so dense data can be scanned in columns.
  • Offer a density setting when the same product serves occasional and full-time users.
  • Increase line height before increasing padding when a table feels tight.

Do not

  • Treat density as the opposite of good design. Professional tools are dense for a reason.
  • Shrink type to fit more in. Density comes from spacing, not from size.
  • Mix two densities in one view without a clear reason.

In practice

  1. i.

    Density settings

    Enterprise tables

    A row-height control with three options, implemented as a spacing multiplier, lets analysts fit twice as many rows while keeping the same component code.

  2. ii.

    Eight rows on a trading screen

    Where sparse is the failure

    A comfortable layout that fits eight rows on a screen built for comparing forty is not calm, it is unusable. Density is a requirement of the task here, not a stylistic preference.

Local chart

FND·016 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CardCMP·022 · APPLIED THROUGHDashboardsPAT·028 · APPLIED THROUGHAesthetic and Minimalist DesignHEUR·008 · PRINCIPLES BEHIND THISFitts's LawLAW·002 · PRINCIPLES BEHIND THISCognitive LoadPSY·001 · PRINCIPLES BEHIND THISData TableCMP·025 · RELIED ON BYChoosing a Density for an Analytics DashboardCASE·004 · PRACTICAL EXAMPLEDashboard UX ChecklistCHK·004 · CHECK YOUR WORKTarget SizeA11Y·011 · RELATED CONCEPTCommon RegionFND·006 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPTWhitespaceFND·015 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA Data TableA Mobile AppA Search ExperienceAn Enterprise WorkflowSettings

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Relied on by

Entries that assume this is already in place.

  • Data TableCMP·025 · Component

    How many rows fit on one screen decides whether the table can be compared at all.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.