1. css
  2. /properties
  3. /font-stretch



The font-stretch CSS property sets the width of characters in a font. It allows you to select a normal, condensed, or expanded face from a font family, or a face that is somewhere in between, without having to load additional font files.


Set font-stretch to condensed"

font-stretch: condensed;

Set font-stretch to expanded:

font-stretch: expanded;

Set font-stretch to ultra-condensed:

font-stretch: ultra-condensed;


normalThe default value. The font is displayed at normal width.
ultra-condensedThe narrowest possible width for the font.
extra-condensedA narrower width than condensed.
condensedA narrower width than normal.
semi-condensedA narrower width than the default value.
semi-expandedA wider width than the default value.
expandedA wider width than normal.
extra-expandedA wider width than expanded.
ultra-expandedThe widest possible width for the font.

Best Practices

  • Use font-stretch sparingly, as it can make text difficult to read if overused.
  • When using font-stretch, choose values that are consistent with the overall design and context of your website or application.
  • Avoid stretching or compressing fonts too much, as it can distort the letterforms and make the text harder to read.
  • Test your font-stretch choices on different devices and screen sizes to ensure that the text remains legible.
  • Consider using different fonts or font weights instead of font-stretch to achieve the desired effect, as this can be more reliable.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera