font-stretch Archives

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

Demo:

Syntax:

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.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  
@font-face {
  font-family: Encode Sans;
  src: url(https://lenadesign.org/wp-content/uploads/2022/01/EncodeSans-VariableFont_wdthwght.ttf);
}
.a,.b,.c {
   font-family: Encode Sans; 
  }
  
.a {
  font-stretch: condensed;
}
.b {
  font-stretch: normal;
}
.c {
  font-stretch: expanded;
}

</style>
</head>
<body>
<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>
</body>
</html>

Output:

The font-stretch Property, condensed.

The font-stretch Property, normal.

The font-stretch Property, expanded.

Enjoy coding!