Font-stretch property
Last updated: 2026-09-13
font-stretch Font-stretch property
The font-stretch CSS property selects a condensed or expanded variant of a font, from ultra-condensed to ultra-expanded across nine levels. It only takes effect if the font actually provides a matching width variant.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | Keyword | Font stretch levels |
<percentage> | Type | A stretch percentage |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-stretch | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Warning： Almost no Chinese fonts include width variants, so the property is effectively inert for Chinese and is mainly used with Western typography and variable fonts.
❓ FAQ
QHow does the font-stretch property differ from letter-spacing in CSS?
Afont-stretch changes the width proportion of the glyphs themselves (condensed/expanded) and needs the font to provide matching width variants or variable font axes; letter-spacing only adds space between characters without changing the glyphs. Use font-stretch to make text narrower, letter-spacing to add breathing room.
QDoes the font-stretch property have any effect on Chinese text rendering?
ABasically not. Nearly all Chinese fonts ship a single regular-width set of glyphs with no condensed or expanded variants, so the browser ignores the property. It is mainly useful for Western text and variable fonts.
QHow do I make text look narrower using the font-stretch property in CSS?
AIf the font provides width variants, use font-stretch: condensed. You can also compress with transform: scaleX(0.9), though the glyphs get distorted. Variable fonts accept exact width percentages, for example font-stretch: 75%.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
