Text alignment is always a tricky issue, especially on the web where we are at the mercy of text rendering, sizing, and window space all at the discretion of the viewer. However, all forms of alignment have their place on the web. But before we get to the decision making process, let’s have a closer look at our options.
The alignment of choice for numerous newspapers, magazines, and numerous other printed mediums. Justified text blocks fit neatly into grids, and even hold a shape of their own when set apart from the flow of the body copy. Imagine a newspaper article not set in a justified manner, while the columns would still be visible they would not be as neat and easy to follow. The paper would also not be nearly as recognizable from a distance. Beyond its neat aesthetic appeal justified text allows for more characters per line through use of hyphenation, kerning, and even individual tracking.
But justified text suffers from requiring a meticulous eye to avoid “white rivers” where the gaps between individual words fall vertically in line. Justified type also has the habit of appearing very formal due to its print associations in newspapers and high class magazines and grid like nature, which is a pro or a con depending on how you look at it.
Below in Figure 1 is a quick example of poor(A) and proper(B) justified type. Note that in illustration B the introduction of hyphens and kerning, while still not perfect, helps removes the problems shown in the previous example where I’ve marked the rivers in red and a few odd spacing issues in orange:
Another thing to note in the above illustration is that in the proper example the last line of text is hanging to the left rather than fully justified as in the poor example. There are four types of closures for justified type, where the last line is fully justified, or the last line hangs to the left, right, or center; the latter three leaving white space.
Left-Aligned (Ragged Right)
The default in almost every text-editing software available and the choice of many, left-aligned type is by nature less formal and more inviting than fully justified type. It is much easier to maintain well formed blocks of type with compared to justified as it doesn’t create odd whitespace issues between words and has a consistent level of kerning. Also known as ragged right for the rough right edge created by the variances in line length, left-aligned type by nature creates its own visual interest in the form of whitespace. However, that whitespace is also one of the potential problems that this type alignment endures. Below, again, is an example of a poorly formed ragged edge(A) and a more proper example:(B)
While this is demonstrated with relatively narrow line lengths, this is possible at any length, in red you can see that there are sudden peaks and valleys as you move down the right edge while in the proper example the line rolls along with only graceful rises and falls.
Right-Aligned (Ragged Left)
Right-aligned type blocks are very similar to left-aligned type blocks. They are rarely used for conveying body copy in left-to-right reading cultures as the ragged left edge makes it difficult for the eye to follow the type smoothly. However, it is great for meta information, headlines, or when used to align an oversized piece of type to add visual interest. For the most part, everything that applies to left-aligned type is applicable here as well.
What to Use on the Web?
What alignment you choose will always be decided upon by the calls of the particular project, there is no one right answer but there are some peculiar factors that come into play when designing for the web rather than print:
- It is unrealistic to manually adjust kerning, tracking, etc. for large blocks of type
- Different operating systems and browsers render type differently, which changes how the type falls
- Users can resize their browser windows and manually adjust the size of the type
All of these factors play a large role in deciding. You can’t fix all the rivers in justified type, and you can’t fix all the overly-ragged edges in left or right aligned type, so what’s a designer to do?
For the most part, go with the flow. Ragged alignments are really the kings of the web due to the lesser amounts of troubles that come in to play when you take into account the problems of each. Even well structured formal sites such as The New York Times have adopted a ragged approach rather than the traditional justified look of their print counter-parts.
But that isn’t to say that justified type does not have its place on the web, although it’s typically used for shorter blocks of type and in those cases its typically an image in order to assure that everything can be tweaked appropriately. While its not popular at the moment, CSS3’s column implementation could make justified text on the web a more appealing option.