CSS font-stretch property
CSS is all about presentation. Discover how CSS font-stretch property works to transform plain HTML into a premium user experience in the guide below.
The font-stretch attribute in CSS enables users to choose between a standard, stretched, or compressed style within the font's collection. This attribute adjusts the width of the text to be broader or narrower in relation to the font's default width. It is applicable only to font families that include a width-variant style.
This CSS attribute is specifically designed for fonts that include additional styles such as expanded or condensed faces; for fonts lacking these variations, it will have no impact.
The nine keyword values for determining the font-face width are provided in the syntax below.
Syntax
font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
Property Values
The values for this CSS property are organized in the table below:
| Keyword | Description |
|---|---|
| normal | This is the default value, which does not stretch any font. |
| semi-condensed | It slightly condensed the text characters of the element. This value makes the text narrower thannormalbut not narrower thancondensed. |
| condensed | This value makes the text narrower thansemi-condensedbut not narrower thanextra-condensed. |
| extra-condensed | This value makes the text narrower thancondensedbut not narrower thanultra-condensed. |
| ultra-condensed | This value makes the text extremely narrowed. |
| semi-expanded | It slightly widened the text characters of the element. This value makes the text wider thannormalbut not wider thanexpanded. |
| expanded | This value makes the text wider thansemi-expandedbut not wider thanextra-expanded. |
| extra-expanded | This value makes the text wider thanexpandedbut not wider thanultra-expanded. |
| ultra-expanded | This value makes the text extremely wider. |
Let's understand the above property values by using an example.
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>
<style>
body{
text-align: center;
}
div{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: blue;
}
.normal {
font-stretch: normal;
}
.semi-condensed {
font-stretch: semi-condensed;
}
.condensed {
font-stretch: condensed;
}
.extra-condensed {
font-stretch: extra-condensed;
}
.ultra-condensed {
font-stretch: ultra-condensed;
}
.semi-expanded {
font-stretch: semi-expanded;
}
.expanded {
font-stretch: expanded;
}
.extra-expanded {
font-stretch: extra-expanded;
}
.ultra-expanded {
font-stretch: ultra-expanded;
}
</style>
</head>
<body>
<h1> Example of the font-stretch property </h1>
<div class = "normal">
normal
</div>
<div class = "semi-condensed">
semi-condensed
</div>
<div class = "condensed">
condensed
</div>
<div class = "extra-condensed">
extra-condensed
</div>
<div class = "ultra-condensed">
ultra-condensed
</div>
<div class = "semi-expanded">
semi-expanded
</div>
<div class = "expanded">
expanded
</div>
<div class = "extra-expanded">
extra-expanded
</div>
<div class = "ultra-expanded">
ultra-expanded
</div>
</body>
</html>
Output
