CSS @font-face - font-stretch

The font-stretch CSS descriptor permits the authors to give a normal, condensed, or expanded font face for the specified fonts in the @font-face at-rule.

font-stretch descriptor is used exclusively to specify the font face'e stretch. These font faces correspond to the different styles of the same font family.

The descriptor font-stretch takes the same values as that of its corresponding font-stretch property.

The font-stretch descriptor should not to be confused with the font-stretch property. The font-stretch descriptor is used solely with the @font-face at-rule to explicitly select expanded or narrow font faces for that rule. The font-stretch property is then used elsewhere in the style sheet to apply that font width to an element.

Possible Values

The font-stretch CSS descriptor can have one of the following values:

  • normal: Specifies a normal font face.

  • semi-condensed, condensed, extra-condensed, ultra-condensed: Specifies a condensed font face than normal, where ultra-condensed is the most condensed form.

  • semi-expanded, expanded, extra-expanded, ultra-expanded: Specifies an expanded font face than normal, where ultra-expanded is the most expanded form.

  • <percentage>: A percentage value, which can be 50% to 200% (inclusive). Negative values are not permitted.

Syntax

font-stretch = "normal" | <'font-stretch'>;

Few ways in which font-stretch> is declared is as follows:

/* single values */
font-stretch = "normal";
font-stretch = "semi-condensed";
font-stretch = "condensed";
font-stretch = "extra-condensed";
font-stretch = "ultra-condensed";
font-stretch = "semi-expanded";
font-stretch = "expanded";
font-stretch = "extra-expanded";
font-stretch = "ultra-expanded";
font-stretch = 75%;
font-stretch = 200%;

/* multiple values */
font-stretch = 50% 120%;
font-stretch = semi-condensed ultra-condensed;

Keyword to numeric mapping

The following table explains the mapping of keyword values and their corresponding percentage values:

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

Variable fonts

Many of the fonts have a specific width, corresponding to one of the keyterm values. But there are some fonts that support a range of stretching with fine granularity to a great extent, these are called the variable fonts. They give the user much more control over the font-weight that they are choosing. And for specifying the stretching of these fonts, percentage values are useful.

The wdth variation of TrueType or OpenType variable fonts, is useful in implementing the varying glyph widths.

Accessibility concerns: Fonts that are too condensed, especially in the case of fonts with low contrast color ratio, might not be very clear to the people with dyslexia and other cognitive conditions.

CSS font-stretch - Percentage Value

Following example demonstrates the setting of stretch value for a font face, using the percentage range 50% and 200% used inside the @font-face at-rule:

<html>
<head> 
<style>
   @font-face {
      src: local("monospace");
      font-family: "f1";
      font-style: normal;
      font-stretch: 50% 200%;
   }

   .container {
      font: 2rem "f1", sans-serif;
   }

   .font-condensed {
      font-stretch: 50%;
   }

   .font-normal {
      font-stretch: 100%;
   }

   .font-ultra-expanded {
      font-stretch: 200%;
   }

   .font-semi-condensed {
      font-stretch: semi-condensed;
   }

   .font-extra-condensed {
      font-stretch: extra-condensed;
   }

   .font-ultra-condensed {
      font-stretch: ultra-condensed;
   }

   .font-semi-expanded {
      font-stretch: semi-expanded;
   }

   .font-extra-expanded {
      font-stretch: extra-expanded;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="font-condensed">ultra-condensed (50%)</p>
      <p class="font-normal">normal (100%)</p>
      <p class="font-expanded">ultra-expanded (200%)</p>
      <p class="font-semi-condensed">semi-condensed</p>
      <p class="font-ultra-condensed">ultra-condensed</p>
      <p class="font-semi-expanded">semi-expanded</p>
      <p class="font-extra-expanded">extra-expanded</p>
      </div>
</body>
</html>
Advertisements