CSS Cookbook, 3rd Edition

Chapter 3. 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.

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>

Through this technique, the paragraph’s structure and its visual presentation are separated. Because of this separation, the process of editing and maintaining a website’s design, including typography, is simplified immensely. You can modify the style in a stylesheet without having to make changes at the content level.

In addition, web developers get more editing capabilities over previous techniques, as well as control over typography. Besides setting the color, style, and size of fonts, this chapter also covers techniques for setting initial caps, creating visually compelling pull quotes, modifying leading, and more.

Specifying Fonts ...