font-width | CSS CSS Properties

Selects a condensed or expanded font face variation. Values range from ultra-condensed to ultra-expanded.

Quick example

font-width: 75%; /* condensed */
font-width: 100%; /* normal */
font-width: 125%; /* expanded */

Syntax

normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Quick facts

Initial value

normal

Inherited

Yes

Examples

Use condensed font for headlines

h1 {
  font-family: "RobotoFlex", sans-serif;
  font-width: 75%;
  /* Narrower font, more compact headlines */
}

Use font-width to select pre-defined font width variants like condensed or expanded.

Expand font for large display text

.hero-text {
  font-family: "Inter", sans-serif;
  font-width: 125%;
  font-size: 4rem;
  /* Wide, airy spacing for large text */
}

Wider fonts work better at large sizes; condensed fonts at small sizes.

font-width Browser Support

Widely available Since 2020 85% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

Not all fonts support all widths

font-width values like 50%, 75%, 100%, 125%, 150% are standard, but not all fonts support all of them. The browser falls back to the closest available width.

Different from letter-spacing

font-width adjusts the inherent width of the font itself (if available). letter-spacing adds space between characters. Use font-width for font design control, letter-spacing for fine-tuning.