Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

On my company's website, we have a page (here) that I have been asked to adjust. What is desired is to take the first paragraph and adjust it to trim down the amount of space between words. My first thought was to make the paragraph (and then the rest of the page, to match) left aligned instead of justify. To me, however, this doesn't look very good. Are there any other options available for me to make this look good (or at least acceptable), or am I stuck with a left justify? Thanks. (P.S. I don't think these tags are the most appropriate, but I can't add ones I think work better. Oh, well.)

share|improve this question
    
There's no way to justify text without adding spaces between words. CSS3 will let you specify different justification methods (where gaps are added), but it will still need to add gaps between words to justify the text. How else would you make the text line up perfectly on each side? –  Lèse majesté Sep 2 '10 at 0:34
    
Just my .02, left justified is going to be a lot more common looking to the user...and UI is all about recognizable (common) patterns. A different font might help as well...consider Google's new @font offerings. –  bpeterson76 Sep 2 '10 at 5:12
    
Character width could affect how the justified text looks, so you could either make the font smaller or choose one with narrower characters. The more words you can put on a line, the more evenly the justification algorithm can distribute the gaps. That's why narrow columns look much worse justified than wide columns. But aside from that, there's not much you can do. In theory word-wrap should help, but in practice it makes no difference at all. Perhaps CSS3 should add an attribute for hyphenation frequency. –  Lèse majesté Sep 2 '10 at 8:01

2 Answers 2

up vote 1 down vote accepted

Here's my assessment on first glance:

  • You can't reduce the spacing between the words while still keeping the text justified. Your choice is either smaller, equal spacing (non-justified) or larger, variable spacing (justified).
  • Text looks fine without justification. It's generally agreed that left-aligned is better than justified, on the web at least*.
  • The line length is very long once the text is wrapping under the image. Generally 60-80 characters per line is the most readable; your page has 160+ on my screen.

Some things you can try:

  • Reduce the amount of text: this is often an overlooked solution. Do you need all that text there? Will people read it? Consider hiring a professional copywriter to make your content more concise and more appealing to read.
  • Reduce the width of the text container: perhaps make it fixed width so that all users see the same line length. You could keep the image outside the text block.
  • Increase the font-size: this will help decrease the line length (fewer characters per line).
  • Increase the line-height: this makes it easier for the eye to drop down to the next line, particularly with longer lines. (Browser default is around 1.3; try 1.4 or 1.5.)
  • Reduce the letter spacing: this doesn't look good IMO (try it with letter-spacing: -1px) but it would reduce the spacing between words.
  • I'd also suggest center-aligning the content blocks. Your logo and menu at the top, and text in the footer are all center-aligned.

* I haven't found any solid articles online, but this paragraph from Jakob Nielsen's usability review of the Kindle mentions it in passing:

The Kindle iPhone app displays pages with fully justified text (that is, flush left and right). This reduces legibility slightly, particularly for the small telephone screen's narrow columns. Stanza uses left-justified text only, which is a better choice.

share|improve this answer
    
My first thought was going with left justification, but the CEO (who is in charge of the site) likes full, and I thought it might look a bit odd with the one page being left justified wile other pages are full. I'm not adverse to using left justification (I do in several other areas of the site on a line by line basis), but I don't know if I could talk him into left justification everywhere without the citation. –  Tom Sep 2 '10 at 15:12
    
This Wikipedia article states that people with dyslexia find it difficult to read justified text: en.wikipedia.org/wiki/Justification_(typesetting) –  DisgruntledGoat Sep 2 '10 at 15:52
    
I'll have to bring that article up to the bosses next time they request a change. Meantime, I took your second suggestion, reversed it, and made the table 1% larger. it reduced the space between words to the point that the boss is happy and it isn't really noticable to most people. Now the next challenge is to convince them that an entire re-design is justifiable, and beneficial to us... :) –  Tom Sep 2 '10 at 23:53

One thing you could try would be constraining the content area's width, just like the home page.

By setting an explicit width on your content, you can control how the justified spacing occurs, instead of depending on what browser window width your user might have.

share|improve this answer
    
The whole site is a mix of css and tables. I've been trying to update as best as I can (site was originally built by marketers, I'm maintaining now), but it's slow going as I'm having to clear out a ton of frontpage 2k and word 2k code and replace it with some clean html and css. Otherwise, re-sizing the content area a tiny bit may be the way to go, i'll see. –  Tom Sep 2 '10 at 15:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.