Grow your CSS skills. Land your dream job.

font-stretch

Last updated on:

The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font.

In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.

p {
    font-stretch: ultra-condensed;
}

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

If a particular font does not have all the faces represented, any value used will map to the closest equivalent face. Normal or condensed values will map to a narrower font and expanded values will map to a wider face, or else the nearest narrower face.

In supporting browsers, font-stretch can be used as part of the font shorthand property.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
none none 9+ none 9+ none none

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".