CSS font-stretch Property

The font-stretch property widens or narrows text.

The font used must support condensed and expanded font faces.

Many fonts do not support these separate faces.

Example

#

Text that is narrow (condensed) and wide (expanded).

This text is condensed.

This text is expanded.

<style>
  .condensed {
    font-stretch: condensed;
    font-family: "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
  }

  .expanded {
    font-stretch: expanded;
    font-family: "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
  }
</style>

<p class="condensed">
  This text is condensed.
</p>
<p class="expanded">
  This text is expanded.
</p>

Depending on the font, condensed and expanded font faces are often not available. In that case, use the transform property to stretch fonts, like so:

This text is condensed.

This text is expanded.

<style>
  .condensed {
    transform: scale(1,1.6);
  }

  .expanded {
    transform: scale(1,.6);
    font-size: 34px
  }
</style>

<p class="condensed">
  This text is condensed.
</p>
<p class="expanded">
  This text is expanded.
</p>

Syntax

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

Values

#

Value Description
ultra-condensed Very highly condensed text
extra-condensed Highly condensed text
condensed Condensed text
semi-condensed Slightly condensed text
normal Default. Does not stretch font
semi-expanded Slightly expanded text
expanded Expanded text
extra-expanded Highly expanded text
ultra-expanded Very highly expanded text
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Again, there are few fonts that support all font-stretch settings.


Browser support

This table shows when font-stretch support started for each browser.

Chrome
48.0 Jan 2016
Firefox
9.0 Dec 2011
IE/Edge
9.0 Mar 2011
Opera
35.0 Feb 2016
Safari
11.0 Sep 2017

You may also like

Guides