Expand All | Collapse All

CSS3 font-stretch Property

Topic: CSS3 Properties ReferencePrev|Next


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

The following table summarizes the usages context and the version history of this property.

Default value: normal
Applies to:
All elements. It also applies to ::first-letter and ::first-line
Inherited: Yes
Animatable: Yes. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit

The example below shows the font-stretch property in action.

p {
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;

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 font-stretch property.

Browser Compatibility

The font-stretch property is not supported in most of the browsers.

Browsers Icon

Basic Support—

  • Firefox 9+
  • Google Chrome ×
  • Internet Explorer 9+
  • Apple Safari ×
  • Opera ×

Warning: The font-stretch property is currently not supported by the Chrome, Safari and Opera browsers. You should better avoid using this property.

Further Reading

See tutorial on: CSS Fonts, CSS Units, CSS Pseudo-elements.

Related properties and at-rules: font, font-family, font-size, font-size-adjust, font-style, font-variant, font-weight, @font-face.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties