Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the font stretch of an element with CSS
The CSS font-stretch property controls the width of characters in a font, allowing you to make text narrower or wider. This property only works if the font family has condensed or expanded variants available.
Syntax
font-stretch: value;
Possible Values
The font-stretch property accepts the following values:
-
normal- Default width -
ultra-condensed- Most narrow -
extra-condensed- Very narrow -
condensed- Narrow -
semi-condensed- Slightly narrow -
semi-expanded- Slightly wide -
expanded- Wide -
extra-expanded- Very wide -
ultra-expanded- Most wide -
wider- Relative to parent -
narrower- Relative to parent
Example
<!DOCTYPE html>
<html>
<head>
<style>
.condensed {
font-stretch: condensed;
font-family: Arial, sans-serif;
}
.expanded {
font-stretch: expanded;
font-family: Arial, sans-serif;
}
.ultra-expanded {
font-stretch: ultra-expanded;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="condensed">
This text uses condensed font-stretch.
</p>
<p class="expanded">
This text uses expanded font-stretch.
</p>
<p class="ultra-expanded">
This text uses ultra-expanded font-stretch.
</p>
<p>
Note: If the font doesn't appear stretched, your font family may not have condensed or expanded variants available.
</p>
</body>
</html>
Browser Support
The font-stretch property has good browser support in modern browsers, but the effect depends on whether the font family includes the requested width variants. Many system fonts like Arial may not show visible changes.
Key Points
- The property only works with fonts that have multiple width variants
- Google Fonts often provide condensed and expanded versions
- If no variant exists, the browser uses the closest available width
- Values like
widerandnarrowerare relative to the parent element
Conclusion
The font-stretch property allows you to control font width when appropriate variants are available. Choose fonts with multiple width variants for the best results.
Updated on: 2026-03-15T23:18:59+05:30
63 Views
Advertisements