W3docs
en
Log in

CSS font-stretch Property

The font-stretch CSS property makes the text narrower or wider. Learn all the values and try examples for yourself.

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:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
  • 50% to 200%
Initial Valuenormal
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedNo
AnimatableYes.
VersionCSS3
DOM Syntaxobject.style.fontStretch = "expanded";

Syntax

Syntax of CSS font-stretch Property

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;

Example of the font-stretch property:

Example of CSS font-stretch Property with ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial and inherit values

<!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>
Try it Yourself »

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

ValueDescription
ultra-condensedNarrows the text to the maximum extent.
extra-condensedNarrows the text significantly, but not as much as ultra-condensed.
condensedNarrows the text moderately, but not as much as extra-condensed.
semi-condensedNarrows the text slightly, but not as much as condensed.
normalNo stretching is applied. This is the default value.
semi-expandedExpands the text slightly wider than normal.
expandedExpands the text moderately wider than semi-expanded.
extra-expandedExpands the text significantly wider than expanded.
ultra-expandedExpands the text to the maximum extent.
50% to 200%Numeric values representing the stretch factor.
initialSets the property to its default value.
inheritInherits the property from the parent element.

Practice

Practice

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