CSS `font-stretch`: Control Font Width for Enhanced Typography

Learn how to adjust font width using the CSS `font-stretch` property. This tutorial explains how to use keywords like `condensed`, `expanded`, and others to modify text width for improved typography and visual appeal. Discover how to fine-tune your web design.

Adjusting Font Width with CSS `font-stretch`

Understanding `font-stretch`

The CSS `font-stretch` property adjusts the horizontal width of a font. It makes the text wider or narrower relative to its default width. This property only affects fonts that provide variations in width (like "condensed" or "expanded" versions of a font family). If a font family doesn't have these variations, the `font-stretch` property will have no effect.

`font-stretch` Property Values

The `font-stretch` property accepts these keyword values:

Keyword	Description
`normal`	(Default) No stretching or condensing.
`semi-condensed`	Slightly narrower than normal.
`condensed`	More narrow than semi-condensed.
`extra-condensed`	Even more narrow than condensed.
`ultra-condensed`	Extremely narrow.
`semi-expanded`	Slightly wider than normal.
`expanded`	More wide than semi-expanded.
`extra-expanded`	Even more wide than expanded.
`ultra-expanded`	Extremely wide.

Example: Demonstrating Font Stretching

This example shows the effect of different `font-stretch` values on a sample text. You would need to include the HTML for the text and the appropriate CSS to see the results. The visual difference will be more pronounced depending on the font family used. Not all font families will have all of the font stretch options available.

CSS Code


p {
  font-family: Arial; /* Choose a font that supports various stretches */
  font-size: 16px;
}

p:nth-child(1) { font-stretch: normal; }
p:nth-child(2) { font-stretch: semi-condensed; }
p:nth-child(3) { font-stretch: condensed; }
p:nth-child(4) { font-stretch: extra-condensed; }
p:nth-child(5) { font-stretch: ultra-condensed; }
p:nth-child(6) { font-stretch: semi-expanded; }
p:nth-child(7) { font-stretch: expanded; }
p:nth-child(8) { font-stretch: extra-expanded; }
p:nth-child(9) { font-stretch: ultra-expanded; }