Line That Up: Proper Alignment in Web Design

Proper alignment of elements and text on your website greatly impact the overall design.

Meticulous alignment of elements, such as images and text blocks, adds an extra level of professionalism to your site and is visually appealing and calming. Choosing the proper alignment for text within each block can also add a sense of order and contributes to readability and overall design.

But it can sometimes be hard to choose how to align items. Think about your audience as you select how to align elements, especially type, and keep readability in mind as a key concern. When working with other elements consider how they will be used as you develop an outline for your site.

Text

There are several places alignment comes into play with text – for your banner, navigational tools, sidebars and main body text. Each of these elements could include text that is aligned in different ways, but you likely want to develop a consistent style within each text element type.

Text can be aligned in four distinct ways – left, right, center and justified. When selecting a default alignment for body type on your site, first think of the language type will be displayed in. Does it read from left to right, or right to left?

Left aligned text is the default setting in most computer software and for building websites when no other text direction is set. Each line of text aligns with the left margin and is ragged along the right margin. Left justified text is the standard for main body text on most websites because it is easy to navigate, design and read. In web design, word spacing is most consistent with left alignment.

Right aligned text is the default setting for languages that read from right to left. Text aligns with the right margin and is jagged along the left side. Right justification appears most frequently in navigational elements or break out text blocks that are used more like art elements, such as big quotes.

Centered text is centered within the box it resides. Lines of type are typically jagged on both the right and left sides. Centering is most commonly used for text blocks containing few words.

Justified text stretches the entire width of a frame. While justified text is commonly used in print materials, it is uncommon in web design. The look of justified text can be somewhat hard to predict in different browser sizes. Further, because of the lack of defined hyphenation, text can squeeze and stretch somewhat more unpredictably, making readability an issue online.

Images

How you align images is relative to the size of each image and its relation to other elements on your site. Images can be aligned to the left or right margins or centered.

Commonly, display images are centered for maximum impact and to avoid having an abundance of dead space on one side or the other, in the way images are used on this website. The same is often true of images that are used as backgrounds. Display images are sometimes aligned to the left as well depending on how they pair with text or other elements; right-alignment for display images works in some instances but is not a commonly-used tool.

Smaller images offer much more flexibility in terms of alignment. Images that are inset in text blocks can be aligned to either the left or right. Aligning to the left margin creates simple clean lines with no jagged edges around images when paired with left-aligned text. Aligning to the right margin is a common alternative, with left-aligned text creating an uneven edge around the image. The one technique you will want to avoid is centering a small image inside a text block; this can make text very had to read. Do you read across or around the image?

Groups of Elements

By aligning elements in groups, even items that are different such as text and images, you add an extra level of organization and even professionalism to the look of your site. Note how the “The Kitchen” text block sits in alignment with the “What’s happening” block below it in the image above.

Keep in mind that all alignment is not in perfect squares. Items of different shapes and sizes can be aligned to a single plane for emphasis, making interesting shapes and groupings. As you can see in the image above, the effect you get when grouping the same elements with no common alignment is quite different.

Mixed Alignments

You don’t have to pick one type of alignment and stick to it for every part of your site design.

For text, you may choose to center navigation tools while using justified text for the main body copy. This can be a very effective use of alignment tools. The key is aligning common elements in the same way. Outline a plan for how text will be aligned for different parts of your site framework and stick to it.

For images, you may want to alter alignments. Maybe small photos could alternate between left- and right- justified positions for variety. This is a common and very effective practice. Make sure though, that all of your left- or right-aligned items fall along the same gridline. You can add even more emphasis in this configuration by sizing photos at the same widths to create a defined alignment scheme.