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
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 60 | 9 | 47 | 11 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
60 | 9 | 44 | 11 | 8 | 60 |
Last updated by CSSPortal on: 1st January 2024