Density
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
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 page
Choosing a density
| Context | Density | Why |
|---|---|---|
| Marketing and landing pages | Low | One message at a time, first-time readers, no repeated use. |
| Consumer applications | Medium | Occasional use, mixed expertise, touch targets matter. |
| Professional tools | High | Daily use, learned layout, scrolling is more expensive than tightness. |
| Data tables and monitoring | Very high | Comparison across many rows is the entire task. |
| Mobile | Medium regardless | Touch 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.
In practice
Density settings
Enterprise tablesA row-height control with three options, implemented as a spacing multiplier, lets analysts fit twice as many rows while keeping the same component code.
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
Principles behind this
The reasoning this solution is an application of.
- Aesthetic and Minimalist DesignHeuristic
- Fitts's LawLaw
- Cognitive LoadPsychology
Relied on by
Entries that assume this is already in place.
- Data TableComponent
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.
- Dashboard UX ChecklistChecklist
Related concept
Connected closely enough to change how you apply this.
- Target SizeAccessibility
- Common RegionUI foundation
- Spacing SystemsUI foundation
- WhitespaceUI foundation