fontstretch

Font-stretch is a CSS property used to select a font variant with a different horizontal width. It relies on the font exposing a width axis or having separate condensed or expanded faces. When the chosen font does not provide a suitable variant or axis, the property is ignored and the font’s normal width is used.

The property accepts a range of values that describe how narrow or wide the glyphs should appear. Common values include ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded. These values map to the font’s width axis when available or to alternate font faces that provide those widths.

Usage examples can look like this:

p { font-family: "Example Font", Arial, sans-serif; font-stretch: condensed; }

header { font-family: "Display Font", sans-serif; font-stretch: expanded; }

Browser support for font-stretch depends on both the browser and the font in use. It is most effective with modern, variable fonts that explicitly expose a width (wdth) axis or with families that include condensed or expanded variants. If a font lacks the necessary axis or variants, font-stretch will have no visible effect.

Related concepts include variable font axes and font-variation-settings, which can be used to adjust the width axis directly (for example, via the "wdth" axis). Designers should test font-stretch across fonts and platforms to ensure consistent rendering and legibility.