Design Theory: Alignment

When composing a design you will need to make decisions on where to position elements along the top, bottom, and sides of the page as well as whether you want to cluster elements into groups or isolate them. This spacial arrangement is part of design theory referred to as alignment and applies both to blocks of text and elements on the page.

Aligning Text

You are probably most familiar with aligning paragraphs of text with standard word processing programs giving you options to left, center, right align, or justify paragraphs. Like the other theories we have been discussing, there are no right or wrong ways to align text, but there are some general guidelines that may help you make decisions.

When setting paragraphs of information alignment is crucial to comprehension and also the speed in which the information can be read. The three examples below show the same two paragraphs of text set in three different alignments: left, center, and right aligned. One of the most important pieces to choosing alignment is how a culture reads. In American culture we read from left to right, but other cultures read from right to left. This makes a huge difference in how readable type is. Because we read from left to right our eyes become trained in tracking from the end of a line of text (on the right side) to the beginning of the next line (on the left side). Because of this, text that is center or right aligned is more difficult to read quickly because the eye has a more difficult time tracking from line to line without the solid left edge to use for a baseline.

Try it for yourself. Read the first paragraph as quickly as you can in each alignment and you will find that the first one allows you to read more quickly than the other two.

As a general rule, large paragraphs of text should be left aligned to be more readable. Again, this is a general rule, not an absolute, and there are certainly times when you need to choose other types of alignment. This also doesn’t apply to smaller pieces of text like headlines where tracking from line to line is not relevant.

Justification has its own issues with readability,particularly in the unpredictability of how the justification is applied. Like left-aligned text it still has the solid left baseline to help with readability, but there are other issues to consider. Take a look at the last line of the first paragraph. The justification creates very large spaces between words in order to fill up the line. The uneven spaces make it more difficult to read. This is a dramatic example, but if you analyze the other lines you will start to see that there is no consistency in spacing between words. Sometimes this is more or less noticeable depending on the width of your paragraphs. Over long periods of time (think 2+ pages of paragraph text like a book) the differences can result in eye strain and start to slow the pace of reading.

Text aligned justified

Text aligned justified

Alignment of Objects

The alignment of objects on a page is similar to working with text, but you also need to consider both a vertical and horizontal axis for arranging elements in relation to one another.

Vertical Axis

Objects can be arranged and aligned on a vertical axis. This is useful to create a flow down a page, from one object to another. The idea of flow is to allow your eye to progress smoothly from one element to another without noticing any visual breaks. Take a look at the three examples of vertical alignment here. When the image and text are all left aligned your eye naturally starts with the image and then moves down the left side of the paragraphs. There is a very easy break between the image and the text, which takes almost no effort to transition. In the second example the same objects are aligned on a vertical axis, or centered with one another. The image is shifted over a bit from the left side of the text, but the distance is still relatively small and doesn’t impede the flow from image to text. In the last example the objects are all aligned on their right edges. In this instance there is a very noticeable shift between looking at the image and then moving to read the paragraphs of text. Unless you intended to cause a shift in focus between two objects, you should use vertical alignment create a smooth transition and help guide the viewer through the information.

Horizontal Axis

In addition to the vertical alignment objects can also be aligned along horizontal axis. The three following examples show the elements aligned on three different horizontal axes at the top, center, and bottom of the page. The relationship of the objects to one another creates a central horizon on each version. Just like the vertical axes, the horizon helps guide your eye between the different objects.

Consistency

Keeping alignment consistent throughout the document will help create a feeling of balance and continuity. Take a look at the two examples below. In the first example, the text has all been left aligned, but the objects have been right aligned. The ragged right edge of the text competes with the right vertical axis creating visual discord. In the second example, the text has been right aligned as well as the object, creating one visual axis that flows down the entire document. The overall effect is more harmonious because there is a single point of alignment for your eye to follow.

Consistency doesn’t necessarily mean that you have to always aligned your objects and text in the same way like the previous two examples. This example shows the same elements using two vertical axes. The text is aligned on a left vertical edge to match the paragraph alignment, but the other two objects, the image and citation, are aligned on a right vertical axis. This creates two distinctive areas on the page for the eye to visit. Instead of having one continuous line of sight down the page the object alignment breaks the content apart creating two distinctive areas of information.
two-alignment
Even though there are two points of alignment, the layout still has consistency because of the two groupings. If a third axis were introduced the consistency would be lost. Take a look at the huge difference a subtle alignment change can make. Here the image is aligned on a centered axis with the page. Now there are three distinctive content areas , but there doesn’t seem to be any logical grouping. Because of this your eye bounces around the page too much.
object-alignment-three

Related Articles on Design Theory

 

Tags: , , , , ,