The ruins of Apamea with it's columns tinted pink

Toppling Ancient Columns and Alignment

Originally written for and published by Third & Grove on August 11, 2017.

Most designers and engineers are familiar with the concept of a grid system. In fact, most frameworks come packed with their own grid system — take Bootstrap, for instance. In static comps, most engineers will find a disabled layer riddled with pink columns.

I'm going to assume most people in our industry are aware of these suggestive rulers. Some make use of it to pack massive content into nice, neat little columns. Others rely on them for strict bounds for page designs.

I'd like to make an argument against these pink columns of fascist, albeit often ignored intent and offer a way of looking at alignment at two levels: through containers and individual object alignment.

What is the grid system good for?

Sure, a grid helps designers create visual blocks that will consistently and tidily align along the y-axis. It reduces the need for constant math to break up a single block into many. In addition, the grid helps to keep blocks of varying content aligned on a single (sometimes multiple) area. This is better known as a container.

In turn, this rule is supposed to help users consume content easier and without having to re-orient your understanding of the environment during heavy scrolls or complex arrays.

It's a great idea and often functions as designed. However, that is not the end of the alignment story, and relying on a grid system, and as little varying container widths as necessary, is not the final requirement for keeping products comfortably consumable and optimally performing.

Grids fail at alignment when:

Objects and their edge

Every object has an edge. Not just physical objects in the real world, but optical objects as well. There is a definitive edge and a perceived, felt edge. (Consider hit boxes in video games: most game designers build hit boxes that extend beyond the visual object.)

Take this illustration for instance:

Comparing the optical edge of a square to the "edge" of a circle.

Notice how the square has an easily discernible edge – denoted with the red line. The circle, however, has two "edges". The red line denotes the obvious, definitive edge. Considering optical alignment will show there is another edge. This is the space you would want to align with – denoted with the blue highlighted portion.

Let's use another illustration to show why this optical, felt edge is so important.

Comparing two instances of a circle stacked on top of a square (vertically) where the right instance scales the circle to optically align with the square.

Notice how the circle appears smaller than the square? Although they are both the same size, it loses its weight when not increased to scale optically with its neighbor (as shown on the right). Though this is a case of scaling, one uses the safe region of alignment in the first illustration as a basis for scale.

More complex shapes

Not all of us are building products for toddlers, though, so alignment like this goes beyond just shapes. (Though even buttons and call-to-actions, especially the rounded lozenge variety, can benefit with this alignment practice.)

Though this is a case of scaling, one uses the safe region of alignment in the first illustration as a basis for scale.

Notice how the circle appears smaller than the square? Although they are both the same size, it loses its weight when not increased to scale optically with its neighbor (as shown on the right). Though this is a case of scaling, one uses the safe region of alignment in the first illustration as a basis for scale.

Comparing two image, headline, intro paragraph, and paragraph setups where only the right column employs optical alignment.

This illustration compares before and after margin adjustments to show how alignment can create refinement even in microscopic cases. Some may notice, others may not :] It is my belief that whether precisely perceived or not, it is felt nonetheless. Moreover, when this practice permeates through an entire theme it can bestow the same amount of trust users feel towards well manufactured luxury products.

Unfortunately, story alignment is not yet a feature for any browser, and until this is a consideration for web — or any digital space — it is important to consider these minute, OCD adjustments to provide better feeling products. Story alignment is a feature in products like Adobe InDesign that align all of the glyphs (including punctuation) to the optical edges within their text frame/block.