font-stretch

  • Revision slug: CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 330777
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

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. It is merely used in choosing 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, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrinked, characters: Condensed, CondensedBold, … 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 one 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.

  • {{ Xref_cssinitial() }} {{ Cssxref("normal") }}
  • Applies to all elements
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} specified value

Syntax

Formal syntax: ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | 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

Examples

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.
h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }} {{ Spec2('CSS3 Fonts') }}  

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

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("9.0") }} 9.0 {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("9.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }}

See also

  • Font-related properties: {{ CSS_Reference:Fonts() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>font-stretch</code> CSS property selects a normal, condensed, or expanded face from a font.</p>
<p><img alt="The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'." src="/files/4321/Character_in_same_font_but_one_condensed.png" style="width: 188px; height: 92px; display: block; margin: auto;" /></p>
<p>This property does not change the geometry of an arbitrary font by stretching or shrinking it. It is merely used in choosing the most appropriate <em>face</em> of the font, if this one offers several of them.</p>
<div class="note cleared">
  <p><strong>Note:</strong><strong> </strong>If the font provides several faces, the one fitting the best with the value of the <code>font-stretch</code> property is chosen. E.g. On Mac OS, in addition to the more common Bold, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrinked, characters: Condensed, CondensedBold, … Browsers supporting <code>font-stretch</code> will use the condensed faces for the value <code>ultra-condensed</code> to <code>semi-condensed</code> and the normal faces for the other (<code>normal</code> and all expanded values).</p>
  <img alt="Font-stretch results with a font having 2 faces, one condensed and one normal." src="/files/4317/Font_stretch_with_2_faces.png" style="width: 292px; height: 58px; margin:auto; display:block;" />
  <p>If the font has one no condensed or expanded faces, like the default "Times New Roman" on Mac OS, <code>font-stretch</code> will not have any visible effect as the only suitable face will be used in all cases.:<br />
    <img alt="Font-stretch results with a font having 1 single face." src="/files/4319/Font_stretch_with_1_face.png" style="width: 258px; height: 58px;margin: auto;display:block;" /></p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("normal") }}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> specified value</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax: ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | semi-expanded | expanded | extra-expanded | ultra-expanded
</pre>
<pre>
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
</pre>
<h3 id="Values">Values</h3>
<h2 id="Examples">Examples</h2>
<dl>
  <dt>
    <code>normal</code></dt>
  <dd>
    Specifies a normal font face.</dd>
  <dt>
    <code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
  <dd>
    Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.</dd>
  <dt>
    <code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
  <dd>
    Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.</dd>
</dl>
<pre>
h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
      <td>{{ Spec2('CSS3 Fonts') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>The CSS property <code>font-stretch</code> 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.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("9.0") }}</td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("9.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>Font-related properties: {{ CSS_Reference:Fonts() }}</li>
</ul>
Revert to this revision