Graphic Design Quick Tip: optical alignment vs mathematical alignment

by / Sunday, 11 August 2013 / Published in Quick Graphic Design Tips

When you’re aligning elements on your page, there are two ways to align them: mathematically, or optically. The difference is small, but it can really make a difference in your overall design. It’s not specifically “better” to use optical alignment, but judge the effect for yourself.

Here’s an example of a mathematical alignment of elements. Note the green guideline in the first image and how the elements are related to it. They all literally begin at the same pixel as indicated by the guide. The second image is the same elements but without the guide so you can see the effect:



There’s nothing wrong with that alignment, but observe the subtle different in the following images. These are optically aligned. Optical alignment typically requires curves and irregular shapes to “cheat” outside the guideline. Note the elements as they relate to the guideline (again, second image is the same elements, with no guideline):



The still look aligned, but the appearance is a bit of an illusion. The theory is, your eye sees them as “more accurately aligned” even though they’re not. Move the elements too far to the left, and they’ll look out of alignment. You have to feel this out based on your elements.

Most experienced designers use optical, but it is a matter of taste. It’s good to be aware of the difference and make the decision on a layout-by-layout basis.

Leave a Reply