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.

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?

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on