Home » CSS font-stretch property

CSS font-stretch property

by Online Tutorials Library

CSS font-stretch property

The font-stretch property in CSS allows us to select a normal, expanded, or condensed face from the font’s family. This property sets the text wider or narrower compare to the default width of the font. It will not work on any font but only works on the font-family that has a width-variant face.

This CSS property only works for the fonts with additional faces like expanded and condensed faces; otherwise, it will be affectless for the fonts that don’t have condensed or expanded faces.

The nine keyword values for choosing the width of the font-face are given in the following syntax.

Syntax

Property Values

The property values of this CSS property are tabulated as follows:

Keyword Description
normal This is the default value, which does not stretch any font.
semi-condensed It slightly condensed the text characters of the element. This value makes the text narrower than normal but not narrower than condensed.
condensed This value makes the text narrower than semi-condensed but not narrower than extra-condensed.
extra-condensed This value makes the text narrower than condensed but not narrower than ultra-condensed.
ultra-condensed This value makes the text extremely narrowed.
semi-expanded It slightly widened the text characters of the element. This value makes the text wider than normal but not wider than expanded.
expanded This value makes the text wider than semi-expanded but not wider than extra-expanded.
extra-expanded This value makes the text wider than expanded but not wider than ultra-expanded.
ultra-expanded This value makes the text extremely wider.

Let’s understand the above property values by using an example.

Example

Test it Now

Output

CSS font-stretch property


Next TopicCSS Colors

You may also like