Tech

Optical Effects in User Interfaces: An Illustrated Guide

Illustrated guide to optical effects in UI

Optical Effects in User Interfaces: An Illustrated Guide

Share this Post:
Share:

Mathematically centred is rarely visually centred, and every designer discovers this the first time they place a play triangle inside a circle. The fixes are old, well documented and almost never taught.

The corrections that matter most

Circles need to overshoot the cap height of the letters beside them. Triangles need to shift toward their visual mass. Pure black text on pure white reads heavier than the same weight reversed, so reversed type wants a lighter cut.

Type designers have compensated for all of this for centuries. Interface work inherited the problems without inheriting the vocabulary, which is why so many icon sets look subtly unbalanced at small sizes.

None of these adjustments are large. Most are one or two pixels, and all of them are the difference between a set that looks drawn and a set that looks placed.

Related Tags

Leave a Comment

Related Posts