Web development

CSS font-stretch Property

CSS font-stretch Property

Some fonts provide additional faces: condensed faces (narrower) and expanded faces (wider). The CSS font-stretch property let the user make text narrower or wider.

The CSS font-stretch property has no effect if the chosen font does not offer condensed or expanded faces.

The font used in the tutorial: Encode Sans (source: Google Fonts).



font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded;

normal (default) – no font stretching.

ultra-condensed – the text is narrow as possible.

extra-condensed – the text is narrower than semi-condensed but not as narrow as extra-condensed.

semi-condensed – the text is narrower than normal but not as narrow as condensed.

semi-expanded – the text is wider than normal but not as wide as expanded.

expanded – the text is wider than semi-expanded but not as wide as extra-expanded.

extra-expanded – the text is wider than expanded but not as wide as ultra-expanded.

ultra-expanded – the text is wide as possible.


<!DOCTYPE html>
@font-face {
  font-family: Encode Sans;
  src: url(;
.a,.b,.c {
   font-family: Encode Sans; 
.a {
  font-stretch: condensed;
.b {
  font-stretch: normal;
.c {
  font-stretch: expanded;

<p class="a">The font-stretch Property, condensed.</p>
<p class="b">The font-stretch Property, normal.</p>
<p class="c">The font-stretch Property, expanded.</p>


The font-stretch Property, condensed.

The font-stretch Property, normal.

The font-stretch Property, expanded.

Enjoy coding!

Read also:

CSS @font-face Rule

CSS Fallback Fonts

Web Safe Fonts