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

May202014

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.

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.

Browser Support

The font-stretch property doesn’t have very good browser support only working in internet explorer 9+ and Firefox 9+.