font-stretch
Definition
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.
Examples
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;
Values
| Value | Description |
|---|---|
normal | The default value. The font is displayed at normal width. |
ultra-condensed | The narrowest possible width for the font. |
extra-condensed | A narrower width than condensed. |
condensed | A narrower width than normal. |
semi-condensed | A narrower width than the default value. |
semi-expanded | A wider width than the default value. |
expanded | A wider width than normal. |
extra-expanded | A wider width than expanded. |
ultra-expanded | The 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | No | Yes | Yes |