🔎 CSS font-stretch: Adjusting the Width of Your Fonts
Typography isn’t just about size and style — the width of your fonts can dramatically affect the look and feel of your text. The CSS font-stretch property lets you control how condensed or expanded your text appears by selecting a narrower or wider version of a font.
🧾 What is font-stretch?
The font-stretch property allows you to select a condensed or expanded face of a font family. This is especially useful when a font has multiple widths available (like “Condensed”, “Expanded”, or “Ultra Condensed” versions).
It controls the amount of horizontal space the text occupies without changing the font size or weight.
🧬 Syntax
selector {
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit;
}
🎯 Values Explained
| Value | Description |
|---|---|
normal | Default width of the font |
ultra-condensed | Extremely narrow font width |
extra-condensed | Very narrow font width |
condensed | Narrower than normal |
semi-condensed | Slightly narrower than normal |
semi-expanded | Slightly wider than normal |
expanded | Wider than normal |
extra-expanded | Very wide font width |
ultra-expanded | Extremely wide font width |
inherit | Inherit value from parent |
🎯 Example Usage
p.narrow {
font-stretch: condensed;
}
p.wide {
font-stretch: expanded;
}
🧠 How It Works
- Only affects fonts that have different width variants available.
- The browser will try to use the specified font width variant from the font family.
- If the font does not support that width, it will fallback to
normal. - Works together with
font-style,font-weight, andfont-sizefor fine typography control.
🛠️ Practical Tips
- Use with variable fonts that support width variation for smooth adjustments.
- Not all fonts have all width variants — check your font’s available styles.
- Combine with
font-weightandfont-stylefor diverse text effects. - Use in headlines or logos to create impactful, dynamic typography.
- Test on different browsers to ensure consistent behavior.
✅ Browser Support
Most modern browsers support font-stretch, but older browsers or some mobile browsers may have limited support.
- ✅ Chrome (from v60+)
- ✅ Firefox (from v52+)
- ✅ Safari (from v10+)
- ✅ Edge (Chromium-based)
- ❌ Partial or no support in very old browsers
🔚 Conclusion
The CSS font-stretch property is a subtle yet effective way to tweak your typography’s horizontal proportions, giving you more creative control over text appearance without changing font size or weight.