font-stretch
Note: The font-stretch
property has now been renamed to font-width
in the specifications. The name font-stretch
has been kept as an alias for the font-width
property.
The new name font-width
is not yet supported by any browsers.
The font-stretch
CSS property selects a normal, condensed, or expanded face from a font.
Try it
Syntax
/* <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:
- 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
Examples
Setting font stretch percentages
<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("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
font-family: "LeagueMonoVariable";
font-style: normal;
font-stretch: 1% 500%; /* Required by Chrome */
}
p {
font:
1.5rem "LeagueMonoVariable",
sans-serif;
}
.condensed {
font-stretch: 50%;
}
.normal {
font-stretch: 100%;
}
.expanded {
font-stretch: 200%;
}
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-stretch-prop |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.