ALIGNMENT
The Principle: Create a visual relationship between all
of the elements in your layout, even if the elements are far apart. The simplest
way to do this is to align the elements in some kind of pattern or
grid.
Common Mistakes: Arbitrary placement; mixing different
text-alignment schemes on the same page--using left, center, and right
alignments in the same layout, for example.
A lot of web sites that are made give little thought to the alignment of
their elements. Alas, the result of this is that these sites often feel a little
confusing or disorganized. Many times, by carefully considering the way the
elements in your site are arranged, you can give the site a unified look that
the reader--often unconsciously--will pick up on.
The two guidelines you should use when considering alignment in your site are
these:
- Everything on your page should have some relationship with other things on
the page
- Strong lines give a sense of unity.
Our example below shows one
web page with an ill-considered design scheme and the same document with a much
more solid one.
Sloppy use of centering |
Strong lines created by careful alignment |
| While the information in the text above is explained pretty clearly,
there is a bit of confusion to it. The images are different sizes and
centered, which results in a messy page. |
By repeating the size of the image, and aligning both text and image
(note the alignment of the Title with the images on the right and text on
the left), this document is given a much more unified feel. |
About Fully-Justified Text
- Often considered more formal, less friendly than left-aligned text.
- Usually allows for more characters per line, packing more into the same
amount of space (than the same text set left-aligned).
- May require extra attention to word and character spacing and hyphenation
to avoid unsightly rivers of white space running through the text.
- May be more familiar to readers in some types of publications, such as
books and newspapers.
- Some people are naturally drawn to the "neatness" of text that lines up
perfectly on the left and right.
- Traditionally many books, newsletters, and newspapers use
full-justification as a means of packing as much information onto the page as
possible to cut down on the number of pages needed. While the alignment was
chosen out of necessity, it has become so familiar to us that those same types
of publications set in left-aligned text would look odd, even unpleasant.
- You may find that fully-justified text is a necessity either due to space
constraints or expectations of the audience. If possible though, try to break
up dense blocks of texts with ample subheadings, margins, or graphics.
About Left-Aligned Text
- Often considered more informal, friendlier that justified text.
- The ragged right edge adds an element of white space.
- May require extra attention to hyphenation to keep right margin from being
too ragged. Generally type set left-aligned is easier to work with (i.e.
requires less time, attention, and tweaking from the designer to make it look
good).
About Center alignment
- Centered and right-justified text blocks are difficult to read.
- makes finding the beginning of a new line of text much more difficult.
- Each line tends to be a different length. As a result it is much more
tiring to read text with center alignment.
- The eye is constantly guessing and searching for the start point.
- In addition, center alignment causes odd line lengths. These odd lengths
cause a sort of "choppiness" in how the text reads. It lacks the smooth flow
that tends to occur with left alignment.
Left-justified text is the most legible option for Web pages because the left
margin is even and predictable and the right margin is irregular. Unlike
justified text, left justification requires no adjustment to word spacing; the
inequities in spacing fall at the end of the lines. The resulting "ragged" right
margin adds variety and interest to the page without interfering with
legibility.
No matter what alignment you use, remember to pay close attention to
hyphenation and word/character spacing as well to insure that your text is as
readable as possible. The alignment style for an entire page, not just the text,
must be selected. Proper alignment will create strong associations and a
pleasing presentation.
|
