Layout
Density
Density is how tightly the same amount of information is packed onto a screen, a trade-off between a comfortable and a compact layout chosen by the screen's purpose.
Definition
Density is how tightly you pack the same amount of information onto a screen. A comfortable layout gives elements plenty of room to breathe, so less fits on a single screen but everything feels calmer and easier to read. A compact layout tightens the spacing so more items share the same space, which makes the screen quicker to scan at a glance. There is no single correct density. It is a trade-off you weigh against the question of what the screen is actually for. Take the very same list, and its character and the way it feels to use change completely depending on how dense you make it. It also helps to remember that the real knobs you turn to adjust density are ordinary values like spacing, font size, and the height of each element.
Why does it matter?
Density matters because different screens call for different amounts of it. A mobile button you tap with a finger, or the intro screen of a service someone is seeing for the first time, suits a comfortable density. Elements need enough separation so people do not tap the wrong thing, and reading feels lighter too. On the other hand, a dashboard, a data table, or an inbox where you scan a lot of information benefits from a compact density. You can compare more at a glance while scrolling less. A density that does not match the purpose either wastes space and feels inefficient, or crams things so tightly that the screen feels cramped and invites mistakes. That is why skilled designers decide on density only after picturing who uses this screen and in what situation, rather than starting from what looks pretty.
Common mistakes
- Mixing several densities on one screen. When one list is packed tight and another is loose, people cannot read the rule behind it, and the screen comes across as messy and unsettled. It is safer to keep density uniform within a screen or a region.
- Shrinking the spacing without limit just to fit in as much information as possible. Raising density does fit more, but elements start touching, they are easy to tap by mistake, and the eye tires quickly, so finding the item you actually want can end up slower.
- Carrying mouse-sized tight spacing straight over to touch screens. A finger is much fatter than a mouse pointer, so narrow gaps sharply increase mis-taps and leave the user feeling frustrated.
Practical tips
- Set density based on the purpose of the screen. If touch and readability matter, go comfortable; if it is a dashboard, table, or inbox where people scan a lot of data, compact fits well. Decide the purpose first, and density stops being a matter of taste and becomes a reasoned decision.
- Define two density sets, comfortable and compact, in advance, then pick just one across the whole screen. With a standard in place you do not rethink spacing on every screen, and later you can swap the whole density at once, so consistency stays stable.
- Even when you raise density, keep the minimum tappable size for elements. You can tighten the visible gap while still reserving a target area that is large enough to respond, and that way you get compactness and usability together.
Ask your AI
From the code I'll paste below, pull out every padding, margin, gap, and row height and find the spots where different densities are mixed within one screen. The real levers of density are spacing, font size, and element height, so snap them all to an 8px grid and unify them into a single density; since this screen is for [screen purpose — e.g. a dashboard you scan for data], pick just comfortable or compact to match it. Even if you go compact, keep the tappable target of buttons, checkboxes, and other interactive elements at a minimum of 44×44px, and give me an old-value→new-value table of everything you changed.
This screen is [screen type — e.g. an admin table with many rows], so the goal is less scrolling and comparing more at a glance. Retune the code I'll paste below to a compact density — drop row height from the ~48px range to 32–36px, tighten gaps between elements from 16–24px to 8–12px, and step the body font down one size. But only tighten the visible gaps: keep the actual touch area of buttons, checkboxes, and other tap targets at 44×44px or larger so mis-taps don't go up. Stop just before elements start touching and tiring the eye, and show me a before/after comparison.
Define two density sets, comfortable and compact, up front as CSS variables. For each set, pair up spacing, font size, and element (row/button) height on an 8px grid and expose them as tokens like --density-gap and --row-h, so switching a single set flips the density across the whole screen at once. Make sure even the compact set never breaks the 44×44px minimum touch target, and add comments noting that comfortable is for touch- and readability-first screens while compact is for dashboards, tables, and inboxes. Also give me a side-by-side table comparing the two sets.