The **`font-stretch`** property in #key# CSS: Cascade Style Sheets #key# is used to select from the condensed, normal, and expanded typefaces of the font family.

> This property has no effect if the selected font does not offer expanded or condensed typefaces.
 
#           
#  Syntax

---
```css
font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
```
---

#          
## Property values

- `normal`: The default value that is used to specify that there is no font stretching.

- `ultra-condensed`: Makes the text as narrow as it can get.

- `extra-condensed`: Makes the text narrower than `condensed` but not as narrow as `ultra-condensed`. 

- `condensed`: Makes the text narrower than `semi-condensed`, but not as narrow as `extra-condensed`. 

- `semi-condensed`: Makes the text narrower than `normal`, but not as narrow as `condensed`. 

- `semi-expanded`: Makes the text wider than normal, but not as wide as `expanded`.

- `expanded`: Makes the text wider than `semi-expanded`, but not as wide as `extra-expanded`.

- `extra-expanded`: Makes the text wider than `expanded`, but not as wide as `ultra-expanded`.

- `ultra-expanded`: Makes the text as wide as it can get. 

- `initial`: Sets the `font-stretch` property to its default value.

- `inherit`: Inherits the property from its parent value.

##
## Code

The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `font-stretch` property is as follows:

<div class = "normal">  Normal  </div>  
  
<div class = "semi-condensed">  Semi-condensed  </div>  

<div class = "condensed">  Condensed  </div>  
  
<div class = "extra-condensed">  Extra-condensed  </div>  

body
{  
    text-align: center;  
}  
div
{  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 20px;  
    color: rgb(0, 0, 0);  
}  
.normal 
{  
    font-stretch: normal;  
}  
.semi-condensed 
{  
    font-stretch: semi-condensed;  
}  
.condensed 
{  
    font-stretch: condensed;  
}  
.extra-condensed 
{  
    font-stretch: extra-condensed;  
}  

codemirror

In this example, we write some of the `font-stretch` properties and apply the corresponding property to them to show how the font will look in each property. We can also set the `font-stretch` property values according to our own choice. 

What is the CSS font-stretch property?

The font-stretch property in CSSCascade Style Sheets is used to select from the condensed, normal, and expanded typefaces of the font family.  This property has no effect if the selected font does not offer expanded or condensed typefaces.   Syntax  font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;    Property values   normal: The default value that is used to specify that there is no font stretching.   ultra-condensed: Makes the text as narrow as it can get.   extra-condensed: Makes the text narrower than condensed but not as narrow as ultra-condensed.   condensed: Makes the text narrower than semi-condensed, but not as narrow as extra-condensed.   semi-condensed: Makes the text narrower than normal, but not as narrow as condensed.   semi-expanded: Makes the text wider than normal, but not as wide as expanded.   expanded: Makes the text wider than semi-expanded, but not as wide as extra-expanded.   extra-expanded: Makes the text wider than expanded, but not as wide as ultra-expanded.   ultra-expanded: Makes the text as wide as it can get.   initial: Sets the font-stretch property to its default value.   inherit: Inherits the property from its parent value.    Code The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the font-stretch property is as follows: 