CSS font-stretch Property

The CSS font-stretch property selects a narrower or wider face of the current font, letting you condense or expand the text without changing its font-size or font-weight. It is one of the CSS3 properties.

The key thing to understand is that font-stretch does not stretch glyphs the way a transform would. It only picks an alternate width face that the font already ships with. If the font-family has no width-variant faces, the property has no visible effect, the text stays at its normal width. This is why you will only see a result with fonts that include condensed/expanded variants (for example Myriad Pro, Roboto Condensed, or a variable font with a wdth axis).

When to use it

Reach for font-stretch when:

You are using a font family that provides multiple width faces and want the browser to pick the right one (instead of importing each face under a separate font-family name).
You are working with a variable font that exposes a width (wdth) axis — percentage values map directly onto that axis.

For everyday text where the font has only a single width, font-stretch does nothing, so do not rely on it as a fallback for fitting text into a box.

Note: In the latest CSS Fonts specification font-stretch has been renamed to font-width. Browsers still accept font-stretch as an alias, so the property name in this chapter remains valid everywhere.

Values

font-stretch accepts either a keyword or a percentage. Each keyword has an equivalent percentage:

Keyword	Percentage
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

Percentages give finer control: any value from 50% to 200% is allowed, and on a variable font you can use in-between values such as 90% or 133%. Values below 100% are narrower than normal; values above 100% are wider.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No
Animatable	Yes.
Version	CSS3
DOM Syntax	object.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

The example below applies every keyword to the same letter. Remember that you will only see a difference if the rendered font (Myriad Pro here, with a system fallback) actually provides those width faces.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro', sans-serif;
      }
    </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 »

Using a percentage with a variable font

With a variable font that exposes a width axis you can request any value in the 50%–200% range, including in-between widths:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: 'Roboto Flex', sans-serif;
        font-size: 2em;
      }
      .narrow { font-stretch: 75%; }
      .normal { font-stretch: 100%; }
      .wide   { font-stretch: 150%; }
    </style>
  </head>
  <body>
    <p class="narrow">Condensed text (75%)</p>
    <p class="normal">Normal text (100%)</p>
    <p class="wide">Expanded text (150%)</p>
  </body>
</html>

How the face is selected

The face chosen for a given font-stretch value depends on the width faces the font actually ships. When no face exactly matches the requested value, the browser falls back to the nearest one: values below 100% map to the closest narrower face, and values at or above 100% map to the closest wider face.

Value descriptions

Value	Description
ultra-condensed	Narrows the text to the maximum extent (50%).
extra-condensed	Narrows the text significantly, but not as much as `ultra-condensed` (62.5%).
condensed	Narrows the text moderately, but not as much as `extra-condensed` (75%).
semi-condensed	Narrows the text slightly, but not as much as `condensed` (87.5%).
normal	No alternate face is selected. This is the default value (100%).
semi-expanded	Expands the text slightly wider than `normal` (112.5%).
expanded	Expands the text moderately wider than `semi-expanded` (125%).
extra-expanded	Expands the text significantly wider than `expanded` (150%).
ultra-expanded	Expands the text to the maximum extent (200%).
50% to 200%	A percentage representing the stretch factor; below 100% is narrower, above is wider.
initial	Sets the property to its default value.
inherit	Inherits the property from the parent element.

font-weight — selects the thickness of the font face.
font-style — selects normal, italic, or oblique faces.
font-variant — controls small-caps and other alternate glyphs.
font-family — declares which font (and its faces) to use.
font — the shorthand for setting several font properties at once.

Practice

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

It allows you to modify the aspect ratio of fonts without changing their height.It changes the color of the font.It changes the height of the font.It allows you to modify the width of fonts.