The font-stretch property selects a normal, condensed, or expanded width face from a font family. It changes how wide letters are, not their font-size.
The font must offer width variants (a variable font with a width axis, or separate Condensed / Expanded faces). Otherwise the property has little or no visible effect. Demos on this page use the variable font Inconsolata.
Not deprecated and not experimental. Spec renamed this to font-width; font-stretch remains a supported legacy alias with the same values.
font-stretch: normal | <percentage> | condensed | expanded | … | initial | inherit;The initial value is normal (100%). Percentage values are typically used between 50% and 200%.
| Value | Description | Try it |
|---|---|---|
condensed | Narrower face (maps to 75%) | Try it |
expanded | Wider face (maps to 125%) | Try it |
<percentage> | Exact width, e.g. 75% or 150% | Try it |
ultra-condensed | Most condensed keyword (50%) | Try it |
normal | Default width (100%) | Try it |
inherit | Uses the parent’s font-stretch | Try it |
Other keywords: extra-condensed, semi-condensed, semi-expanded, extra-expanded, ultra-expanded.
font-stretchLoad a multi-width font, then pick a keyword or percentage.
font-family to that face.font-stretch with a keyword or percentage.wdth axis.| Piece | Required? | Role |
|---|---|---|
| Multi-width font | Yes (to see a change) | Variable width axis or Condensed/Expanded faces |
font-family | Yes | Selects that font for the text |
| Keyword or % | Yes | Chooses how condensed or expanded |
font-size | Optional | Size stays independent of stretch |
Sample text uses Inconsolata (variable width). Change only font-stretch.
Each snippet focuses on font-stretch with a variable-width font. Use Try It Yourself for a live editor.
Pick a narrower face with the condensed keyword.
<style>
p {
font-family: "Inconsolata", monospace;
font-stretch: condensed;
}
</style>
<p>Condensed text.</p>font-family must point at that variable font.font-stretch: condensed maps to 75% width.font-size does not change.Widen the face with the expanded keyword.
<style>
p {
font-family: "Inconsolata", monospace;
font-stretch: expanded;
}
</style>
<p>Expanded text.</p>font-stretch: expanded maps to 125%.transform: scaleX().Set an exact width with a percentage value.
<style>
p {
font-family: "Inconsolata", monospace;
font-stretch: 150%;
}
</style>
<p>Text at 150% width.</p>150% is the same numeric width as extra-expanded.normal = 100%, condensed = 75%, expanded = 125%.If width never changes, check these first.
Many common faces (basic Arial, Times) have only one width. Use a variable font or a family that ships Condensed/Expanded styles.
font-widthfont-stretch is kept as a legacy alias for font-width. Both select the same width faces today.
scaleX()transform: scaleX() squashes glyphs and can look distorted. Prefer real width faces via font-stretch.
A family might only support 75%–125%. Values outside that range still resolve to the closest available face.
font shorthand does not set stretchThe font shorthand does not include font-stretch. Set stretch on its own after the shorthand if needed.
font-stretch is a browser CSS property for font width selection. Node.js, Deno, and Bun do not apply it.
Supported across modern Chrome, Edge, Firefox, Safari, and Opera. Visible results still depend on the font offering width variants.
Bottom line: Safe for modern browsers. Always pair it with a multi-width font or demos will look unchanged. It is not a runtime API.
wdth axis, nothing changes.condensed is 75%, normal is 100%, expanded is 125%.font-stretch; the modern name is font-width.One line: multi-width font + font-stretch: condensed; = narrower letterforms at the same size.
Learn normal, italic, and oblique faces for emphasis.
8 people found this page helpful