Area Allignment

With the advent of professional design and engineering software, elements in a design can be aligned with exacting precision. However, the alignment supported by software is based on the edges of elements—including center alignment, which calculates a center based on the edges. This method works well when elements are relatively uniform and symmetrical, but less well when the elements are nonuniform and asymmetrical. In these latter cases, it is preferable to align based on the visual weight or area of the elements, a technique that must be performed using the designer’s eye and judgment. Using edge alignment when area alignment is called for is one of the most common errors in graphic design.

A satisfactory area alignment can be achieved by positioning an object along the axis of alignment such that an equal amount of area or visual weight hangs on either side—if the object had mass, it would be balanced on the axis. Unlike the straight edge achieved by left- or right-aligning similar elements based on their edges, alignment based on area invariably creates a ragged edge. This requires that parts of elements hang in the gutters or margins when aligned with strongly rectilinear elements, but it represents the strongest possible perceived alignment that can be achieved for morphologically dissimilar elements.

The principle applies to text as well as graphical elements. For example, the horizontal center of a left-aligned text chunk with a right ragged edge, based on its area, would be to the left of a horizontal center based on its width—area alignment calculates the horizontal center in consideration of the reduced area of the ragged right edge, moving the horizontal center to the left, whereas edge alignment simply calculates the horizontal center as though the text chunk were a rectangle, with the right edge determined by the rightmost character. Other common text examples include pull quotes, which should be aligned based on the text edge and not on the quotation marks; and numbered or bulleted items, which should be aligned based on the text edge and not on the numbers and bullets, unless the specific intent is to subordinate the listed items.

Consider area alignment when incorporating dissimilar elements into a composition. When objects are simple and symmetrical, align based on their edges; otherwise, align based on their areas. Unless there is some extraordinary overriding consideration, always hang pull quotes. Hang numbers and bullets when listing items, except when the items are meant to be subordinate.

The left column is center-aligned based on the edges of the objects. The right column is center-aligned based on the areas of the objects. Note the improvement achieved by using area alignment.

#common-error-in-design

Hanging pull quotes example

gt.sandbox.checkout.commit 937af50ef0024beca2d3 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome index.html"

       _chrome index.html
Opening in chrome: index.html