CSS font-stretch Property

What You’ll Learn

The font-stretch property selects a condensed, normal, or expanded width from a font so you can fine-tune how wide text appears horizontally.

Introduction

The font-stretch property in CSS allows you to select a normal, condensed, or expanded face from a font. It enables finer control over the font appearance by stretching or compressing the text horizontally.

This property is particularly useful when you want to achieve a specific look or ensure text fits within a designated space without changing its font size.

Definition and Usage

Unlike changing font-size, font-stretch adjusts character width. The browser picks the closest available width variant in the font family. Variable fonts can interpolate smoothly between condensed and expanded widths.

📝 Syntax

The syntax for the font-stretch property is straightforward. You can specify keyword values to achieve the desired effect:

element {
  font-stretch: value;
}

Basic Example

.headline {
  font-stretch: condensed;
}

Default Value

The default value of the font-stretch property is normal, which indicates no stretching or condensing of the font.

Syntax Rules

• Accepts keyword values from ultra-condensed through ultra-expanded.
• Also accepts percentage values (typically 50% to 200%) in modern browsers.
• The property is not inherited by default.
• Only has a visible effect when the font provides matching width variants.
• Works with the font shorthand when included in the declaration.

💎 Property Values

The font-stretch property accepts the following keyword values:

Percentage values

Percentages map to width on a scale where 100% equals normal. Values below 100% condense; values above 100% expand. Example: font-stretch: 75%;

Examples Gallery

Apply different font-stretch values from ultra-condensed to ultra-expanded, then explore simpler comparisons, narrow layouts, and percentage widths.

.ultra-condensed { font-stretch: ultra-condensed; }
.condensed { font-stretch: condensed; }
.normal { font-stretch: normal; }
.expanded { font-stretch: expanded; }
.ultra-expanded { font-stretch: ultra-expanded; }

.narrow { font-stretch: condensed; }
.regular { font-stretch: normal; }
.wide { font-stretch: expanded; }

.sidebar-label {
  font-size: 0.875rem;
  font-stretch: semi-condensed;
  max-width: 8rem;
}

.width-75 { font-stretch: 75%; }
.width-100 { font-stretch: 100%; }
.width-125 { font-stretch: 125%; }

♿ Accessibility

• Do not over-condense body text — very narrow widths can hurt readability for long paragraphs.
• Prefer real font variants over transform: scaleX(), which distorts letterforms and can confuse screen magnifiers.
• Keep sufficient contrast and size — font-stretch changes width, not height; still set a readable font-size.
• Test with your actual web font to confirm condensed styles remain legible at small sizes.
• Avoid relying on stretch alone to fix overflow; consider wrapping, truncation, or layout changes too.

💡 Best Practices