Formulas for optical adjustments

A long-standing trope of the design world is that computers are bad at aligning and balancing the relative scales of elements. This is incorrect.

Nudging elements around until they feel good is typically referred to as “optical adjustment” or “optical alignment”. The pitch is that you can’t rely on the numbers — matching the width and height of two objects doesn’t mean they’ll carry the same visual weight. Instead of typing exact values, you should drag things around until it looks right. The instinct is good, but the execution is too imprecise for my liking. The numbers can be relied on, if the correct calculation for the situation is used.

Squares and circles #

A common example used to present the case for humans being in charge of relative scale is a square sitting next to a circle. A square and a circle with matching width and height do not look like they are the same weight. The circle seems smaller.

Rather than just scaling up the circle until you’re feeling good vibes, what if the area of the square and circle matched? Doing this means the circle needs to be scaled by 112.84%.

To make the difference more obvious, here’s the original and larger circles, switching back and forth.

Using the area works well for a circle, but, what about a donut? The hole in the middle reduces the total area. This also happens with stars and other shapes. Holes and concave segments should probably be ignored. A method to do this exists, and it’s typically called a convex hull. It’s like stretching a rubber band around the entire object. That’s probably a pretty good formula to work out visual weight that matches human perception. Here’s some more shapes, using the convex hull area to set the scale.

It’s possible there are situations where this will not provide the best result, like a star with very thin spokes. For user interface elements and icons, it’ll also be normal to snap the shape’s size to the nearest pixel boundary, trading scale accuracy for crisper rendering.

Triangles and circles #

To prove alignment can only be properly done by humans, it’s common to show an equilateral triangle inside a circle. This resembles a play icon, and it’s a good example to work with.

The object alignment feature in design tools often uses fitted bounding boxes to work out where to move elements. A fitted bounding box is the smallest box that can fit the shape. For triangles, the center of the bounding box often does not feel like the center of the triangle, and aligning by this method looks incorrect.

Triangles have many different types of centers, including centroid, incenter, circumcenter, and orthocenter. For equilateral triangles, those all coincide, so it doesn’t matter which is used. Aligning the triangle centroid to the center of the circle now looks right — the distance from the triangle points to the edge of the circle are consistent and it appears perfectly centered.

Here’s the bounding box and centroid with some construction lines, showing how the center is found.

Rotating the triangle with the center of the circle as the origin shows how unbalanced the bounding box version is.

Things could get a bit more complex with scalene triangles (sides and angles don’t match), or if the corners were rounded by different amounts.

Colour #

I don’t have much to say about optical adjustments for colours, except that I often see the difference and I don’t like it. Trying to be too clever can result in complex rules for design systems and color palettes, which do more harm than good.

If you have some really thin type next to a heavy icon and you’re perceiving the text as a different colour, maybe just choose a heavier typeface?

Find the formula to match your intent #

In many situations, there will be an appropriate way to express layout intent via a formula. I am not suggesting a calculator should be used every time a shape is created or edited — that’d be slow, and not much fun. I just believe there are very rational reasons for elements to feel balanced.

No matter what, you’re still going to have to use your best judgement. Hopefully this article sparks a conversion, so we can move beyond superstition and guessing. In situations where you need to automate or animate, having a formula to determine visual weight or alignment can be helpful.

Published 13 February 2023.