font-stretch
============

The **`font-stretch`** CSS property selects a normal, condensed, or expanded face from a font.

Try it
------

Syntax
------


```css
/\* <font-stretch-css3> keyword values \*/
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/\* Percentage values \*/
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/\* Global values \*/
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;
```


This property may be specified as a single `<font-stretch-css3>` keyword value or a single `<percentage>` value.

### Values

`normal`

Specifies a normal font face.

`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`

Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed.

`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`

Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded.

`<percentage>`

A `<percentage>` value between 50% and 200% (inclusive). Negative values are not allowed for this property.

### Keyword to numeric mapping

The table below shows the mapping between the `<font-stretch-css3>` keyword values and numeric percentages:

| Keyword | Percentage |
| --- | --- |
| `ultra-condensed` | 50% |
| `extra-condensed` | 62.5% |
| `condensed` | 75% |
| `semi-condensed` | 87.5% |
| `normal` | 100% |
| `semi-expanded` | 112.5% |
| `expanded` | 125% |
| `extra-expanded` | 150% |
| `ultra-expanded` | 200% |

Description
-----------

Some font families offer additional faces in which the characters are narrower than the normal face (*condensed* faces) or wider than the normal face (*expanded* faces).

You can use `font-stretch` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.

### Font face selection

The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

The table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts:
```

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
  font-stretch: 50% 200%;
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs\_mZAJUZWWkhke0nYa-f6\_\_Azq3-gP1W7db9\_.woff2")
    format("woff2");
  font-stretch: 75% 125%;
}

td {
  border: solid;
  border-width: 1px;
}

#inconsolata td {
  font:
    90px Inconsolata,
    sans-serif;
}
#anek-malayalam td {
  font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
  font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
  font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
  font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
  font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
  font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
  font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
  font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
  font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
  font-stretch: 200%;
}
```


```
<table class="standard-table">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr id="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr id="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>
```


* Anek Malayalam is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font.
* Inconsolata is a variable font that offers a continuous range of widths from 50% to 200%.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | a font stretch |

Formal syntax
-------------
```

font-stretch =   
  normal              |  
  <percentage [0,∞]>  |  
  ultra-condensed     |  
  extra-condensed     |  
  condensed           |  
  semi-condensed      |  
  semi-expanded       |  
  expanded            |  
  extra-expanded      |  
  ultra-expanded        
  
```

Examples
--------

### Setting font stretch percentages

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-stretch-prop |

**Note:** The `font-stretch` property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-style`
* `font-weight`
* Fundamental text and font styling
* CSS fonts module