CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS font-stretch property

The font-stretch property in CSS allows us to select a normal, expanded, or condensed face from the font's family. This property sets the text wider or narrower compare to the default width of the font. It will not work on any font but only works on the font-family that has a width-variant face.

This CSS property only works for the fonts with additional faces like expanded and condensed faces; otherwise, it will be affectless for the fonts that don't have condensed or expanded faces.

The nine keyword values for choosing the width of the font-face are given in the following syntax.

Syntax

font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Property Values

The property values of this CSS property are tabulated as follows:

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 than normal but not narrower than condensed.
condensed	This value makes the text narrower than semi-condensed but not narrower than extra-condensed.
extra-condensed	This value makes the text narrower than condensed but not narrower than ultra-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 than normal but not wider than expanded.
expanded	This value makes the text wider than semi-expanded but not wider than extra-expanded.
extra-expanded	This value makes the text wider than expanded but not wider than ultra-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>

Test it Now

Output