CSS Usage of font-stretch Property

CSS Usage of font-stretch Property

The font-stretch property is useful when working with variable fonts that support width variations. Here’s how you can use it in different scenarios.

1. Basic Usage

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

✅ This makes the paragraph text appear narrower than the default font width.

2. Using Different Stretch Values

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

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

✅ h1 will have a wider text appearance, while h2 will be slightly narrower.

3. Using Percentage Values

span {
  font-family: "Open Sans", sans-serif;
  font-stretch: 120%;
}

✅ This stretches the font width to 120% of its normal width.

4. Animating font-stretch

You can animate font-stretch for smooth transitions.

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

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

✅ The heading will expand and contract continuously.

5. Responsive Font Stretching (Media Query Example)

body {
  font-family: "Inter", sans-serif;
  font-stretch: normal;
}

@media (max-width: 768px) {
  body {
    font-stretch: condensed;
  }
}

@media (max-width: 480px) {
  body {
    font-stretch: ultra-condensed;
  }
}

✅ On small screens, the text width will automatically adjust to fit the screen better.

🛑 Important Notes

1. Not all fonts support font-stretch, so test before using.
2. Doesn't work in Internet Explorer (IE).
3. Works best with variable fonts that have width variations.