Your Search Results

    font-stretch

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

    The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.

    This property does not change the geometry of an arbitrary font by stretching or shrinking it. Like font-feature-settings or font-variant, it is merely a mean to choose the most appropriate face of the font, if this one offers several of them.

    Note: If the font provides several faces, the one fitting the best with the value of the font-stretch property is chosen. E.g. On Mac OS, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrinked, characters: Condensed. Browsers supporting font-stretch will use the condensed faces for the value ultra-condensed to semi-condensed and the normal faces for the other (normal and all expanded values).

    Font-stretch results with a font having 2 faces, one condensed and one normal.

    If the font has no condensed or expanded faces, like the default "Times New Roman" on Mac OS, font-stretch will not have any visible effect as the only suitable face will be used in all cases.:
    Font-stretch results with a font having 1 single face.

    Syntax

    Formal syntax: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
    
    font-stretch: ultra-condensed
    font-stretch: extra-condensed
    font-stretch: condensed
    font-stretch: semi-condensed
    font-stretch: normal
    font-stretch: semi-expanded
    font-stretch: expanded
    font-stretch: extra-expanded
    font-stretch: ultra-expanded
    
    font-stretch: inherit
    

    Values

    normal
    Specifies a normal font face.
    semi-condensed, condensed, extra-condensed, ultra-condensed
    Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
    semi-expanded, expanded, extra-expanded, ultra-expanded
    Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.

    Interpolation

    Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

    Examples

    h1 { font-stretch: extra-expanded }
    p  { font-stretch: condensed }
    

    Specifications

    Specification Status Comment
    CSS Fonts Module Level 3 Candidate Recommendation  

    The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support Not supported 9.0 (9.0) 9.0 Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 9.0 (9.0) ? Not supported Not supported

    See also

    Attachments

    File Size Date Attached by
    Font-stretch with a 2-face font
    Font-stretch results with a font having 2 faces, one condensed and one normal.
    6040 bytes 2012-11-23 01:31:44 teoli
    Font-stretch with a 1-face font
    Font-stretch results with a font having 1 single face.
    5148 bytes 2012-11-23 01:32:16 teoli
    Characters from the same font but with different face
    The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.
    6802 bytes 2012-11-23 02:02:30 teoli

    Document Tags and Contributors

    Last updated by: kscarfone,
    Hide Sidebar