font-smoothing.mdx

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

export const title = "font-smoothing"; export const description = "Utilities for controlling the font smoothing of an element.";

<ApiTable rows={[ ["antialiased", "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;"], ["subpixel-antialiased", "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;"], ]} />

Examples

Grayscale antialiasing

Use the antialiased utility to render text using grayscale antialiasing:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:antialiased] -->
<p class="antialiased ...">The quick brown fox ...</p>

Subpixel antialiasing

Use the subpixel-antialiased utility to render text using subpixel antialiasing:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:subpixel-antialiased] -->
<p class="subpixel-antialiased ...">The quick brown fox ...</p>

Responsive design

<ResponsiveDesign element="p" properties={["-webkit-font-smoothing", "-moz-osx-font-smoothing"]} defaultClass="antialiased" featuredClass="subpixel-antialiased" />