Normal, Condensed, or Expanded Font Faces With CSS font-stretch

May 20, 2014 | 2 Minute Read

Have you ever attempted to use a condensed or expanded font face from a particular font family using CSS? How did you do it? Did you create a new web font with a subset of the condensed or expanded versions? Well, thanks to CSS3 there's now a better way, [sort of](#sortof).

CSS font-stretch

The CSS font-stretch property will properly select the specified font face, normal, condensed or expanded if one exists.

This property does not physically stretch or squish the type, it simply selects the proper font face.

font-stretch Properties

The available font-stretch properties are:

ultra-condensed — uses the most condensed font face available
extra-condensed — uses the next most condensed font face available after ultra-condensed
condensed — uses the next most condensed font face available after extra-condensed
semi-condensed — uses the next most condensed font face available after condensed
normal — uses the normal font face
semi-expanded — uses the next expanded font face available after normal
expanded — uses the next expanded font face available after semi-expanded
extra-expanded — uses the next expanded font face available after expanded
ultra-expanded — uses the most expanded font face available after extra-expanded
inherit — inherits its font-stretch value from its parent

The Sort of…

So, this is a better solution, sort of. The problem is that the font-stretch property is currently in the W3C Candidate Recommendation phase. This means that it is considered an experimental technology and is subject to change. Thus, the font-stretch property has pretty spotty browser support so it’s not quite ready for prime time.