CSS font-stretch Property

The font-stretch property controls which width variant of a typeface the user agent should choose when rendering text. Rather than changing the weight, style, or size of glyphs, it influences selection from the available faces in a font family so that the chosen face is narrower or wider than the default face. When a family provides multiple width variants (or when a variable font exposes a width axis), font-stretch is used by the font selection algorithm to prefer the best match for the requested text, which in turn affects glyph shapes and horizontal spacing at the font-face level. Because it operates at the font selection stage, this property works together with the family you specify via font-family.

In practice the user agent considers font-stretch alongside other font-selection properties such as font-weight and font-style to pick the most appropriate face from the available sources. For variable fonts that expose a width axis, developers can use font-variation-settings (or the variable-font axis) to achieve continuous width tuning; in those cases font-stretch maps conceptually to the font’s width axis and the browser resolves the requested width by reading or synthesizing that axis from the variable data. If an exact width variant isn’t available, user agents will choose the nearest matching face or fall back to the family’s default, which means using font-stretch may produce different results depending on which font files are loaded.

Because changing the chosen face changes the underlying glyph outlines and metrics, font-stretch can have noticeable effects on layout and legibility. Wider or narrower faces alter character advance widths, word widths, and line breaks; they can also shift text alignment and wrapping behavior, potentially affecting vertical rhythm and the perceived density of text blocks. Designers should test combinations of width adjustments with font sizing and spacing - the visual effect of a width change may differ substantially at small vs. large sizes - so consider this when you plan responsive typography with font-size variations.

For practical use, rely on real font files to supply the intended width variants when consistency matters (webfonts or font collections that include condensed/expanded masters or a width axis). Be aware that in some environments the renderer might approximate a missing width by scaling a face horizontally, which can alter stroke contrast and degrade typographic quality, so always test across your target platforms. Finally, combining thoughtful use of width variants with complementary properties (weight, style, and variable-font settings) lets you target nuanced typographic effects - while keeping an eye on readability and layout stability across your content.