Astheria.com is now an archive and is no longer updated, you can find new writings at kylemeyer.com →


08 31 2007

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.

Justified

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:

Example of Justified Type ColumnsFigure 1: Examples of Justified Type

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)

Example of Left Aligned Type ColumnsFigure 2: Examples of left-aligned (ragged right) Type

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:

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.

Twelve

Responses

  1. I think you are completely right, the ragged edge alignments have a clear advantage using today’s browser technology. Usually I don’t even have to think about it, just left align whatever text comes up. Narrow columns can be problematic, and I think I generally fix it by either reorganizing the content, modifying the content, or just increasing the column size until the typography is aesthetically pleasing. None of the aforemetioned solutions really deal with fixing the problem, but avoiding it. I am also looking forward to the next generation of browser typography. Doesn’t look like that day is coming incredibly soon however.

  2. Great article. We can dream of a day when such typography is feasible, but for now, left-align seems the most common, and most appropriate choice as you said.

    I take it you aren’t a big fan of centering text either then? It doesn’t even get a mention. Good! :)

  3. Michael: Centered text has its uses but I see centering more as a line of free floating text positioned on the grid anywhere, it generally is never appropriate for body copy, so that’s why I skipped over it.

    Thanks for the comments both of you. :)

  4. Good article. Your use of images was really helpful in demonstrating your points.

    I use justified on my site. I have noticed some level of rivers, mostly when the text is next to an image, otherwise it’s not too bad. I just really like the way the block of justified text defines the post space and separates it from the sidebar next to it. Your site is different because the sidebar is on the left of the text, so it still has the straight side of the sidebar box meeting up with the straight edge of the left-aligned text. I think that’s a good decision for your site.

    Thanks for the info!

  5. I use justified for my site. Perhaps it is a peculiar personal preference as I also ensure that my correspondences at work are also typed out in a justified manner. It just somehow looks neater.

  6. To be perfectly honest, I haven’t met a designer who stands by justified copy – in any circumstance. One might even say that it can’t be justified.

    But ‘justified’ is a lovely word, and justified text has a lot of neat straight angles. ‘Ragged’ is a nasty one, and all those lines ending at whichever point they see fit is off-putting for many people (not designers, but then not designers are ideally a designer’s target audience). The number of times I’ve struggled to justify myself when I refuse to justify text for a client is terrible, really.

    Your design does something wonderful though, Kyle: The single column of copy has a lovely huge left margin and a smaller (but still considerable) right one to buffer the ragged edge. It glorifies the naked text, as opposed to forcing Bottox on in. Which is nice.

  7. I differ in opinion on use of left align.
    I prefer using justified alignment for major text of webpages. Since with increase in width of paragraph, say above 500px, so said rivers and line space diminish. Choice for me and many others are also governed by font in use. When using formal fonts like Georgia or Times New Roman, I stick to justified for better clean sharp aesthetic look. On the other hand a flashy site sporting wide range of color palette, it doesn’t make much difference.

    All being said, typography for print and web have different approaches as web text is subject to resizing and zooming by users. So no matter what’s used in Times or Post (on paper), web text alignment will have it’s different driving force.

  8. Vivek: Great point on the issue of column width, but I think it really comes down to line-length. While 500 pixels may eliminate rivers on 10 to 11 pixel text, it becomes much less effective on text greater than 14 or so pixels in size. But I can’t argue that properly set justified text is a beautiful thing. :)

  9. Left align is the most appropriate choice 4 me, it is the way we write… I mean, with a real pen and a real piece of paper ;)

  10. plsopqtbxczrlrltwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  11. I want to see CSS3’s column implementation option. It will give much more possibilities than todays CSS2.

  12. Sudden peaks and valleys (Figure 2) can be minimised by setting your measure to multiples of the font size used.

    p { font-size: 1em; }
    #column { width: 20em; }