CSS font-stretch Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

.container {
  padding: 0 1rem;
  font: 1.5rem 'Myriad Pro', sans-serif;
}
.condensed {
  font-stretch: 50%;
}
.normal {
  font-stretch: 100%;
}
.expanded {
  font-stretch: 200%;
}

Result

Editor