CSS font-stretch

The CSS font-stretch property is used when we need to define condensed or expanded face from a font. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{font-family: 'Courier New', Courier, monospace;
         font-stretch: expanded;}
   </style>
</head>
<body>

   <div id="myd">
      <h2>The font-stretch Property</h2>
      <p>This is an example of font-stretch property in CSS.</p>
   </div>
   
</body>
</html>
Output

The font-stretch Property

This is an example of font-stretch property in CSS.

CSS font-stretch Syntax

The syntax of font-stretch property in CSS, is:

font-stretch: x;

The value of x should be any of the following:

  • ultra-expanded - used to make the text widest
  • extra-expanded - used to make the text more wider than expanded and less wider than ultra-expanded
  • expanded - used to make the text expanded. It makes the text more wider than semi-expanded and less wider than extra-expanded
  • semi-expanded - used to make the text more wider than normal and less wider than expanded
  • normal - used not to apply the font-stretch. This is the default value
  • semi-condensed - used to make the text more narrower than normal and less narrower than condensed
  • condensed - used to make the text more narrower than semi-condensed and less narrower than extra-condensed
  • extra-condensed - used to make the text more narrower than condensed and less narrower than ultra-condensed
  • ultra-condensed - used to make the text narrowest
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

Important - The font-stretch property does not works on those fonts that does not offer condensed and/or expanded faces.

The table given below equates all the keywords that can be used to define font-stretch, with percentage:

ultra-expanded 200%
extra-expanded 150%
expanded 125%
semi-expanded 112.5%
normal 100%
semi-condensed 87.5%
condensed 75%
extra-condensed 62.5%
ultra-condensed 50%

CSS Online Test


« Previous Tutorial Next Tutorial »