CSS Cookbook, 2nd Edition

Chapter 2. Web Typography

Introduction

Before CSS, web developers used font tags to set the color, size, and style of text on different parts of a web page:

<font face="Verdana, Arial, sans-serif" size="+1" color="blue">
 Hello, World!
</font>

Although this method was effective for changing the appearance of type, the technique was limiting. Using multiple font tags across many, many pages resulted in time-consuming updates, inflated the overall file size of the web document, and increased the likelihood that errors would occur in the markup. CSS helps to eliminate these design and maintenance problems.

As a quick demonstration, first set content within a p element:

<p>Hello, World!</p>

Then set styles in the head of the document to dictate the look of the paragraph:

<style type="text/css" media="all">
 p {
  color: blue;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
 }
</style>

Now through this technique, the paragraph’s structure and its visual presentation are separated. Because of this separation, the process of editing and maintaining a web site’s design, including typography, is simplified immensely. Modifications to the style can be done in a style sheet without having to make changes at the content level.

Web developers not only get greater editing ease over previous techniques, but also typography control. In addition to discussing setting the color, style, and size of fonts, this chapter also covers techniques for setting initial caps, creating visually compelling pull ...