The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

60 Chapter 5

Figure 5-8: The lower example uses OpenType’s

own small caps feature

In the first h1 element, which uses simulated small caps, the proportions

are off; the difference between the large and small capitals is barely notice-

able. Compare that with the second h1 element, which has more obvious

proportions and looks more pleasing to the eye.

Now I’ll demonstrate the use of ligatures, which are used to join certain

pairs of characters to make them appear more harmonious. As with kern-

ing, most browsers automatically use common ligatures unless instructed

not to, so, in this example, I’ll compare text with no ligatures, common liga-

tures, and discretionary—that is, more decorative—ligatures.

Here’s the code:

.lig-none { font-feature-settings: "liga" off; }

.lig-common { font-feature-settings: "liga"; }

.lig-disc { font-feature-settings: "dlig"; }

This code is applied to three h1 elements. The first has the parameter

string "liga" off, so common ligatures are disabled. The second uses the

same parameter string except without the off value, so common ligatures

are enabled. The third has the string "dlig", which enables discretionary

ligatures. Figure 5-9 compares the three.

Figure 5-9: Comparing OpenType ligatures:

(from top) none, common, and discretionary

Pay attention to the character pairs Th and ct. In the first h1 element,

without ligatures, they are rendered as separate characters. In the second,

with common ligatures, the Th pair is joined together at the point where

the characters almost meet. In the third h1 element, the ligatures are dis-

cretionary, so the ct pair is also joined with an extravagant flourish.