CSS - font-stretch Property

Quiz

CSS font-stretch property makes text characters wider or narrower than the font's default character width.

Syntax

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

Property Values

Value	Description
ultra-condensed	It makes the text as narrow as it gets.
extra-condensed	It makes the text much narrower than condensed but less narrower than ultra-condensed.
condensed	It makes the text narrower than semi-condensed but less narrower than extra-condensed.
semi-condensed	It makes the text narrow compared to normal value.
normal	No font stretching is done. Default value.
semi-expanded	It makes the text wider compared to normal value.
expanded	It makes the text wider than the semi-expanded but less wider than extra-expanded.
extra-expanded	It makes the text wider than the expanded but less wider than ultra-expanded.
ultra-expanded	It makes the text as wider as it gets.
percentage	The stretch of the text is specified in percentage.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Stretch Property

The following examples explain the font-stretch property with different values.

Font Stretch Property with Normal Value

To not introduce any font stretch to the text, we use the normal value. This is the default value. These values have been used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: brown;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .ex1 {
         font-stretch: normal;
      }

      .ex2 {
         font-stretch: 150%;
      }
   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: normal, 150%
   </h4>
   <p class="ex1">
      This text has normal font-stretch.
   </p>
   <p class="ex2">
      This text has 150% font-stretch.
   </p>
</body>

</html>

Font Stretch Property with Different Condensed Values

To introduce a narrow stretch to the text, we can use the different variations of the condensed values which are: condensed, semi-condensed, extra-condensed and ultra-condensed. ultra-condensed is the narrowest while condensed is the least narrow, other values are in between these two. These values have been used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: red;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .condensed {
         font-stretch: condensed;
      }

      .semi-condensed {
         font-stretch: semi-condensed;
      }

      .extra-condensed {
         font-stretch: extra-condensed;
      }

      .ultra-condensed {
         font-stretch: ultra-condensed;
      }

   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: condensed, semi-condensed,
      extra-condensed, ultra-condensed
   </h4>
   <p class="condensed">
      This text has condensed font-stretch.
   </p>
   <p class="semi-condensed">
      This text has semi-condensed font-stretch.
   </p>
   <p class="extra-condensed">
      This text has extra-condensed font-stretch.
   </p>
   <p class="ultra-condensed">
      This text has ultra-condensed font-stretch.
   </p>
</body>

</html>

Font Stretch Property with Different Expanded Values

To introduce a wide stretch to the text, we can use the different variations of the expanded values which are: expanded, semi-expanded, extra-expanded and ultra-expanded. ultra-expanded is the widest while expanded is the least wide, other values are in between these two. These values have been used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: blue;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .expanded {
         font-stretch: expanded;
      }

      .semi-expanded {
         font-stretch: semi-expanded;
      }

      .extra-expanded {
         font-stretch: extra-expanded;
      }

      .ultra-expanded {
         font-stretch: ultra-expanded;
      }

   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: expanded, semi-expanded,
      extra-expanded, ultra-expanded
   </h4>
   <p class="expanded">
      This text has expanded font-stretch.
   </p>
   <p class="semi-expanded">
      This text has semi-expanded font-stretch.
   </p>
   <p class="extra-expanded">
      This text has extra-expanded font-stretch.
   </p>
   <p class="ultra-expanded">
      This text has ultra-expanded font-stretch.
   </p>
</body>

</html>

Font Stretch Property with Percentage Values

The font stretch of the text can also be given in percentage values (e.g. 100%, 50% etc.). Depending on the provided value, the stretch of the text will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: purple;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .ex1 {
         font-stretch: 150%;
      }

      .ex2 {
         font-stretch: 350%;
      }
   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: 150%, 350%
   </h4>
   <p class="ex1">
      This text has 150% font-stretch.
   </p>
   <p class="ex2">
      This text has 350% font-stretch.
   </p>
</body>

</html>

Note: If the font face you are using does not support condensed or expanded forms, the font-stretch property will have no effect.

Supported Browsers

Property
font-stretch	48.0	9.0	9.0	11.0	35.0

css_reference.htm

Print Page