58 Chapter 5
font-stretch
Some font families contain condensed or expanded variants, and the
font-stretch property allows access to these. Here’s the syntax:E { font-stretch: keyword; }According to the specification, the keyword value can be any one of
the following: normal (the default), ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.
Each keyword relates to a font variant within a family, such as Frutiger
Condensed or Nova Ultra Expanded.
In the following example, I use font-stretch to display two different
faces of the font PT Sans, using the following code:h1 { font-family: 'PT Sans', sans-serif; }
h1.narrow { font-stretch: condensed; }The h1 element is displayed twice, both times using the font PT Sans.
In the second instance, I’ve used the font-stretch property with the value
condensed, which tells the browser to display the PT Sans Condensed face.
You can see the results in Figure 5-7.Figure 5-7: The second example uses the narrow font face because of the
effect of the font-stretch propert y.The font-stretch property is implemented in Firefox and IE9 and above,
but you could also replicate the effect by using the @font-face rule (intro-
duced at the beginning of this chapter) to specify a condensed or expanded
face in your font stack:@font-face {
font-family: 'PT Sans Condensed';
src: url('PT-Sans-Narrow.woff') format('woff');
}OpenType Features
Although web typography takes a great leap forward in CSS3, it still just
scratches the surface of the possibilities of type. If you compare the options
available to you in a browser with what’s available in a desktop publishing
application such as Adobe InDesign, you’ll see that the latter is much richer
than the former.