Optical Alignment

Aligning items geometrically works great most of the time, but there are instances where it just looks off. When that happens, it is best to align items optically instead.

When a button has both text and an icon, it is often better to have a smaller padding on the side of the icon, to optically align the content otherwise the button feels un-aligned.

When I started designing, I always thought that everything had to be aligned geometrically and that was the best practice for 100% of cases. But when you do that, you run into cases where it just doesn't work.

I often run into this issue with icons. While a lot of icon packs already account for this, there are sometimes shapes that need to be optically aligned. For those I usually use margin or padding depending on the container.

However, when it comes to icons specifically, the best case scenario would be to fix this in the svg itself, so no additional margin or padding need to be added.

Some changes have a bigger impact than others, in the case of the button or the play icon, the changes are pretty visible, while with the star icon it's pretty minor although still visible.

I think the main takeaway is that sometimes it's fine, or even necessary to break out of the geometric alignment to make things feel visually balanced and that geometric alignment is not always the best way to align things.

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.