HTML5–CSS3

CSS Typography

Emphasis & Contrast

Emphasis

Giving emphasis to a word or words without interrupting the reader is important. Creating emphasis with type is a valuable technique for getting a message across. It helps gude the reader to take note of special words and key phrases.


Some common forms of emphasis are: bold, italic, caps, small caps, type size color, underline or a different typeface. Just try not to mix them all up in one document as it can get confusing and defeat the intended purpose.

Contrast

By creating contrast, you can direct the reader’s attention to important messages and at the same time enhance the overall visual appearance. Contrast is important because not all the content within a page have the same value and some have a greater significance than others. Contrast can come in various ways — color of text, color of background, size of font are all among many. Then there is the “pullout” that is often used by newspapers. But I think I like the use of color more than anything else. Consider this simple technique of highlighting a phrase. Not the normal yellow or pink or green, but just as effective.

Color

When looking at the basic design issues that affect a page, you can not ignore color as color also provides contrast. These are major tools used to create balance in composition. The designer should consider contrast between foreground (text) and background color (or images) very carefully. The goal is to improve readability and convince your reader of your point of view. Many factors affect the colors used on a web page. Often the color chosen are those the designer likes best. But colors also set a mood. A mood that can be happy and joyful, calming or exciting. There are complimentary color, some even associated with particular times of the year, such as Christmas red and green and Halloween black and orange.

Gradients

With CSS3, gradients are not supported by most all browser. Gradients provide nice background with an image frame or over the entire page. If you are not seeing the gradient surrounding this photograph and to the right then perhaps it is time to upgrade your browser.

parthenon.jpg

The Parthenon, Athens, Greece

News

About this Page

This page is for a web typography class. It has a fluid design for different screen sizes; resize you browser window to check it out.