F6.08.3icon visual densitydesignresearch

Dense icons look heavier than simple ones at the same size

Aliases: density weight · complex icons go dark · ink coverage

What it is

Stacked sliders for settings, a toothed calendar, a sheaf of documents — at 16 or 24 px they become a darker patch; the plus, the arrow, the check beside them look light. Same edge, same stroke, and parts packed together still raise local ink density, so a scan lands on the dark patch first. This is not a melt past recognition — the glyph is often still readable — it is that, in the row, it looks more important than its neighbours.

Why it happens

Weight is not only enclosing area. It is also how much of the interior is occupied. Simple shapes leave most of the cell empty; complex ones slice the cell with junctions, and at small sizes the slits are painted grey by anti-aliasing. From a distance that grey is a deeper patch. People log the patch as "this one is more solid, more primary". A designer who only checks "can I still tell this is a calendar" will miss it: a still-readable calendar is already sitting on the plus next door. Density weight is a tax that shows up at small sizes. The same complex master still has gaps at 48 px; below about 20 those gaps become haze, and the weight gap appears.

Studying it

Hold stroke, edge, and outline/fill fixed, vary only part count, and compare "which is heavier / more conspicuous". Independent: countable parts or ink coverage. Dependent: salience rank. Run the same pair at a large size: if the gap shrinks when large and opens when small, density is turning into weight on the small grid. Report identification separately — melt is a different failure. This claim only takes the cases that stay readable and still shout.

Where it stops holding

  • When parts have already fused into a blot, go back to cutting parts; there is no delicate "looks heavier" problem once it cannot be read.
  • Filled complex shapes go darker than outlined complex shapes. The two densities cannot be tuned as one.
  • A lone complex icon with no neighbour to sit on barely shows density weight.
  • Optically fattening circles or unifying stroke will not clear the grey of a sliced interior.

Applying it

  • At small sizes, give dense subjects a reduced-part substitute — not only so they stay identifiable, but so they do not appoint themselves the main button in the row.
  • If parts cannot be cut, add a little interior gap or slightly thin the stroke to pull ink coverage back to the set median. Do not fatten the simple glyphs to "counterweight"; that wrecks the set's rhythm.
  • How to check: at the small size, greyscale the row and squint at which patch surfaces first. If the first patch is the one with the most parts, density is already impersonating hierarchy.

Related

  • Same group: F6.08.1 Uneven visual weight between filled and outline icons in one row fakes a hierarchy · F6.08.2 Perceived icon size needs optical correction, not bounding-box alignment · F6.08.4 A set only reads as even when stroke and padding share one rhythm
  • Nearby: F6.04 Minimum icon size · F3.01 What constitutes visual weight
  • Search terms: icon visual density · visual weight · ink coverage

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F6.08.3