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?

Controls width of text from ultra-condensed to ultra-expanded if the font supports variations.