CSS font-stretch Property

❮ Previous Reference Next ❯


.example {
  font-family: "Helvetica Neue", Arial;
  font-stretch: expanded;


The font-stretch property selects a normal, condensed, or expanded face from a font.

Note: The font-stretch property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.

Keyword to numeric mapping

The table below shows the mapping between keyword values and numeric percentages:

Keyword Percentage
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%

Default value:normal
JavaScript syntax:

Standard Syntax

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
normal Specifies a normal font face. This is default value.
ultra-condensed Specifies the most condensed font face.
extra-condensed Specifies the second most condensed font face.
condensed Specifies a condensed font face
semi-condensed Specifies a slightly condensed font face.
semi-expanded Specifies a slightly expanded font face.
expanded Specifies an expanded font face.
extra-expanded Specifies the second most expanded font face.
ultra-expanded Specifies the most expanded font face.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  font-stretch: normal;

See also

❮ Previous Reference Next ❯