Most online readers don’t read line by line; instead they scan from one point to another. For this reason, designers create typographic contrast and flow by emphasising certain text. Contrast is important because not all content within a page have the same value; some have greater significance than others.

By creating contrast, you can direct the reader’s attention to the important messages, and at the same time enhance the visual appearance of a certain website.

Here are seven basic methods on how to create typographic contrast:

1. SIZE

Larger font size indicates higher priority because it draws a reader’s attention. This method is therefore commonly applied to headings. On the other hand, you can de-emphasise by using smaller font size.

2. TYPEFACE / CLASSIFICATION

Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif. Generally, to create a contrast between the headings and the body text, designers use serif font for the headings and sans-serif font for the body, or vice versa.

If you want to go beyond the web safe fonts, there are two more options:

   1. CSS image replacement, that is to use CSS to hide the text and replace with a background image.
      [css + bg image = static graphic img]
   2. sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
      [Javascript+Flash = any font dynamically]

Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.

3. COLOUR

Colour contrast is a common way to distinguish between navigation, headings, links, and body text. You can use faded color to indicate that something is disabled or unavailable. Sometimes you don’t need to make something bigger to get more attention, therefore you can create emphasis by using a brighter color, such as red.

You can also use color to distinguish individual words within a group of text. When small font size combined with lighter tone color, the importance of the text is further de-emphasised.

4. CASES

When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.

Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

5. STYLE AND DECORATION

One of the common mistakes made by most editors (particularly Microsoft Word users), is the tendency to use the underline decoration to emphasise certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do NOT underline any text that is not a link when posting on the web. Instead, you can use italic font style.

6. WEIGHT

Making certain text a heavier weight (bold or strong) can also create emphasis. Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.

7. SPACE

Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next. There are various ways to create space:

    * Block break (padding or margin) is the space in between the block elements.

    * Paragraph break (padding or margin) is the space created after the element.

    * Tracking (letter-spacing) is the space in between the characters.

    * Leading (line-height) is the space in between the lines.

    * Indentation (padding or margin) is commonly used for blockquote and list elements.