List of Topics

SfC Home > Web Design >

 

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:

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.

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

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 and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


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.


Share

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:
www.school-for-champions.com/web/
make_pages_easy_to_read.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Make Web Pages Easy to Read




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.