Preset

Target Element

Font Stretch Value

Preview Settings

Actions

Live Preview

font-stretch: normal
Typography
The quick brown fox jumps over the lazy dog.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Width Comparison

ultra-condensed50%
Typography
extra-condensed62.5%
Typography
condensed75%
Typography
semi-condensed87.5%
Typography
normal100%
Typography
semi-expanded112.5%
Typography
expanded125%
Typography
extra-expanded150%
Typography
ultra-expanded200%
Typography

Side-by-Side Comparison

Normal (100%)

The quick brown fox jumps over the lazy dog.

Current (normal)

The quick brown fox jumps over the lazy dog.

Generated CSS

body {
  font-stretch: normal;
}

Examples

Condensed Headlines

Use condensed fonts for impactful headlines

.headline {
  font-family: 'Inter', sans-serif;
  font-stretch: condensed;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

Expanded Display Text

Wide tracking for elegant display typography

.display-text {
  font-family: 'Roboto Flex', sans-serif;
  font-stretch: expanded;
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

Variable Font Width

Fine-tuned width using percentage values

.variable-width {
  font-family: 'Source Sans 3', sans-serif;
  font-stretch: 85%; /* Between semi-condensed and normal */
  font-variation-settings: 'wdth' 85;
}

Responsive Font Stretch

Adjust font width based on viewport

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

@media (min-width: 768px) {
  .responsive-text {
    font-stretch: normal;
  }
}

@media (min-width: 1200px) {
  .responsive-text {
    font-stretch: semi-expanded;
  }
}

Space-Saving Labels

Condensed fonts for UI elements with limited space

.compact-label {
  font-family: 'Barlow', sans-serif;
  font-stretch: semi-condensed;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@font-face with Width Range

Define supported width range for variable fonts

@font-face {
  font-family: 'MyVariableFont';
  src: url('font.woff2') format('woff2');
  font-stretch: 75% 125%; /* Supported range */
  font-weight: 100 900;
  font-display: swap;
}

.variable-text {
  font-family: 'MyVariableFont', sans-serif;
  font-stretch: 90%;
}

Font Stretch Keywords

KeywordPercentageDescription
ultra-condensed50%Maximum narrowing of the font
extra-condensed62.5%Very narrow width
condensed75%Narrow width, commonly available
semi-condensed87.5%Slightly narrower than normal
normal100%Default font width
semi-expanded112.5%Slightly wider than normal
expanded125%Wide width
extra-expanded150%Very wide width
ultra-expanded200%Maximum widening of the font

Variable Fonts & font-stretch

Width Axis (wdth)

Variable fonts with width axis allow smooth interpolation between widths using percentage values.

/* Using font-stretch with percentage */
.text {
  font-stretch: 85%;
}

/* Using font-variation-settings */
.text {
  font-variation-settings: 'wdth' 85;
}

@font-face Width Range

Define the supported width range when loading a variable font.

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-stretch: 75% 125%;
}

Font Matching

Browsers select the closest available width when the exact value isn't available.

  • Values < 100%: Narrower faces preferred
  • Values ≥ 100%: Wider faces preferred
  • Exact match: Exact width used

Browser Support

FeatureChromeFirefoxSafariEdge
font-stretch (keywords)1+9+3+12+
font-stretch (percentage)62+61+11+17+
Variable font width axis66+62+11+17+

Best Practices

Use Variable Fonts

For smooth width transitions, use variable fonts with the width (wdth) axis. This provides better control than loading multiple static width variants.

Maintain Readability

Extreme condensed or expanded widths can reduce readability. Use condensed fonts for headlines and normal/semi-condensed for body text.

Combine with Letter Spacing

Adjust letter-spacing when using stretched fonts. Condensed fonts often benefit from slightly positive letter-spacing, while expanded fonts may need negative values.

Test Font Availability

Not all fonts include width variants. Test with fallback fonts to ensure acceptable appearance when the primary font doesn't support the requested width.

Space Efficiency

Use condensed fonts to fit more text in constrained spaces like navigation, tables, or mobile interfaces without reducing font size.

Progressive Enhancement

Design for normal width first, then enhance with font-stretch for browsers and fonts that support it. The layout should work with any width.

Common Use Cases

Impactful Headlines

Condensed fonts create bold, attention-grabbing headlines that take less horizontal space while maintaining visual weight.

Data Tables

Semi-condensed fonts help fit more data in table columns without sacrificing legibility.

Navigation Menus

Condensed text allows more menu items to fit in horizontal navigation bars.

Elegant Display

Expanded fonts with generous letter-spacing create luxurious, high-end typography for branding.

Responsive Typography

Adjust font width at different breakpoints to optimize line lengths and text fitting.

Localization

Use condensed fonts for languages with longer words (German, Finnish) to maintain consistent layouts.

Rate this tool