How to Justify Text in HTML
Ranked #1,604 in Internet, #94,007 overall
How Make Text Justified on Webpages
Here's the HTML to justify text on a webpage (actually, it's CSS code, but who cares what it's called):
<p style="text-align: justify;"> Paragraph body text goes here.</p>
This justifies text with a uniform right margin, except for the last line of the paragraph. But before you run out and justify your blog posts, Squidoo articles, or other content, WAIT! Stop! There's something to consider.
<p style="text-align: justify;"> Paragraph body text goes here.</p>
This justifies text with a uniform right margin, except for the last line of the paragraph. But before you run out and justify your blog posts, Squidoo articles, or other content, WAIT! Stop! There's something to consider.
Important!
Is Justified Text More Professional-Looking?
Check any professional website: The New Yorker, Sports Illustrated, CNN, Scientific American, Martha Stewart, National Geographic or the BBC.
Do they use justified text? No? Read on to learn why.
Do they use justified text? No? Read on to learn why.
Five Reasons Justified Text Is Harder to Read
Based on documented scientific studies
Studies have found that we read words on a screen more slowly than a printed page. Screen-optimized fonts like Georgia and Verdana help, as do book-quality screens like Kindle
, but this holds true for regular websites.
Therefore, every little readability issue becomes more of a problem on the web.
Therefore, every little readability issue becomes more of a problem on the web.
- 1Justified text eliminates the ragged edge, the uneven lines of text on the right-hand margin. Our brains use this uneven line to keep track of our place. WIthout it, it's like trying to find one house in a block of identical rowhouses.
- 2Justified text introduces uneven spacing between letters and words to pad out the line. The brain has more trouble processing unevenly-spaced letters than evenly-spaced letters, since it's slightly less clear which gaps are ends of words. "Non-uniform spacing between words decreases reading speed by as much as 11 percent (Trollip and Sales 1986)" -- Source
- 3Hyphenated words at the end of justified lines force the brain to slow down, locate and reconstruct the halves of words split over two lines.
- 4Extra spaces between words gives more chances for these spaces to line up, creating the well-known phenomenon of "rivers" in justified text. The vertical rivers tend to lead the eye up and down and sometimes cause the eye to "trip" onto the line below after the gap.
- 5Readability problems are magnified for children, some elderly, dyslexics, and all kinds of people with minor vision or reading disabilities.
Important!
The Bottom Line
Yes, justified text creates even, formal, professional-looking blocks of text. However, justified text is harder to read.
Unless the visual layout (appearance) of the page is much more important than its message (content), do NOT justify text with CSS and HTML.
Unless the visual layout (appearance) of the page is much more important than its message (content), do NOT justify text with CSS and HTML.
Convinced?
Let's settle this age-old typesetting question...
I used to think justified text was better for webpages, but after looking into this, I've decided to stick with the ragged-right-margin defaults on Squidoo, Wordpress, and most other sites. How about you?
Loading poll. Please Wait...
PostScript
Another observation on justified text
While researching the question of justified vs. unjustified text, I came across a discussion among lawyers about this issue. One of the commenters noted:
As if to prove the point, I've seen a sidebar ad several times today by a shady-looking legal firm promising to save you from DUI convictions, and they're using justified text. So maybe, despite its visual tidiness, justified text is actually favored by less-professional types trying to look more professional!
"I've found that some lawyers/clients seem to like justification for the following reasons:
1) It looks professional;
2) It looks like it ought to be less negotiable; and
3) It reduces readability."
As if to prove the point, I've seen a sidebar ad several times today by a shady-looking legal firm promising to save you from DUI convictions, and they're using justified text. So maybe, despite its visual tidiness, justified text is actually favored by less-professional types trying to look more professional!
Some of My More Useful Pages on Web Design
HTML and CSS Codes, Layout Tips and More
Guestbook
Justify your opinion, or just comment
Spread the word!-
-
NigelHay
Mar 2, 2012 @ 1:07 am | delete
- Thank you for the very useful information. Much appreiated. :)
-
by Greekgeek
Storyteller, former Latin teacher, student of mythology and the ancient world: I've worn many hats, but always I've dabbled in computers and the web.
Until...
more »
Feeling creative?
Create a Lens!
Explore related pages
- How to Start a Web Design Business How to Start a Web Design Business
- Top 10 Web Design Software Review Top 10 Web Design Software Review
- Color Combinations Color Combinations
- How to Align Images Side By Side How to Align Images Side By Side
- Magento Templates - 20 Premium Magento 1.7 Templates On Sale Magento Templates - 20 Premium Magento 1.7 Templates On Sale
- How To Create An Impressive Writing Website How To Create An Impressive Writing Website