files/en-us/web/css/reference/properties/font-stretch/index.md
[!NOTE] The
font-stretchproperty was renamed to {{cssxref("font-width")}} in the CSS Fonts specification. To preserve compatibility, the specification retainsfont-stretchas a legacy alias for thefont-widthproperty.
The font-stretch CSS property selects a normal, condensed, or expanded face from a font.
{{InteractiveExample("CSS Demo: font-stretch")}}
font-stretch: condensed;
font-stretch: expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 150%;
<section class="default-example" id="default-example">
<p class="transition-all" id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
font-family: "League";
font-style: normal;
font-weight: normal;
}
section {
font-size: 1.2em;
font-family: "League", sans-serif;
}
/* 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 keyword or {{cssxref("<percentage>")}} value.
normal
semi-condensed, condensed, extra-condensed, ultra-condensed
ultra-condensed being the most condensed.semi-expanded, expanded, extra-expanded, ultra-expanded
ultra-expanded being the most expanded.<percentage>
The table below shows the mapping between the 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% |
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.
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 condensed face, and values greater than or equal to 100% map to an expanded face.
The table below demonstrates the effect of setting 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-face {
font-family: "Anek Malayalam";
src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
format("woff2");
}
body {
font-family: system-ui;
}
table {
border-collapse: collapse;
width: 100%;
}
tbody th {
text-align: right;
}
th,
td {
padding: 0.25rem;
font-weight: normal;
text-align: center;
}
td {
border: solid;
border-width: 1px;
font-size: 5rem;
}
.inconsolata {
font-family: "Inconsolata", sans-serif;
}
.anek-malayalam {
font-family: "Anek Malayalam", sans-serif;
}
td:nth-child(2) {
font-stretch: 50%;
}
td:nth-child(3) {
font-stretch: 62.5%;
}
td:nth-child(4) {
font-stretch: 75%;
}
td:nth-child(5) {
font-stretch: 87.5%;
}
td:nth-child(6) {
font-stretch: 100%;
}
td:nth-child(7) {
font-stretch: 112.5%;
}
td:nth-child(8) {
font-stretch: 125%;
}
td:nth-child(9) {
font-stretch: 150%;
}
td:nth-child(10) {
font-stretch: 200%;
}
<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 class="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 class="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>
{{EmbedLiveSample('Font face selection', "100%", "250px")}}
{{cssinfo}}
{{csssyntax("font-stretch")}}
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
@font-face {
src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
font-family: "LeagueMonoVariable";
font-style: normal;
}
p {
font:
1.5rem "LeagueMonoVariable",
sans-serif;
}
.condensed {
font-stretch: 50%;
}
.normal {
font-stretch: 100%;
}
.expanded {
font-stretch: 200%;
}
{{EmbedLiveSample("Setting font stretch percentages", "100%", 200)}}
{{Specifications}}
{{Compat}}
font-stretch