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 »