How to Use the Principle of Alignment in Page Layout

Learn the most effective methods for lining up text and graphics

Draw your home: architect's workplace.
Dina Belenko Photography/Getty Images

Alignment refers to the placement of text and graphics so they line up on a print page or web page layout. Alignment is one of the principles of design that is used to create attractive, readable pages. Proper alignment in designs makes them visually appealing and easier to scan or read. Most page layout programs include a grid system used to align objects on the page.

The alignment can be horizontal, vertical or centered. Diverse items can be aligned along one edge. Most of the elements in a design should be aligned in some way, whether the page has only text with heads and subheads or it also has images, videos, links, and buttons along with the text. However, you can use misalignment to draw attention to an element on the page, if you do it carefully.

Not every aligned element in a page design uses the same alignment. You may choose to align photo credits to the right edge of an image, most of the text to the left and center all the headlines and subheads. When a page contains many diverse elements, they may be grouped and then each group contains a specific alignment.

Benefits of Alignment in Page Design

Alignment of elements on a print page or web page serves to:

  • Create order and convey harmony
  • Organize page elements
  • Group items
  • Create visual connections

Good alignment is invisible. Most readers won't consciously notice that everything is lined up neatly. However, most viewers will notice when the elements are out of alignment.

Types of Alignment for Page Layouts

  • Horizontal alignment: In horizontal alignment, left and right margins are exactly or visually equal. Horizontal alignment can be across the page or within columns. It doesn't necessarily mean center alignment. A block of flush left/ragged-right text can be aligned horizontally. Even though individual lines of text are not perfectly aligned on each side, careful attention to the amount of white space at the end of the line can result in a visually balanced amount of margin on each side of the block of text.
  • Vertical alignment: In vertical alignment, the top and bottom margins are exactly or visually equal. Vertical alignment can be the full page or within portions of the page.
  • Edge alignment: Edge alignment lines up text or objects along their top, bottom, left, or right edges. Alignment along the left edge (called ragged right) is frequently seen with text in newspapers and on web pages because our eyes are used to seeing and reading the text in this manner. 
  • Center alignment: Center alignment may be horizontal or vertical or both.
  • Visual or optical alignment: Visual or optical alignment fixes some of the problems that can occur with other types of alignment due to the varying shapes of letters and graphics. In visual alignment, the objects may not be precisely aligned, but to the eye, they appear lined up.

Using Alignment

Lack of alignment creates a sloppy, unorganized look on the page or screen. Mixing too many alignments can have a similar effect. It's OK to break alignment when it serves a specific purpose such as to intentionally create tension or to draw attention to a specific element on the page.

For simple arrangements, items can be aligned using the automatically align options in your software. For more complicated layouts, the use of guidelines and grids aid in the precise placement of elements.

Was this page helpful?