CSS font-stretch Property

CSS font-stretch property is used to set the expended or condensed face of a font.

It is to be noted that the font family you are using might not have expanded or condensed face of fonts. In this situation, the font-stretch property has no effect.

Example:

.p1{
  font-family: Arial, Helvetica, sans-serif;
  font-stretch: condensed;
}

CSS Syntax

The font-stretch property has the following syntax:

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

Property Values

The font-stretch property accepts the following values:

normalThis is the default value. The fonts are displayed normally without any stretching.
ultra-condensedSpecifies the most condensed face of fonts.
extra-condensedFonts are condensed more than condensed face but less than ultra-condensed.
condensedSpecifies the condensed face of fonts.
semi-condensedFonts are slightly condensed.
semi-expandedFonts are slightly expanded.
expandedSpecifies the expanded face of fonts.
extra-expandedFonts are slightly more stretched than an expanded face.
ultra-expandedSpecifies the most expanded face of fonts.
initialSets the font-stretch property to its default value(normal).
inheritInherits the font-stretch property from the parent element.

General Info

Default Valuenormal
InheritedYes
JavaScript Usageelement.style.fontStretch = “condensed”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.