ContextQMD
Back to Tailwindcss

Font Stretch

src/docs/font-stretch.mdx

latest5.5 KB
Original Source

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" />