The font-stretch CSS property allows you to make your text narrower (condensed) or wider (expanded).
These types of fonts are also called condensed or expanded fonts.
- Condensed fonts have characters with narrow stroke-widths. They also have much narrower space between characters (letter-spacing/leading) compared to regular fonts.
- Expanded fonts have characters that have wider stroke-width than normal fonts’ in proportion to their height.
The CSS font-stretch property has the following values (font face varieties):
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
Code examples
h1 {
font-family: sans-serif;
font-stretch: expanded;
}
h2 {
font-family: sans-serif;
font-stretch: condensed;
}Important: most typefaces/font families don’t come equipped with these condensed or expanded font faces.
So before you use the font-stretch property in your CSS stylesheet, make sure that the font family you’re using contains the specific condensed or expanded font face that you want to use.
Note: if you use the font-stretch property even if your font-family of choice doesn’t provide any condensed or expanded font faces, then nothing will happen. You won’t get an ugly faux (computer-generated) font, unlike faux bold or faux italics.
However, browser technologies often change so why risk it?