How to use the CSS font-stretch Property

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.