The WebDev Buzz

Buzz provided by: www.changaFONTS.com

  • Resources

    • Free Downloadable Fonts Great selection of fonts available to download for free. Sorting through the fonts if made easy with example images.

The Background of Images and Text

11th May 2006


In web design, the “background” does not stay in the background. It will have a significant effect on the text or foreground. In white paper, the background is literally zip. But on the computer screen, all images have to be obedient to pixels, and all fonts must adjust to the lower resolution. This means that some fonts will appear unintelligible. Such is called “visual noise”.

Here are more ideas to keep in mind when choosing backgrounds for the web pages:

  • Contrast affects the size of the letters. That is, a bright white background tends to make letters appear smaller. On the other hand, bright letters set against a dark background appear larger. If the people in web design wanted the computer screen to display the precise size of the character, they should go for low contrast.
  • Related to contrast, the contrast ratio makes the character or font type appear thinner. Contrast ratio refers to the difference between the darkest and the lightest parts of the image. On regular paper, the contrast ratio is relatively small because the eye receives reflected light only. On the computer screen, the contrast ratio is greater because the monitor directly emits the light. Another thing that adds to the contrast ratio is the glare produced by the monitor.
  • Letters and characters written on paper are easier to read because the ink is absorbed by the paper. This absorption effectively thickens the character. There is no “absorption” on the computer screen. Thus, to make the characters easier to read, the chosen font types are bolder or thicker.
  • For academic web pages, a white background is preferred so that it will provide the dignified impression of ink on clean white paper. But for most web pages, the contrast must be reduced for easier readability. This is why the usual choice is a dark-colored text set against a background with muted color.
  • Warm colors, like red and yellow, tend to advance or “come forward”. This is why warm colors in a living room are inviting. On a web page, however, warm colors make reading a challenge. This is because the warm colors will give the illusion that the background is actually in the foreground of the characters.
  • Cool colors, like blue and green, tend to recede or “move away”. This is why cool colors in a room make the room appear wider and spacious. On the web page, cool colors make the characters more distinct, especially when the characters have neutral colors.

The above ideas will serve as guide posts for the web designer in choosing the right background. A good background will make an image or character come alive or appear better. But this does not mean that the web designer should strictly follow what is written here. His main concern is still to make the whole website give the desired impression or effect. If high contrast is necessary, then, by all means, he should place characters and backgrounds with high contrast.

Leave a Reply