# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/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:

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 antialiased dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

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

</Figure>

### Subpixel antialiasing

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 subpixel-antialiased dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

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

</Figure>

### Responsive design

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