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"
Set font-stretch to expanded:
Set font-stretch to ultra-condensed:
|The default value. The font is displayed at normal width.|
|The narrowest possible width for the font.|
|A narrower width than condensed.|
|A narrower width than normal.|
|A narrower width than the default value.|
|A wider width than the default value.|
|A wider width than normal.|
|A wider width than expanded.|
|The widest possible width for the font.|
- 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.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|