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

Limited availability85% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

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

18.4+

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.