CSS font-stretch

The font-stretch property in CSS allows you to set the width of a font. This property is used to either narrow or widen the text, without changing its overall font size.

The values for the font-stretch property can be set using keywords like ultra-condensed, extra-condensed, condensed, semi-condenced, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded. You can also use numeric values to set the stretch in percentage.

Let's see an example to better understand how the font-stretch property works:

Result:


    Expanded text

In the example above, we set the font-stretch property to expanded for the text inside a <div> element. This will stretch the text horizontally, making it wider than normal.

Now, let's see another example using a numeric value for the font-stretch property:

Result:


    Widened text

In this example, we set the font-stretch property to 120% for the text inside a <div> element. This will widen the text by 20% compared to its normal width.

Experiment with different values for the font-stretch property to see how it affects the width of the text in your designs.