Website Readability 101
DaleKing
subscriber Posts: 141
During the course of a day, I often visit many websites, both for business purposes and pleasure. More often than not, I find websites that have poor readability. What do I mean by poor readability? Here are the five most common readability faux pas I come across:
1. White or light text on a black or dark background. This is a readability no, no. Why? This is called text in low-contrast, and research has shown that text in low contrast irritates the reader and causes eye fatigue. Instead, use contrasting colors like black or dark text on a white or light-colored background. This is easier on the eyes, and much more reader-friendly.
2. Huge blocks of text. Readers of web pages are notorius scanners, so break up your text into shorter, bite-sized paragraphs. There`s nothing worse than trying to read a paragraph that seems to never end. Most people won`t even bother to try. They`ll just click away and leave your site. Also, use bullets and subheads whenever possible.
3. Tiny text. Stay away from using tiny font sizes that make people squint or requires bifocals to read. Stick with 12pt font whenever possible. Or at the very least 10pt font. Conversely, don`t use overly large font sizes either. And use all-capitalization sparingly.4. Fancy fonts. Whenever possible use regular or standard font types such as Times Roman, Arial or Verdana. Try to stay away from hard to read fancy fonts, such as Italic, Comic Sans or any type of cursive fonts.5. Too much clutter. So many websites I visit look like someone`s attic. Clutter, clutter and more clutter. Have you ever visited a website that was so cluttered, your eyes didn`t know where to begin to look? Do you know what I do when I come across a website like that? Instead of hanging around trying to figure things out, I leave. Don`t over-crowd your webpages with text and graphics. Less is more. I personally live by the motto, "White space is a good thing!"
There are of course many other things you can do to make your website more readable. I will cover those in another article.
Dale King
1. White or light text on a black or dark background. This is a readability no, no. Why? This is called text in low-contrast, and research has shown that text in low contrast irritates the reader and causes eye fatigue. Instead, use contrasting colors like black or dark text on a white or light-colored background. This is easier on the eyes, and much more reader-friendly.
2. Huge blocks of text. Readers of web pages are notorius scanners, so break up your text into shorter, bite-sized paragraphs. There`s nothing worse than trying to read a paragraph that seems to never end. Most people won`t even bother to try. They`ll just click away and leave your site. Also, use bullets and subheads whenever possible.
3. Tiny text. Stay away from using tiny font sizes that make people squint or requires bifocals to read. Stick with 12pt font whenever possible. Or at the very least 10pt font. Conversely, don`t use overly large font sizes either. And use all-capitalization sparingly.4. Fancy fonts. Whenever possible use regular or standard font types such as Times Roman, Arial or Verdana. Try to stay away from hard to read fancy fonts, such as Italic, Comic Sans or any type of cursive fonts.5. Too much clutter. So many websites I visit look like someone`s attic. Clutter, clutter and more clutter. Have you ever visited a website that was so cluttered, your eyes didn`t know where to begin to look? Do you know what I do when I come across a website like that? Instead of hanging around trying to figure things out, I leave. Don`t over-crowd your webpages with text and graphics. Less is more. I personally live by the motto, "White space is a good thing!"
There are of course many other things you can do to make your website more readable. I will cover those in another article.
Dale King
Sign In or Register to comment.
Comments
Good points. Simplicity and consistency go a long way.
Thanks, Michael.
Dale King
I think my images are more stark that way. But I`ll try it the other way, too.
Actually, the images work for you. They stand out beautifully against the black background. But that white text on the black background is really tough on the eyes, my friend.
Dale King
DaleKing7/3/2008 8:41 AM
Thank you.
Dale King
Ouch.. So, here I am absorbing all of the multiple reviews that I`ve read over the months that I have been a member here... And my site redesign is... White text on a black background.
I think my images are more stark that way. But I`ll try it the other way, too.
Actually, the images work for you. They stand out beautifully against the black background. But that white text on the black background is really tough on the eyes, my friend.
Dale KingYou are looking at my Theater Videography web site, which is, as I said, being changed because I am changing my business plan. But since the backgrounds of the stages tend to be black, it`s a nice transition to a black page.I haven`t submitted it to this group for a thrashing because it is changing.What would you do in the alternative? Would a dark gray background (51,51,51) work better?Thanks,SteveVideography2008-7-3 11:5:3
Dale King
Craig, I`m confused. What exactly do you mean by that? Can you explain? No one here is talking about copywriting. This thread is about the readability of website content - not how well it`s written. I don`t understand the relevancy of the copywriting reference.
Dale King
DaleKing7/5/2008 7:27 PM
Dale King, you do not have a right to redefine contrast and assert that this definition is subjective (e.g. "many possible definitions"). You show your incompetence.
Here`s something for you:Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. They suggest a colour contrast algorithm, which is used in this test.
White on black or black on white has same contrast value.
Dale King, you do not have a right to redefine contrast and assert that this definition is subjective (e.g. "many possible definitions"). You show your incompetence.
At first I was puzzled by the hostile tone of your response. And then I took a quick peek at your site. Some of your text was so small and unreadable, I instantly clicked away from your site. Obviously your response is a defensive one, because you`re guilty of doing the exact same things I recommend against in my article.
No, my friend...it is you who shows your imcompetence!
Dale King
DaleKing7/5/2008 7:54 PM
I thought we`re talking about contrast?
And sorry for the tone, but it aggravates me when people feel they have authority to redefine things according to their subjective preferences.
Whether you agree with me or not isn`t important. What is important is we all have the right to interpret things and express those interpretations any way we choose. Those rights are protected under the First Amendment.
Dale King
DaleKing7/5/2008 8:10 PM
Well on the other note, why do you think W3C came up with the contrast guidelines?
What`s the excuse for your unreadable website? I`m through with this conversation.
Dale King
DaleKing7/5/2008 8:25 PM