CSS font-stretch Property

Description

The font-stretch property selects a normal, condensed, or expanded face from a font.

Initial value

normal

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

As specified

Animatable

Yes

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.fontStretch

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%;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
9	12	60	9	47	11
Tablets / Mobile
60	60	9	44	11	8.0

Last updated by CSSPortal on: 1st November 2019