Imagine a group of objects, type and elements. If I use software to "align on centers", visually the topmost element appears off center due to the weight of other elements. It's not off center. It's properly inline. This is merely a visual oddity.

In the image below, grey objects are type elements. Using software alignment, all horizontal groupings within the layout are aligned "on center" to each other. However the rule/banner across the top, to me, seems off-center. I've double and triple checked, it is indeed on-center.

enter image description here

I can "eyeball" that top element to try and make it feel more centered:

enter image description here

There's no math or precision to the placement of that top grey box in the image directly above. It's completely my "gut" feeling about alignment to try and visually balance things more in my perception. While it is now off-center, my brain doesn't perceive it as off-center, unlike the first image.

So, my question...

Is there some precise methodology to visually align elements on center when actual alignment appears unbalanced? Or is it always a matter of simply "eyeballing" things?

Also willing to accept that my eyes are "wonky" and the top image is fine.

Somewhat irrelevant, but in this case I'm using Adobe Illustrator. This issue is slightly more apparent when viewing the actual type. Unfortunately, I can't share the actual type.

  • Eyeballing is an art/skill. And as a veteran designer I believe you have a great eye for it! While a formula could approximate this result with the right training and inputs, to do so generically for all forms of alignment no matter the size/color/etc and make the result the most appealing to humans I think is close to impossible. – Zach Saucier Apr 17 '20 at 0:48
  • @ZachSaucier .. that's an answer :) Maybe not a "here's how" answer, but an answer. Actually I may delete this because it's kind of a duplicate of your link to a large degree unless someone responds with something new. – Scott Apr 17 '20 at 2:29
  • Its not impossible that there could be a formula – joojaa Apr 17 '20 at 5:02
  • Maybe quadtrees? There's a link for JS library that uses this method in the article. This is not exactly what you ask, but still an interesting read %) – Sergey Kritskiy Apr 17 '20 at 5:32

There actually are some formulas. For example: Photographers know that a image does not look centered if they are entirely centered in the frame and have determined formulaic methods for this.

However if we calculate the center of mass of the gray areas (center of mass is where a physical object is balanced. Most humans know approximately where that is):

from scipy import ndimage
import imageio

for img in ("scott_optical.png", "tru_center.png"):
  balanced = imageio.imread(img )[:,:,3]
  bin_balanced = (balanced > 128) * 1
  mass = ndimage.measurements.center_of_mass(bin_balanced)
  print (img ,mass[1],mass[1]/bin_balanced.shape[1])

You can run above code HERE as well as view the images used. Then we get that:

scott_optical.png 351.39763320288984 0.504157292974017
tru_center.png 352.65615675542125 0.5059629221742056

indeed scott's version is more balanced in terms of center of mass. The last number of line is the fractional center of mass of shaded pixels which should be as close to 0.5 as possible. But be careful the images should match exact same dimensions and have same padding. Off course you may get better results with your actual imagery.

I'm not saying center of mass is the only thing to do but it certainly is a part of the problem. Just saying there is some scientific basis to claim that its more balanced.

  • Interesting.... – Scott Apr 17 '20 at 6:27
  • @Scott added some other musings – joojaa Apr 17 '20 at 8:10

Formula, no. Method.. maybe.

Generally, I will personally avoid getting into a situation where math alignment looks off. Either one of your options will look odd to some degree, depending on the person looking at it.

However, if all other options have been explored and it really must be done this way, nope, math alignment will not work. You need to look at the overall composition and come up with the best optically balanced compromise.

In your particular case, where the left side of that bottom left box is kind of very close to the top box, I would also consider 2 other options:

  1. left align the top box to the big box below, or
  2. keep the top box math centered, but adjust all the elements below so these 2 boxes share the same left edge

Anything that works to keep these 2 boxes sticking to a single guideline to the left. Yes, you will end up with a slight mathematical imbalance, but nobody will notice that without any actual measurement.

enter image description here

  • Believe it or not, it is exactly that slight misalignment of things at the top which seem to balance everything. The "overhang" of the small box seems to cause a "tilt" to the left which is visually counter-acted by the large box below it. Odd, I know. I do generally agree though, aligning to other elements when possible is a viable way to try and find balance. – Scott Apr 17 '20 at 5:36

Your Answer

