font-stretch

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

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

Syntax

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, i.e., towards the most expanded one.

Formal syntax

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Example

HTML

<div class="ultra stretch">This is text with the font extremely stretched.</div>
<div class="stretch">This is text with the font stretched.</div>
<div class="normal">This is text without font stretching.</div>
<div class="condensed">This is text with the font condensed.</div>
<div class="ultra condensed">This is text with the font extremely condensed.</div>

CSS

.ultra.stretch { font-stretch: ultra-expanded; }
.stretch { font-stretch: expanded; } 
.normal { font-stretch: normal; }
.condensed { font-stretch: condensed; }
.ultra.condensed { font-stretch: ultra-condensed; }

Result

Specifications

Browser compatibility