font-stretch property
[This documentation is preliminary and is subject to change.]
Sets or retrieves a value that indicates a normal, condensed, or expanded face of a font family.
![]() |
Syntax
font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Property values
normal-
Default. Indicates the face is neither condensed nor expanded.
wider-
Indicates a wider value relative to the width of the parent element.
narrower-
Indicates a narrower value relative to the width of the parent element.
ultra-condensed-
Indicates the most condensed font face.
extra-condensed-
Indicates the second most condensed font face.
condensed-
Indicates a condensed font face.
semi-condensed-
Indicates a slightly condensed font face.
semi-expanded-
Indicates a slightly expanded font face.
expanded-
Indicates an expanded font face.
extra-expanded-
Indicates the second most expanded font face.
ultra-expanded-
Indicates the most expanded font face.
inherit-
Indicates that the property takes the same computed value as the property for the element's parent.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
- Scalable Vector Graphics: Text, Section 10.10
Remarks
Absolute keyword values have the following order, from narrowest to widest:
- Ultra condensed
- Extra condensed
- Condensed
- Semi condensed
- Normal
- Semi expanded
- Expanded
- Extra expanded
- Ultra expanded
The scale is relative, so a font face that has a font-stretch value higher in the previous list above should never appear wider. When a font face does not exist for a given width, normal or condensed values map to a narrower font face. Otherwise, they map to a wider font face. Conversely, expanded values map to a wider font face; otherwise, a narrower face.
See also
Build date: 3/13/2012
