Use Contrasting Color and Text Weight Effectively

Have you ever been to a web site that is difficult to read or is hard on the eyes? This is usually because there is little or no contrast between the text and other elements. Here are some examples good and bad:

Good:

Contrast can also be create by using text weighting, for example: As you can see from the example above, mixing type faces of different weight can often create contrast and help to separate sections of your page. In this example we mixed Serif and San-Serif fonts. San-Serif fonts have smooth edges where Serif fonts have flourishes or "serifs" on the edges. This is a Serif font. This is a San Serif Font. See the difference?

Example of Contrasting Text Elements Different Text Size and Weight Creates Good Contrast. Use this technique to add interest to your page.

Other things you should avoid: You should also avoid textured backgrounds that make text hard to read. Here is an example:

Make Intelligent Use of Images Including Images that Display Text

One of the challenges of creating a good web site is making it look consistent from viewer to viewer. Unfortunately, not everyone has the same fonts available to them on their computer. The only way you can make sure that look of text is the same for every user is to create an image consisting of text.

Below is an example:


The text above is a .gif file. In general, if you create images from text, they should be gifs because the file size will be smaller and text will "render" or display more clearly than with .jpg or JPEG images. For more information on image types. See optimizing images for the web.

So why not create a web page as an image? This is not practical or desirable.

Not Practical-- Not practical because the file size of the web page would be huge. To give you an idea, the little text example above is a 3.35KB gif. An image that holds an entire page of text would be at least 100KB. This would take over 20 to 40 seconds to load a typical 33.6K to 56K modem.
Not Desirable-- Not desirable because the search engines would never index your site. Search engines index sites based on the text they see. If the entire page was an image, the site would appear to have no text content.

An Intelligent Compromise-- Render important titles as images to create contrast and interest. Intelligent use of text as images can create a nice effect without making your web pages bloated.


What's Next

Now that you have planned your site, and understand how to create a good layout, you are ready to actually create your site. Next we will look at the nuts

 Previous: Design and Layout (1)      Next: How to Create Your Pages