Make Web Pages Easy to Read
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.
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.
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.
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.
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.
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.
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 combinationslike pink and light bluethat were so irritating that it was almost impossible to read the material.
Keep to the basic colors for maximum readability.
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.
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 width. 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.
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 and references
Questions and comments
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
Students and researchers
The Web address of this page is:
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
Make Web Pages Easy to Read