font-stretch

  • Revision slug: CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 330781
  • 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. Like {{cssxref("font-feature-settings")}} or {{cssxref("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 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. Like {{cssxref("font-feature-settings")}} or {{cssxref("font-variant")}}, it is merely a mean to choose 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, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrinked, characters: Condensed. 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