Font stretch
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.";
Examples¶
Basic example¶
Use utilities like font-stretch-condensed and font-stretch-expanded to set the width of a font face:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!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>
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:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!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>