font-stretch

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

• font
• font-variant
• font-style
• font-weight
• line-height
• font-size
• font-family

Browser Support