Newspaper Column Effect: Justified Page Text

This article will teach you how to easily justify all of your page text so that it replicates newspaper columns. We will be referring to code that will be placed within an "external" stylesheet. You may want to familiarize yourself with why "external" style sheets are the most effective and logical way to design a web site (rather than internal or inline), by first reading our article, "External, Internal or Inline? Which Method is Best?".

Full Justified Page Text Personally and with all due respect, I do not like to see the page text justification property excessively used on the web. It has a way of shouting unprofessional and inexperienced. If you take a look around the web, you will find that not many sites with any great degree of popularity use this technique for all of their page text. And for good reasons. One important fact you should be aware of is that full page text justification is difficult for many folks to read on a computer screen. One of the biggest mistakes made by many new designers is assuming that what works for the print industry will work for the web. That is not true in many ways. Just because something looks cool, does not mean it is the wisest choice.

Center Justified Page Text What you will find on your web search, however, are newbie designers who use this effect to the point where everything they design is justified. Another design blunder is center justifying page text as illustrated in this paragraph. Standard Page Text You will also find that the big sites like Google, Yahoo, Amazon, Microsoft, Netscape, CNN, etc. do not use this effect for full page text justification. Granted there are situations where you might want to use this newspaper column effect especially if you are a newspaper, right? Maybe. :) But keep in mind that if CNN does not use it, why use it on the site you are designing for Joe's Print Shop?

The CSS code to create this effect is quick and easy. Add the text-align code to the body, p, and td tags as shown to your external style sheet. If you purchased a web template that has this effect, and you don't like it, the code in red below is what you need to look for so you can easily delete it.

body { text-align: justify}
p, td { text-align: justify}