Skip to main content

CSS font-stretch property

The font-stretch property in CSS allows us to select a normal, expanded, or condensed face from the font's family. This property sets the text wider or narrower compare to the default width of the font. It will not work on any font but only works on the font-family that has a width-variant face.

This CSS property only works for the fonts with additional faces like expanded and condensed faces; otherwise, it will be affectless for the fonts that don't have condensed or expanded faces.

The nine keyword values for choosing the width of the font-face are given in the following syntax.

Syntax​

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

where:

  • normal: This is the default value, which does not stretch any font.
  • semi-condensed: It slightly condensed the text characters of the element. This value makes the text narrower than normal but not narrower than condensed.
  • condensed: This value makes the text narrower than semi-condensed but not narrower than extra-condensed.
  • extra-condensed: This value makes the text narrower than condensed but not narrower than ultra-condensed.
  • ultra-condensed: This value makes the text extremely narrowed.
  • semi-expanded: It slightly widened the text characters of the element. This value makes the text wider than normal but not wider than expanded.
  • expanded: This value makes the text wider than semi-expanded but not wider than extra-expanded.
  • extra-expanded: This value makes the text wider than expanded but not wider than ultra-expanded.
  • ultra-expanded: This value makes the text extremely wider.
<html>  
    <head>    
        <style>  
        body{ text-align: center; }  
        div{  
            font-family: Arial, Helvetica, sans-serif;  
            font-size: 20px;  
            color: blue;  
        }  
        .normal {  
            font-stretch: normal;  
        }  
        .semi-condensed {  
            font-stretch: semi-condensed;  
        }  
        .condensed {  
            font-stretch: condensed;  
        }  
        .extra-condensed {  
            font-stretch: extra-condensed;  
        }  
        .ultra-condensed {  
            font-stretch: ultra-condensed;  
        }  
        .semi-expanded {  
            font-stretch: semi-expanded;  
        }  
        .expanded {  
            font-stretch: expanded;  
        }  
        .extra-expanded {  
            font-stretch: extra-expanded;  
        }  
        .ultra-expanded {  
            font-stretch: ultra-expanded;  
        }  
        </style>  
    </head>  
    <body>  
        <h1> Example of the font-stretch property </h1>  
        <div class = "normal">normal</div>  
        <div class = "semi-condensed">semi-condensed</div>  
        <div class = "condensed">condensed</div>  
        <div class = "extra-condensed">extra-condensed</div>  
        <div class = "ultra-condensed">ultra-condensed</div>  
        <div class = "semi-expanded">semi-expanded</div>  
        <div class = "expanded">expanded</div>  
        <div class = "extra-expanded">extra-expanded</div>  
        <div class = "ultra-expanded">ultra-expanded</div>  
    </body>  
</html>

Output:

Example font-stretch

Table of Contents