# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-stretch.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "font-stretch";
export const description = "Utilities for selecting the width of a font face.";

<ApiTable
  rows={[
    ["font-stretch-ultra-condensed", "font-stretch: ultra-condensed; /* 50% */"],
    ["font-stretch-extra-condensed", "font-stretch: extra-condensed; /* 62.5% */"],
    ["font-stretch-condensed", "font-stretch: condensed; /* 75% */"],
    ["font-stretch-semi-condensed", "font-stretch: semi-condensed; /* 87.5% */"],
    ["font-stretch-normal", "font-stretch: normal; /* 100% */"],
    ["font-stretch-semi-expanded", "font-stretch: semi-expanded; /* 112.5% */"],
    ["font-stretch-expanded", "font-stretch: expanded; /* 125% */"],
    ["font-stretch-extra-expanded", "font-stretch: extra-expanded; /* 150% */"],
    ["font-stretch-ultra-expanded", "font-stretch: ultra-expanded; /* 200% */"],
    ["font-stretch-<percentage>", "font-stretch: <percentage>;"],
    ["font-stretch-(<custom-property>)", "font-stretch: var(<custom-property>);"],
    ["font-stretch-[<value>]", "font-stretch: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `font-stretch-condensed` and `font-stretch-expanded` to set the width of a font face:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-extra-condensed
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-condensed dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-condensed
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-condensed dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-normal</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-normal dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-expanded
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-expanded dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-extra-expanded
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-expanded dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-stretch-extra-condensed,font-stretch-condensed,font-stretch-normal,font-stretch-expanded,font-stretch-extra-expanded] -->
<p class="font-stretch-extra-condensed">The quick brown fox...</p>
<p class="font-stretch-condensed">The quick brown fox...</p>
<p class="font-stretch-normal">The quick brown fox...</p>
<p class="font-stretch-expanded">The quick brown fox...</p>
<p class="font-stretch-extra-expanded">The quick brown fox...</p>
```

</Figure>

This only applies to fonts that have multiple width variations available, otherwise the browser selects the closest match.

### Using percentages

Use `font-stretch-<percentage>` utilities like `font-stretch-50%` and `font-stretch-125%` to set the width of a font face using a percentage:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-50%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-50% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-100%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-100% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-150%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-150% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-stretch-50%,font-stretch-100%,font-stretch-150%] -->
<p class="font-stretch-50%">The quick brown fox...</p>
<p class="font-stretch-100%">The quick brown fox...</p>
<p class="font-stretch-150%">The quick brown fox...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="font-stretch" value="66.66%" name="font width" variable="font-width" />

### Responsive design

<ResponsiveDesign property="font-stretch" defaultClass="font-stretch-normal" featuredClass="font-stretch-expanded" />