CSS font-stretch Property

Description

The font-stretch CSS property allows you to control the width or stretch of a font within a font family. It provides a way to adjust the character spacing horizontally without changing the font size or weight. You can set the font-stretch property to various values, such as ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, or ultra-expanded, to achieve different levels of stretching. This property is particularly useful for fine-tuning typography and achieving specific design aesthetics when working with fonts that support different stretching options.

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
Yes
JavaScript syntax
object.style.fontStretch

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded 

Values

  • normalSpecifies a normal font face.
  • ultra-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • extra-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • extra-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • ultra-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • inherit

Example

<div class="container">
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
</div>
.container {
  padding: 0 1rem;
  font: 1.5rem 'Myriad Pro', sans-serif;
}
.condensed {
  font-stretch: 50%;
}
.normal {
  font-stretch: 100%;
}
.expanded {
  font-stretch: 200%;
}

Browser Support

The following table will show you the current browser support for the CSS font-stretch property.

Desktop
Edge Chrome Firefox Opera Safari
126094711
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
6094411860

Last updated by CSSPortal on: 1st January 2024