CSS font-stretch Property


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

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

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


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.