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

  • Initial valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAs specified
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.fontStretch
Formal syntax: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded 

font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
  • normalSpecifies a normal font face.
  • ultra-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • extra-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-condensedSpecifies a font face more condensed than normal, with ultra-condensed as the most condensed.
  • semi-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • extra-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • ultra-expandedSpecifies a font face more expanded than normal, with ultra-expanded as the most expanded.
  • inherit
.class {font-stretch: ultra-expanded;}

Click the button below to experiment with this property.

Give it a Try!

9+Firefox9+ExplorernoChromenoSafarinoOpera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.