font-stretch

Utilities for selecting the width of a font face.

Examples

Basic example

Use utilities like font-stretch-condensed and font-stretch-expanded to set the width of a font face:

This only applies to fonts that have multiple width variations available, otherwise the browser selects the closest match.

Using percentages

Use font-stretch-<percentage> utilities like font-stretch-50% and font-stretch-125% to set the width of a font face using a percentage:

Using a custom value

Responsive design