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.
Text that is narrow (condensed) and wide (expanded).
This text is condensed.
<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.
<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>
font-stretch: ultra-condensed | extra-condensed |
condensed | semi-condensed | normal |
semi-expanded | expanded | extra-expanded |
ultra-expanded | initial | inherit;
| 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.
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 |
