CSS font-stretch Property

The font-stretch property makes the text wider or narrower.

This property is one of the CSS3 properties.

The font-stretch property does not work on any font! It only works if the font-family has width-variant faces. The font-stretch property alone does not stretch a font.

This property has the following values:

  • font-stretch:
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version CSS3
DOM Syntax object.style.fontStretch = "expanded";

Syntax

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;

Example of the font-stretch property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro';
      }
    </style>
  </head>
  <body>
    <p>
      <span style="font-stretch: ultra-condensed">A</span>
      <span style="font-stretch: extra-condensed">A</span>
      <span style="font-stretch: condensed">A</span>
      <span style="font-stretch: semi-condensed">A</span>
      <span style="font-stretch: normal">A</span>
      <span style="font-stretch: semi-expanded">A</span>
      <span style="font-stretch: expanded">A</span>
      <span style="font-stretch: extra-expanded">A</span>
      <span style="font-stretch: ultra-expanded">A</span>
    </p>
  </body>
</html>

Selection of the font face

The face which is selected for the value of the font-stretch property relies on the faces that the font in question supports. If there is no face provided by the font, that matches the given value, the values that are less than 100% map to a narrower face, and the values that are greater or equal to 100 % map to a wider one.

Values

Value Description
ultra-condensed Makes the text as narrow as it gets.
extra-condensed Makes the text narrower but not as narrower as ultra-condesed value.
condensed Makes the text narrower but not as narrower as ultra-condesed value.
semi-condensed Makes the text narrower but not as narrower as extra-condensed value.
normal There is no font stretching. This is the default value of this property.
semi-expanded Makes the text wider than normal.
expanded Makes the text wider than semi-expanded.
extra-expanded Makes the text wider than expanded.
ultra-expanded Makes the text as wide as it gets.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
48.0+ 12.0+ 9.0+ 11.0+ 35.0+

Practice Your Knowledge

What does the CSS property 'font-stretch' do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?