What is alignment in design?

Two different jobs share one word

Designers use alignment for two related things, and mixing them up causes confusion. Text alignment describes how lines sit inside their own box: flush left with a ragged right edge, centred, flush right or justified to both edges. Object alignment describes how separate elements relate to each other on the page: whether the left edge of a photo lines up with the left edge of the headline below it, or whether three cards share a top edge. A flyer can have perfectly left aligned text in every box and still look disordered, because the boxes themselves start at five different distances from the page edge. The Interaction Design Foundation treats alignment as one of the basic principles of visual design for exactly this reason: shared lines create visible order between otherwise separate pieces.

Edges, centres and optical alignment

Edges are stronger than centres. When two blocks share a left edge, the eye sees a clear vertical line running down the page. When they are only centred on each other, there is no visible line at all, just an implied axis, and small differences in width make the arrangement look unsteady. That is why a layout built on one or two strong edges usually looks more deliberate than one built on a centre line. There is also a difference between mathematical and optical alignment. Round letters such as O and pointed shapes such as A or a triangle icon look slightly inset when their outer bounds line up exactly, so type designers make them overshoot. On a large headline, nudging a quotation mark or a round capital slightly outside the edge can make the line look straighter.

When alignment matters most

Alignment matters most on pieces with many small parts: price lists, menus, timetables, class schedules and any flyer that combines a photo, several text blocks and a few icons. The more elements there are, the more a shared edge helps readers group them. It matters for text length too. Matthew Butterick's Practical Typography recommends centred text only sparingly, for short pieces such as headings, because the ragged left edge of centred paragraphs makes each new line harder to find. Grids help at scale: a simple set of columns gives every block a defined edge to start from, so a flyer designed by one person and edited by another still keeps its structure. Nielsen Norman Group has also found that zigzag layouts, alternating images and text from side to side, made scanning less efficient than a consistently aligned column.

Common mistakes

The most common mistake is centring everything, which feels safe and produces a page with no strong edges at all. The second is mixing alignments without a reason, such as a centred headline above left aligned body text above a right aligned logo, so the eye finds three different axes in one column. The third is aligning boxes instead of their content: two text boxes with different inner padding can share an edge while their words visibly do not. The fourth is justifying narrow columns, which creates rivers of white space between words. The fifth is near misses. Two elements two or three pixels apart look worse than elements clearly separated, because the reader senses an intended alignment that did not quite happen, and that impression of carelessness spreads to the business.

Where alignment shows up in the flyer builder

Text in the flyer builder has an Align control with three options, left, centre and right; there is no justified setting. Table cells, headers included, are always left aligned, and there is no per column alignment control, so a price column cannot be set flush right inside a table. Object alignment is manual. The builder has no snapping, no guides and no grid, and items from the Add items panel are placed at the centre of the canvas when their tile is clicked. Elements can be dragged, resized with eight handles and nudged with the arrow keys one pixel at a time, or ten pixels with Shift held, which is the precise way to bring a new block onto an existing edge. Every one of the 199 designs arrives with its own blocks already aligned, so additions are where edges drift.

Questions people ask