CSS font-stretch Property

CSS font-stretch Property

What is the font-stretch Property?

The font-stretch property in CSS is used to control the width variation of fonts. It adjusts the font's stretchability, making it appear condensed, normal, or expanded depending on the available font styles.

Example:

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

Syntax

font-stretch: value;

• Default value: normal
• Inherited: Yes
• Applies to: All elements
• Animatable: Yes, as a percentage
• CSS Version: CSS3

Values

Value	Description
ultra-condensed	Makes the font width narrowest (50% of normal width)
extra-condensed	Slightly wider than ultra-condensed (62.5% of normal width)
condensed	A narrower version of the font (75% of normal width)
semi-condensed	Slightly condensed (87.5% of normal width)
normal	Default font width (100%)
semi-expanded	Slightly wider than normal (112.5% of normal width)
expanded	Wider than semi-expanded (125% of normal width)
extra-expanded	More expanded (150% of normal width)
ultra-expanded	Widest stretch (200% of normal width)
percentage	Allows a specific width percentage (e.g., font-stretch: 120%;)

Example Usage

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

p {
  font-family: "Open Sans", sans-serif;
  font-stretch: semi-condensed;
}

Browser Support

The font-stretch property is well-supported across modern browsers but requires fonts that include stretch variations.

Browser	Support
Chrome	✅ Yes
Firefox	✅ Yes
Edge	✅ Yes
Safari	✅ Yes
Opera	✅ Yes
IE	❌ No

Important Notes

• Not all fonts support font-stretch. The property won't affect the rendering if a font does not have width variations.
• Some fonts provide only a few stretch variations, so you may not see drastic changes.
• The property is animatable, meaning you can create effects using transitions or animations.

Example Animation:

@keyframes stretch {
  0% { font-stretch: normal; }
  50% { font-stretch: expanded; }
  100% { font-stretch: ultra-expanded; }
}

h2 {
  font-family: "Poppins", sans-serif;
  animation: stretch 3s infinite alternate;
}

Conclusion

The font-stretch property is useful when working with variable fonts that support different widths. While it won’t work on every font, when used correctly, it provides better control over typography, improving aesthetics and readability in web design.

Would you like me to format this for your website with proper HTML and styling?