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:
font-stretch property is well defined. As you can see it takes keywords, covering the range from
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:
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
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.