¶ The font-stretch property was introduced in CSS 2.0 over ten years ago, but was culled in the transition to CSS 2.1. It now languishes in the CSS 3 Fonts module. The property instructed browsers to select a ‘normal, condensed, or extended face from a font family’. Its removal from CSS 2.1 was due to a complete lack of implementation by browsers. Unfortunately this leaves us with a gaping hole regarding font support.

Many professional typefaces are designed with extended and condensed styles. This is particularly prevalent in sans-serif faces such as Myriad Pro, Futura, Univers and of course Helvetica. Another such font is American Typewriter, which is shipped with Mac OS X and comes with a condensed style.

So how does one specify text to be rendered in American Typewriter Condensed? Using font-stretch we would have done this:

p {
  font-family:"American Typewriter", monospace;
  font-stretch:condensed; }

The font-stretch property is well defined. As you can see it takes keywords, covering the range from ultra-condensed to ultra-expanded. But as stated earlier, it is no longer in the CSS 2 spec, and hence (and because) it is not supported in any browser at the time of writing.

Using the methodology I described for font-weight, there is a workaround based on font-family. We can specify American Typewriter Condensed as follows:

p {
  font-family:"AmericanTypewriter-Condensed",
   "American Typewriter Condensed",
   "American Typewriter", monospace}

As with specifying font weights in this manner, there is a caveat that any widened or otherwise styled text will require a further font-family rule. There is also the caveat – in this case – that it doesn’t work at all on Firefox 3. See for yourself in the test case.

Because Firefox 3 respects font-family rules properly; that is to say it goes by the font family name, not the individual font name; it ignores the ‘Condensed’ font names. This inherently eliminates the possibility of displaying the condensed style using the font-family workaround.

So how will this situation be rectified? If font-stretch were still in CSS 2, browser makers would be trying to support it. But Microsoft won’t implement anything from CSS 3 until it is nailed down to a Candidate Recommendation. Webkit and Mozilla have higher CSS 3 priorities. And the CSS working group won’t reintroduce font-stretch to CSS 2 until someone implements it. Catch 22.

As I see it, our hopes lay at the feet of someone attending to either Webkit Bug 12530 or Mozilla Bug 3512. I would if I could. Can you?

more