What Is Font Stretch in CSS?
The font-stretch CSS property selects a normal, condensed, or expanded face from a font family. This property operates by selecting among the available width variants that a font family may provide, allowing you to make text narrower or wider than the standard typeface. Unlike properties that stretch or distort fonts artificially, font-stretch works with the actual width variants designed by type designers, ensuring that character proportions remain optically correct and readable.
When font designers create typefaces, they often produce multiple versions of each font with different horizontal proportions. These variations range from extremely narrow (condensed) to exceptionally wide (expanded), giving designers flexibility in how they present text across different contexts and design requirements.
At its core, font-stretch answers a simple question: which width variant of this font should the browser render? The property accepts either keyword values that describe relative width (such as "condensed" or "expanded") or percentage values that specify exact width multipliers (from 50% to 200%). When you apply font-stretch to an element, the browser examines the available width variants within the specified font family and selects the one that best matches your requested value.
Unlike transform: scaleX() which visually stretches any element horizontally regardless of the font, font-stretch works with the actual width variants designed into a font family. This distinction matters because artificially scaled text produces awkward letter spacing and poor readability, while properly designed width variants maintain the typographic integrity intended by the font designer.
The CSS Fonts Module Level 4 specification has renamed the font-stretch property to font-width, reflecting a more accurate description of what the property controls. However, font-stretch has been retained as a legacy alias, meaning existing code will continue to work in browsers for the foreseeable future. For more details on CSS typography standards, consult the W3C CSS Fonts specification.
To learn more about CSS properties and web typography techniques, explore our comprehensive web development services.
Keyword Values for Font Stretch
CSS provides nine predefined keyword values for font-stretch, arranged along a continuum from narrowest to widest. These keywords offer a convenient way to specify relative width without needing to understand the exact percentage mappings or the specific width variants available in a particular font. For complete technical documentation, see the MDN Web Docs font-stretch reference.
The keyword values, from most narrow to most wide, are: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded. The normal keyword represents the standard width of the font as designed, which serves as the baseline against which all other widths are measured. When a font doesn't provide variants for all these widths, browsers select the closest available option, falling back to progressively wider or narrower variants as needed.
Using Keywords in Practice
Applying keyword values to your typography is straightforward, but achieving consistent results requires understanding how different fonts respond to font-stretch requests. For space-constrained UI elements like dashboards, using font-stretch: condensed or font-stretch: ultra-condensed for data labels and navigation elements helps fit more content on screen without reducing font size to unreadable levels. Conversely, for display typography like hero sections, font-stretch: expanded creates visual impact and draws attention to key messages.
When combining font-stretch with other typographic properties like font-weight and font-style, the order of declaration doesn't affect the final rendered result--these properties are independent and combine additively. A font like Inter includes multiple width variants across the condensed-to-expanded spectrum, making it reliable for consistent font-stretch effects. Many system fonts, however, only include the normal width variant, meaning font-stretch will have no visible effect when applied to those fonts.
/* Condensed text for space-constrained UI elements */
.data-label {
font-family: 'Inter', sans-serif;
font-stretch: condensed;
}
/* Expanded text for display headings */
.hero-heading {
font-family: 'Roboto', sans-serif;
font-stretch: expanded;
}
/* Normal width for body copy */
.content-body {
font-family: 'Open Sans', sans-serif;
font-stretch: normal;
}
For modern web applications, proper typography implementation is essential. Our web development team can help you implement sophisticated typographic systems using CSS properties like font-stretch.
| Keyword | Percentage |
|---|---|
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| normal | 100% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
Percentage Values for Precise Control
Beyond keyword values, CSS allows you to specify font-stretch using percentage values between 50% and 200%. Percentage values provide finer control than keywords, enabling you to request exact width multipliers or to use values that fall between the predefined keyword steps. This precision becomes particularly valuable when working with variable fonts that support continuous width ranges.
The percentage system uses 100% as the baseline representing the normal width of the font, with lower percentages creating narrower variants and higher percentages creating wider ones. A value of 75% requests a moderately condensed width, while 125% requests a moderately expanded width. Negative percentage values are not permitted for font-stretch, reflecting the physical impossibility of negative width in typography.
Keyword to Percentage Mapping
Understanding how the predefined keywords map to percentage values helps you transition smoothly between keyword and percentage notation. The mapping reveals that keyword steps are not evenly distributed across the percentage range--condensed widths cluster more closely near 100% while expanded widths spread out more widely. This reflects the typographic reality that condensed variants typically differ less dramatically from the base font than expanded variants do, as documented in the MDN font-stretch documentation.
Condensed Widths for Space-Efficient Design
Condensed width variants prove invaluable in scenarios where horizontal space is at a premium. Data tables, navigation menus, sidebars, and mobile layouts frequently benefit from condensed typography, allowing content to remain legible while maximizing screen real estate utilization. The condensed, extra-condensed, and ultra-condensed keywords provide progressively narrower options.
When working with condensed widths, readability becomes a critical consideration. Extremely condensed fonts can become difficult to read at small sizes or in long passages of text, making them better suited for headlines, labels, and short text strings rather than body content. Reserve semi-condensed or condensed for navigation elements and data displays where users scan rather than read extended text, while keeping normal or wider widths for paragraphs and detailed content.
/* Using percentages for precise width control */
.sidebar-heading {
font-stretch: 87.5%; /* Equivalent to semi-condensed */
}
.pull-quote {
font-stretch: 112.5%; /* Equivalent to semi-expanded */
}
/* Extreme widths for special effects */
.decorative-text {
font-stretch: 150%; /* Extra-expanded effect */
}
Font Face Selection and Browser Behavior
When you apply font-stretch to text, the browser performs a sophisticated selection process to determine which width variant to render. This process begins with examining which width variants are actually available in the specified font family. If the font includes multiple width faces, the browser compares your requested width against the available options and selects the closest match. The complete selection algorithm is detailed in the MDN font-stretch reference.
The selection algorithm follows predictable rules: for values less than 100%, the browser looks for the closest available width that is narrower than normal, while for values at or above 100%, it seeks the closest available width that is normal or wider. If no exact match exists, the browser chooses the nearest available variant in the appropriate direction.
The @font-face Descriptor
The font-stretch descriptor within @font-face rules plays a crucial role in defining which width variants a particular font file represents. When you define custom fonts using @font-face, the font-stretch descriptor tells the browser which width variant the font file contains, enabling proper selection when you later use font-stretch in your stylesheet. Without this descriptor, the browser assumes the font represents the normal width. This approach is covered in the MDN Web Docs font-stretch guide.
For variable fonts, the descriptor can specify a range using two values (such as font-stretch: 50% 200%), indicating that this single font file supports the entire width spectrum through interpolation. This capability makes variable fonts particularly powerful for responsive typography, as you can transition smoothly between widths rather than jumping between discrete variants.
@font-face {
font-family: 'CustomType';
src: url('/fonts/custom-type-condensed.woff2') format('woff2');
font-weight: 400;
font-stretch: 75%; /* This file contains condensed variant */
}
@font-face {
font-family: 'CustomType';
src: url('/fonts/custom-type-regular.woff2') format('woff2');
font-weight: 400;
font-stretch: 100%; /* This file contains regular variant */
}
@font-face {
font-family: 'CustomType';
src: url('/fonts/custom-type-expanded.woff2') format('woff2');
font-weight: 400;
font-stretch: 125%; /* This file contains expanded variant */
}
Variable Fonts and Continuous Width Control
Variable fonts represent a significant advancement in web typography, offering continuous ranges of variation for properties like weight, width, slant, and optical size within a single font file. When using a variable font with width axis support, font-stretch can take any value within the font's defined range rather than jumping between discrete width steps. This enables smooth animations, responsive typography that adapts fluidly to viewport changes, and unprecedented precision in typographic design. The MDN font-stretch documentation provides comprehensive guidance on variable font implementation.
With traditional multi-weight fonts, animating from "normal" to "condensed" causes text to snap between width variants, potentially causing visible jumps. With a variable font, the same animation smoothly interpolates all intermediate width values, creating a fluid visual transition. This smoothness matters for interactive experiences where typography responds to user actions or scroll position.
Popular Variable Fonts with Width Axes
Several well-known variable fonts include width axes that work with font-stretch. Inter, one of the most popular open-source sans-serif fonts, includes a width axis ranging from 50% to 200%, making it an excellent choice for projects needing flexible typographic width control. Roboto Flex offers an even broader range with additional axes for weight, optical size, and grade, providing extraordinary typographic flexibility.
When selecting variable fonts, consider factors beyond just width axis availability. Font file size matters for performance, and some variable fonts include multiple variation axes that increase file size. The quality of width interpolation varies between fonts--well-designed variable fonts maintain proper letter spacing across their entire width range.
/* Smooth width animation with variable font */
.responsive-text {
font-family: 'Inter var', sans-serif;
font-stretch: 100%;
transition: font-stretch 0.3s ease;
}
.responsive-text:hover {
font-stretch: 87.5%; /* Smooth transition to semi-condensed */
}
/* Responsive typography using viewport units */
.viewport-adaptive {
font-family: 'Roboto Flex', sans-serif;
font-stretch: calc(100% - (100vw - 320px) * 0.05);
}
To explore more advanced CSS techniques and typography implementation, learn about our web development services.
Browser Compatibility and Fallback Strategies
Browser support for font-stretch has been solid across modern browsers for several years. All current versions of Chrome, Firefox, Safari, and Edge support font-stretch with keyword and percentage values, making it a reliable choice for production websites. However, older browsers lack support, necessitating fallback strategies for projects requiring broad compatibility. Check current browser support on the MDN font-stretch page.
The most robust fallback approach involves accepting that font-stretch will simply be ignored in unsupported browsers, with text displaying at the normal width. For most use cases, this graceful degradation is acceptable--users of older browsers see perfectly readable text at the normal width, while users of modern browsers enjoy enhanced typographic options. You can verify browser support using feature detection in CSS via @supports.
Testing Font Stretch Implementation
Testing font-stretch implementation requires verifying both that the property works correctly and that your chosen fonts support the requested widths. Browser developer tools provide the most direct way to inspect which width variant is being used--computed styles will show the actual font face being used (such as "Inter Condensed"), confirming correct variant selection.
Automated testing can verify that font-stretch declarations are being processed without throwing errors, though visual regression testing provides the most comprehensive verification. Tools like Percy or Chromatic can capture screenshots of text elements across different browsers and viewport sizes, revealing whether font-stretch produces expected visual results.
/* Feature detection for font-stretch support */
.heading {
font-family: 'Inter', sans-serif;
font-weight: 600;
}
@supports (font-stretch: condensed) {
.heading {
font-stretch: condensed;
}
}
Best Practices for Font Stretch in Modern Web Development
Effective use of font-stretch requires balancing typographic goals with practical considerations around font availability, performance, and accessibility. Rather than applying font-stretch universally, reserve it for situations where width variations genuinely improve the design or user experience. Common appropriate uses include space-constrained UI elements that benefit from condensed widths, display typography where expanded widths create visual impact, and responsive layouts that adapt typography to different viewport sizes.
Choosing fonts with comprehensive width variant support ensures that font-stretch produces consistent results. Inter, Roboto, and many other modern sans-serif fonts include the full spectrum of width variants. When evaluating fonts, check whether width variants are included (for traditional multi-file fonts) or whether the font includes a width axis (for variable fonts).
Accessibility Considerations
Accessibility considerations should inform your font-stretch usage, particularly for body text and extended reading content. While condensed widths can save space in UI contexts, they may reduce readability for users with visual impairments, especially at small sizes or in long passages. Generally reserve condensed widths for headlines, labels, navigation, and other short-form content where scanning speed matters more than careful reading.
Font Stretch in Design Systems
Integrating font-stretch into design systems requires thoughtful planning to ensure consistent, intentional usage. Rather than allowing arbitrary font-stretch values throughout your codebase, define a limited set of approved widths (perhaps just normal, condensed, and expanded) and apply them consistently according to component type. Design tokens offer an elegant mechanism for managing these values:
/* Design token approach */
:root {
/* Width tokens */
--font-width-condensed: 87.5%;
--font-width-normal: 100%;
--font-width-expanded: 112.5%;
/* Component tokens */
--heading-font-family: 'Inter', sans-serif;
--heading-font-width: var(--font-width-normal);
--sidebar-font-width: var(--font-width-condensed);
}
/* Component styles using tokens */
.heading {
font-family: var(--heading-font-family);
font-stretch: var(--heading-font-width);
}
For expert guidance on implementing CSS typography in your projects, our web development services team can help you build robust, accessible typographic systems.
Common Use Cases and Examples
Space Optimization
In data-dense interfaces like dashboards and analytics platforms, every pixel of horizontal space matters. Using condensed widths for column headers, data labels, and navigation elements allows more information to fit within the viewport, reducing the need for horizontal scrolling. The key is applying condensed widths selectively--primarily to content that users scan rather than read carefully.
Visual Hierarchy Applications
Expanded widths draw attention to important content while condensed widths subordinate less critical information. A hero section might use expanded headings to create immediate visual impact, while body text maintains normal width for optimal readability. These hierarchical width variations work alongside font size, weight, and color to create comprehensive visual organization.
Responsive Typography with Font Stretch
Responsive typography adapts to different viewport sizes, and font-stretch provides another dimension of adaptation beyond font size and line length. At narrow mobile viewports, condensed widths help headings fit within limited horizontal space, while at wide desktop viewports, expanded widths create dramatic display effects. Combining font-stretch with CSS container queries enables typography to adapt to the containing element's size rather than just the viewport.
/* Responsive font stretch using media queries */
.responsive-heading {
font-family: 'Inter', sans-serif;
font-stretch: normal;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 640px) {
.responsive-heading {
font-stretch: condensed;
}
}
@media (min-width: 1200px) {
.responsive-heading {
font-stretch: expanded;
}
}
Conclusion
The font-stretch CSS property provides powerful control over the horizontal width of typography, enabling designers and developers to create sophisticated typographic systems that balance space efficiency, visual hierarchy, and readability. From condensed widths that maximize space in data-dense interfaces to expanded widths that create dramatic display effects, font-stretch offers a versatile tool for achieving precise typographic goals.
As you incorporate font-stretch into your projects, remember that its effectiveness depends on font selection--choose fonts that include the width variants you need, and test thoroughly to ensure your intended effects appear correctly. The evolution toward the renamed font-width property signals continued standardization of font width control, making current knowledge of font-stretch a valuable investment in your development skills.
For modern web development with frameworks like Next.js, font-stretch integrates seamlessly with component-based styling approaches and CSS-in-JS solutions. When combined with variable fonts, it enables smooth, performant transitions that enhance interactive experiences without sacrificing performance. Whether you're building marketing websites, web applications, or any project where typography matters, font-stretch deserves a place in your CSS toolkit.
To learn more about modern web development techniques and typography best practices, explore our web development services or contact our team for a consultation on your project.
Sources
- MDN Web Docs - font-stretch - Official CSS reference with complete technical documentation
- W3Schools - CSS font-stretch property - Educational resource with practical examples
- CSS Fonts Module Level 4 - W3C Specification - Official specification documenting the font-width property