SfC Home > Web Design >
Explanation of Web Pages Should Be Readable - Succeed in Web Design. Also refer to fonts, text size, background color, images, page width, length, HTML, Ron Kurtus, School for Champions. Copyright © Restrictions
Web Pages Should Be Readable
by Ron Kurtus (revised 24 June 2008)
Once people come to your website, you want them to be able to read the information you have posted. This is true whether the purpose of your site is to promote your business, to provide academic information, or simply to show some personal interests. Unfortunately, some web designers go overboard with their design and actually make the page difficult to read. Factors to consider are the type and size of your font, the page background and the length and width of your page.
Questions you may have include:
- What font considerations should be made?
- What does the background have to do with things?
- How long and wide should a column be?
This lesson will answer those questions. There is a mini-quiz near the end of the lesson.
Font size, type and style
The size of your lettering font, the type of font used and the style are considerations in making a web page readable. Unless you are sure of your audience, keep to the basics with your font size, style and type.
Size
The default font size on most browsers is equivalent to 12 points on a word processor, although it can be adjusted by the user with the browser. It is standard and very readable.
Designating a specific font size in HTML, such as <small> or <font size="2"> is acceptable and still readable. But going any smaller than that results it material that cannot be easily read on most monitors, unless the user makes adjustments himself. For some reason, business websites like to use a smaller font size because they feel it looks more "professional" than a larger size.
Note that in some browsers, the user cannot adjust the font size. This can be a problem for vision impaired users. Thus, many sites use proportional size designations for their font or text size.
Type
The default font style in print is Times Roman. Unfortunately, that style is not easy to read on a computer screen because of its serifs or curly edges. Instead, non-serif fonts are recommended.
Common fonts used on websites are: Verdana, Arial, Helvetica and sans-serif.
Styles
Larger font sizes, everything in bold style, everything as a headline and everything in CAPS can be irritating and difficult to read, as well as to print out. This items should be used for emphasis only, if at all.
Background
You can define the background color of your web pages, as well as the text color. You can also provide a background image on your pages. Care must be taken, because this can reduce readability.
Background color
For some reason, the default color for popular browsers was gray, but now it is white with black typeface. A light yellow or light blue background with black type are also good combinations.
A black background with white, yellow, or red type is dramatic but not the best for serious reading. Using light colored font colors essentially eliminates readable printouts of the page.
I've seen some color combinations—like pink and light blue—that were so irritating that it was almost impossible to read the material.
Keep to the basic colors for maximum readability.
Background images
Many corporations use watermark-type background images with their logos in their Web pages. Other Web sites can be seen using fancy designs as background images.
Some of these designs are so overpowering that you cannot read what is written on the page. Unless the background image is subtle, it inhibits any reading of the text.
Since background images are repeated on a page, you should use caution if you are using a stripe, like on this page. The length of that image should be enough to account for the newer large monitors. Otherwise, the colored stripe may be repeated among the text, thus ruining the look of the page.
Avoid background images that make the page difficult to read.
Paragraph and page length
Since most browsers allow about 3/4 of the screen to be used for scrolling text, the length of paragraphs is very important in Web pages. You don't want the viewer to have to scroll to finish a paragraph or especially a sentence that began at the top of the screen.
Too much scrolling or page down commands can become disconcerting and inhibit understand of the information.
The same idea follows for the length or the document or Web page: don't make it too long. A Web page is not a book nor even a magazine article. A Web page is a special medium and in my opinion should provide a small "clump" of information.
Column width
By default, there are half inch margins on a browser page. I'm not sure if that is the most pleasing configuration for reading.
You can adjust the margins or use the HTML <blockquotes> to change the column wide. Another choice is to use a 3-column table to set your left and right margins. They can be set as a percentage of the screen to account for different sized monitors.
Some pages use a relatively thin column of text, similar to that seen in a print magazine. This does not look that bad but is a pain when printing.
Experiment with different column widths to find what suits your Web site users the best.
Summary
You should make considerations about how readable your Web page is for your audience. Use a good combination of background and typeface colors. Be cautious about using wild background images that may interfere with the text. Keep your paragraphs short. Keep your page length reasonable. And draw your own conclusions on what column width is effective.
Think of how others do things
Resources
The following resources provide information on this subject:
Websites
Books
Top-rated books on Website Design
Mini-quiz to check your understanding
1. What is a reason for proportional sized fonts?
2. Is using a dark blue background with light blue text advisable?
3. What is a problem with a full-width page format?
If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.
What do you think?
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.
Share link
Feel free to establish a link from your website to pages in this site.
Or use our form to send this link to yourself or a friend.
Students and researchers
The Web address of this page is
www.school-for-champions.com/web/readable.htm.
Please include it as a reference in your report, document, or thesis.
Where can you go from here?
Web Pages Should Be Readable