# CSS font-stretch

June 8, 2017 414

The font-stretch property is used to expand or contract text horizontally. It selects a normal, expanded or condensed face from a font family. It is a shorthand property of font.

Not all font families have different faces which match the values of the font-stretch property listed below. This property will work only when the font family has the face which matches the desired value.

CSS

font-stretch: value;


This property is not supported by majority of browsers. Also, the font family that you choose is another deciding factor for this property to work.

## Values

It can take the following nine values.

ultra-condensed

extra-condensed

condensed

semi-condensed

normal

semi-expanded

expanded

extra-expanded

ultra-expanded

In the above list of values, normal specifies a normal font face. The values listed above it specifies a more condensed font face, the topmost being the most condensed. Similarly, the values listed below normal specifies an expanded font with the lowest value being the most expanded.

If a value does not have a face representing it in the font family used, then the result is rounded to the nearest value, preferably a more expanded one.

## Browser Support

Only a few browsers support the font-stretch property, which include Firefox 9+ and IE 9+.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT