CSS font-stretch Property

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

No browsers support the font-stretch property.

The font-stretch property will not work on just any font! It will only work if the font family has width-variant faces. The font-stretch property itself 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

<!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>

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.




Related articles