font-stretch

  • Revision slug: Web/CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 494189
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Updated tags

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable()}}

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 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.

{{cssbox("font-stretch")}}

Syntax

Formal syntax: {{csssyntax("font-stretch")}}
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
{{ 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>
<p>{{ SeeCompatTable()}}</p>
<h2 id="Summary">Summary</h2>
<p><span class="seoSummary">The <code>font-stretch</code> CSS property selects a normal, condensed, or expanded face from a font.</span></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><span class="seoSummary">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.</span></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 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>
<p>{{cssbox("font-stretch")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-stretch")}}
</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>
<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>
<h3 id="Interpolation">Interpolation</h3>
<p>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.</p>
<h2 id="Examples">Examples</h2>
<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