CSS font-stretch Property

❮ Previous Complete CSS Reference Next ❯

Example

Make the text in <div> elements wider:

div {
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
font-stretch: expanded;
}

Definition and Usage

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face.

Note: This property has no effect if the selected font does not offer condensed or expanded faces!

Default value:	normal
Inherited:	yes
Animatable:	yes. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.fontStretch="expanded"

Browser Support

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

Property
font-stretch	48.0	9.0	9.0	11.0	35.0

Syntax

Property Values

Value	Description
ultra-condensed	Makes the text as narrow as it gets
extra-condensed	Makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed	Makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed	Makes the text narrower than normal, but not as narrow as condensed
normal	Default value. No font stretching
semi-expanded	Makes the text wider than normal, but not as wide as expanded
expanded	Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded	Makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded	Makes the text as wide as it gets
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

❮ Previous Complete CSS Reference Next ❯