CSS Cookbook

10.3. Combining Unlike Elements to Create Contrast

Problem

You want to create contrast on a web page by integrating two different elements, like serif and sans-serif typefaces as shown in Figure 10-4.

Figure 10-4. Type elements juxtaposed in the same headline

Solution

Use different typefaces in the same headline. First adjust the markup to allow for changes in the font properties:

<h2>Cross<span>i</span>ng <span>Over</span></h2>
<h4>Sen. Jane Gordon (<span>I</span>-Utah) bolts GOP; <br />changes part<span>i</
span>es to be <span>I</span>ndependent</h4>

Then manipulate the CSS for the span element to create a mixture of typefaces:

body {
 margin: 25% 10% 0 10%;
}
h2 {
 font-size: 2em;
 font-weight: bold;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 text-transform: uppercase;
 text-align: center;
 padding: 0;
 margin: 0;
}
h2 span {
 font-family: Times, "Times New Roman", Georgia, serif;
 font-size: 1.1em;
 font-weight: normal;
 }
h4 {
 margin: 0;
 padding: 0;
 font-size: 1.25em;
 font-weight: bold;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 text-transform: uppercase;
 text-align: center;
}
h4 span {
 font-family: Times, "Times New Roman", Georgia, serif;
 font-size: 1.1em;
 font-weight: normal;
}

Discussion

Combining unlike elements creates a visual contrast. In this example, different characteristics of the serif and sans-serif typefaces in the headline created the contrast. However, you can ...