Mobile app version of vmapp.org
Login or Join
Samaraweera270

: Options for adjusting paragraphs? 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

@Samaraweera270

Posted in: #Css #Html

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.)

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Samaraweera270

2 Comments

Sorted by latest first Latest Oldest Best

 

@Yeniel560

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.

10% popularity Vote Up Vote Down


 

@Marchetta884

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme