font-stretch

The font-stretch property provides the ability to make text narrower (condensed) or wider (expanded).

Syntax

Not all fonts offer condensed or expanded faces, so font-stretch will only work when used with those that do.

div.ex {
  font-family: "Helvetica Neue", sans-serif;
   font-stretch: expanded;
}

Values

ultra-condensed
The text is made as narrow as it gets.

extra-condensed
The text is made narrower than condensed, but less narrow than ultra-condensed.

condensed
The text is made narrower than semi-condensed, but less narrow than extra-condensed.

semi-condensed
The text is made narrower than normal, but less narrow than condensed.

normal
Default value. No font stretching is applied.

semi-expanded
The text is made wider than normal, but not as wide as expanded.

expanded
The text is made wider than semi-expanded, but not as wide as extra-expanded.

extra-expanded
The text is made wider than expanded, but not as wide as ultra-expanded.

ultra-expanded
The text is made as wide as it can get.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of font-stretch? Submit a codepen.io demo and we'll showcase it here ↴