How do I improve the readability of body text?

Question

I always find it hard to judge the readability of my site and there is so much conflicting information out there. So I thought I would ask for some options here. Could you please take a quick look at my site and let me know if the readability is good?

http://www.forex4noobs.com/forex-education/

Please ignore the green and black headings I still need to play with those. I need advice on the main body text.

Current settings are:

font-family:"myriad-pro-1","myriad-pro-2",HelveticaNeue,Helvetica,Arial,serif;
font-size:14px; 
line-height:1.43em; (roughly 20px)

Any advice on how to improve readability would be greatly appreciated.

Answer 1

The biggest problem is the visual emphasis lost by the bright colour (in this case green). You can say "ignore the other colour", but it's the biggest problem with the readability! So it's hard to successfully improve the readability without working on that colour.

• The menu on the left is very high contrast, causing it to distract the reader from the main text area. I would significantly reduce the visual weight of the menu by removing or reducing the green background colour of menu items.
• The green colour used by headers is too bright/low contrast and makes it hard to read. It also receives less visual emphasis because it's often situated directly above a big, bold, black header. But that black header is actually a sub-header to the green one. Consider switching the colours around and making the more important header bigger to more obviously suggest the right hierarchy. I would also darken the green quite a bit; I'm having trouble reading it and I'm not in the sun (nor do I have poor eyesight).
• The page title is kind of invisible, again because it's green. Make it black or some other colour that jumps out, and make it much bigger. Add a margin between the header and the body text - whitespace helps emphasise things.
• Add whitespace between paragraphs of text and subheaders, again to emphasise that you're entering a new section.
• Add a lot of whitespace at the bottom of the page after the content so I don't have to bring my eyes to the bottom of the monitor just to read the page. Whitespace here will also give my eyes a rest instead of cramming everything together.
• Your main body font choice and size is pretty okay, as is the line height. Consider slightly increasing the line-height between paragraphs.
• Why use Verdana and Arial haphazardly? Improve readability by sticking to one font. A good rule of thumb is to simplify fonts to one per family (eg. serif/sans-serif). This only applies to text you read; obviously designers should be free to choose fonts for other purposes.

I changed a few things using Webkit's inspector feature to give you an idea of what I'm talking about:

Note: somewhere along the way the images in the menu went missing; that wasn't intentional. Keep them! They're great chapter indicators.

Answer 2

My first impression is that you should increase spaces between end of text and new headers, the site gives a "heavy" impression, a lot of text is on a rather small space. White space, images or something else non textual is often used to lighten sites up.

Answer 3

First, I love the ninja analogy. I mean, you can't go wrong with ninjas.

However, it appears you're trying to accomplish too much on one page. Break up your message into several pages and boil down your information to a succinct paragraph or two. Then, provide links to the more detailed info.

Lead with statements that entice the reader to read more. Your first question is an excellent example of this. I recommend increasing its font to grab the reader's attention.

Want to Join Our Forex Ninja Academy?

If you hook the reader with your initial message, they will automatically click to read further.

Nice work!

Answer 4

There are too many words.

I'd do rather a heavy editing of your text to reduce the amount of words to the absolute minimum.