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.

CSS font-stretch normal
CSS font-stretch condensed

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

ie9 and above Fire Fox 9 and above

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


Sources