📏 Mastering font-stretch in CSS

📌 Introduction

The font-stretch property in CSS allows you to control the horizontal width of text. It works by selecting a condensed or expanded version of a typeface—if available. This property is especially useful when designing headings, logos, or interfaces that need tight or wide typography. ✨

🔍 What is font-stretch?

The font-stretch property adjusts how wide or narrow the text characters appear. It does not scale the text visually; instead, it selects a font face that is naturally narrower or wider.

Basic Usage

p {
  font-stretch: expanded;
}

📐 Available Values

font-stretch supports both keyword values and percentage values.

✨ Keyword Values
  • 🔹 ultra-condensed
  • 🔹 extra-condensed
  • 🔹 condensed
  • 🔹 semi-condensed
  • 🔹 normal (default)
  • 🔹 semi-expanded
  • 🔹 expanded
  • 🔹 extra-expanded
  • 🔹 ultra-expanded
📊 Percentage Values (50%–200%)

Percentage values give more precise control.100% = normal width. Lower values = narrower text. Higher values = wider text.

Percentage Example

h1 {
  font-stretch: 150%; /* wider text */
}

p {
  font-stretch: 80%; /* narrower text */
}

Note

💡 font-stretch only works if the font family includes condensed or expanded variations (e.g., Inter, Roboto Flex, Open Sans Condensed).

📊 Comparison Table

ValueStretch LevelDescription
ultra-condensedVery narrowTightest character width
condensedNarrowCompact headings
normalDefaultStandard width
expandedWideBetter spacing for titles
ultra-expandedVery wideExtra spacing effect

🧠 How It Works Behind the Scenes

Many fonts come with multiple widths like:Condensed, Expanded, and Semi-expanded. When you apply font-stretch, the browser chooses the closest matching font variant.

Note

⚠️ If the font does not support width variations, the browser will ignore font-stretch.

🔥 Using Variable Fonts (Best Modern Approach)

Variable fonts offer continuous control over width, making font-stretch extremely powerful.

Variable Font Example

@font-face {
  font-family: "RobotoFlex";
  src: url("RobotoFlex-VariableFont.woff2") format("woff2-variations");
  font-stretch: 50% 200%;
}

h1 {
  font-family: "RobotoFlex";
  font-stretch: 170%;
}

📸 Visual Demonstration

Further details can be found at: https://dummyimage.com/900x250/ccc/000&text=Condensed+vs+Normal+vs+Expanded

🛠 Real-World Example

Use in Headings and Labels

.title {
  font-weight: 700;
  font-stretch: semi-expanded;
}

.menu-text {
  font-stretch: condensed;
}

.logo {
  font-stretch: 180%;
  letter-spacing: 1px;
}

💡 Best Practices

  • ✔️ Use condensed for tight UI and navigation menus.
  • ✔️ Use expanded styles for bold titles and hero sections.
  • ✔️ Use percentage values for fine control in variable fonts.
  • ✔️ Avoid extreme stretching for paragraphs—it reduces readability.
  • ✔️ Always confirm that the font supports stretch variations.
>>“Good typography is subtle. Great typography feels natural without being noticed.”

🏁 Conclusion

The font-stretch property gives you control over how wide or narrow your text appears. Whether using keyword options or leveraging the power of variable fonts, understanding font-stretch helps you create modern, flexible typography for the web. 🎉