F6.04.2optically sized iconsdesignresearch

Small sizes need their own drawings, not uniform scaling

Aliases: optical size · icon masters · multi-size drawings

What it is

Scale a 24 px master to 16 and the result is not a 16 px icon. It is a crushed 24. Small sizes need their own masters: fatter strokes, larger counters, parts that cannot stand on this grid deleted, the skeleton re-anchored to this grid. Optical size in type does the same job. Scaling keeps geometric proportion and throws away the structure that can still be seen at that size.

Why it happens

Rendering snaps to pixels. A 1.5-wide stroke with a 2-wide gap, multiplied by two-thirds, becomes "about one pixel plus grey" on both sides; stroke and gap no longer define each other. Worse, the skeleton's anchor: a slight optical offset in the large master, once scaled, sits visibly drunk in the cell. Drawing for the size means deciding, on the target grid, which strokes must own a full pixel and which gaps must yield two — not multiplying the same Bézier by a coefficient. The cost of not redrawing is specific: the 16 px size looks grey, floaty, and off the type midline. That is not "low resolution". It is large-master decisions executed on the wrong grid.

Studying it

Contrast "one path, scaled" against "redrawn for the target size" at the same edge length, with matching or naming plus quality calls (muddy / grey / misaligned). Independents: master strategy and target edge. Dependents: identification and rated clarity. Evidence from the opsz axis in type is analogous, not numerically portable — icon parts are less standardised than letters. Pixel-fitted bitmaps and nudged vectors must be reported apart, or grid anchoring and stroke policy cannot be untangled.

Where it stops holding

  • On a very dense display a little scaling may still look acceptable. That is not a licence to skip a 16 px master; low-density screens and system zoom are the stress test.
  • With only two nearby sizes (20 and 24), optical correction might share a master; crossing down to 16 usually will not.
  • Cutting parts is a density problem. This claim is that even a legal part count still needs re-anchoring on this grid. The two jobs are often done together; the failures differ: one melts, the other goes grey and crooked.

Applying it

  • Keep a master for every size that actually ships. Split at least "small toolbar" from "large list". Do not export the small size from the large master.
  • Let the small master run thicker strokes and fewer interior corners. Geometric similarity with the large master is not required.
  • How to check: flicker the scaled draft against the redraw on the target grid. Persistent grey fringes or a centre that misses the cell mean it has not been drawn for the size.

Related

  • Same group: F6.04.1 How much detail an icon carries sets how small it can go · F6.04.3 Icon size is independent of hit-area size
  • Nearby: F6.08 Visual weight balance of icons · F4.09 Variable and optical type
  • Search terms: optical size · icon masters · optically sized icons

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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