CSS - font-stretch

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




<div class="stretch"> This is text with the font stretched</div>
<div class="condensed"> This is text with the font condensed</div>


.stretch {font-stretch: extra-expanded;} 
.condensed {font-stretch: condensed;}



/* Keyword values */
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;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;


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.


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.

Formal syntax

normal <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ultra-condensed <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> extra-condensed <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> condensed <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> semi-condensed <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> semi-expanded <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> expanded <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> extra-expanded <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ultra-expanded


The font-stretch 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 OS X, 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 shrunk, 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.

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Computed valueas specified
Animatableyes, as a font stretch
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48.0 9.0 (9.0) 9.0 35.0 No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 9.0 (9.0) ? No support No support


Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-stretch' in that specification.
Candidate Recommendation Initial definition

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.


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Fonts CSS Property Reference