Perceived icon size needs optical correction, not bounding-box alignment
Aliases: optical sizing · visual alignment · bounding box
What it is
A circle, a square, and a triangle seated in the same 24 px cell are equal in edge length and not equal to the eye: the circle shrinks a ring, the sharp corners poke and look larger. What must match is perceived size, not the bounding box. Type optically adjusts the face relative to the body; icons in a row do the same job. Flushing to the cell aligns a rectangle the user never sees.
Why it happens
Size is estimated from the shape's enclosing impression, not from the axis-aligned box. A circle leaves a gap to all four sides of the cell, and the gap is read as "this one is smaller"; diamonds and pointed triangles drive corners to the cell edge, and the corners become evidence of size. On top of that, equal-area circles routinely look smaller than squares. Geometric alignment therefore systematically under-serves some silhouettes. Correction fattens the circle a little and pulls sharp corners in, so a row sits on one visual midline and occupies one share of area. This is not "redraw at 16 px so it does not melt". That ledger saves identification. This one saves sameness of size in a row. A perfectly sharp circle can still look like small caps in a toolbar.
Studying it
Place different silhouettes in one cell and run paired "which is larger" comparisons, or let people scale until they report equality, and log the optical factor per family. Independent: silhouette family (circle, square, triangle, wide-flat). Dependent: scale needed for equality. Do not use pixel edge as the dependent — that is the ruler under challenge. Blurring until subjects vanish removes "this subject matters more, so it looks bigger".
Where it stops holding
- A lone glyph with no neighbours makes optical size almost moot; flush to the cell is enough.
- Very heavy fills change the enclosing impression. Factors do not copy from outline to filled.
- Over-correction lets a circle overflow the cell and kiss its neighbour. The ceiling is still clearing the next item.
- Part-density going dark, or mixed outline and fill going heavy, will contaminate "equal size" judgements. Control those before nudging size.
Applying it
- Keep optical factors by silhouette family: fatten circles, tuck points, compensate wide-flats on the short side. Share the factor inside a family; do not hand-tune each glyph until it "feels right".
- Review the whole row, not whether one glyph fills its cell. A triangle that fills the cell is often already large.
- How to check: turn the row into silhouettes and ask which is larger. A stable "circle small, triangle large" means the bounding box is still the ruler.
Related
- Same group: F6.08.1 Uneven visual weight between filled and outline icons in one row fakes a hierarchy · F6.08.3 Dense icons look heavier than simple ones at the same size · F6.08.4 A set only reads as even when stroke and padding share one rhythm
- Nearby: F6.04 Minimum icon size · F3.02 Size contrast
- Search terms:
optical size·optical correction·bounding box