CSS font-stretch Syntax

CSS font-stretch Syntax

The font-stretch property is used to adjust the text width within a font, making it appear narrower or wider than its normal width.

Syntax:

selector {
  font-stretch: value;
}

Example:

p {
  font-family: "Arial", sans-serif;
  font-stretch: expanded;
}

Property Values

Value	Description
ultra-condensed	50% of normal width (narrowest)
extra-condensed	62.5% of normal width
condensed	75% of normal width
semi-condensed	87.5% of normal width
normal (default)	100% of normal width
semi-expanded	112.5% of normal width
expanded	125% of normal width
extra-expanded	150% of normal width
ultra-expanded	200% of normal width (widest)
<percentage>	Custom stretch percentage (e.g., font-stretch: 120%;)

Example with Different Values:

h1 {
  font-family: "Roboto", sans-serif;
  font-stretch: ultra-expanded;
}

h2 {
  font-family: "Poppins", sans-serif;
  font-stretch: semi-condensed;
}

p {
  font-family: "Arial", sans-serif;
  font-stretch: 130%;
}

🛑 Notes:

• font-stretch only works if the selected font supports width variations.
• It is not supported in Internet Explorer (IE).
• Works best with variable fonts that include stretchable widths