font-smoothing

Examples

Grayscale antialiasing

Use the antialiased utility to render text using grayscale antialiasing:

<p class="antialiased ...">The quick brown fox ...</p>

Subpixel antialiasing

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

<p class="subpixel-antialiased ...">The quick brown fox ...</p>

Responsive design

Prefix -webkit-font-smoothing and -moz-osx-font-smoothing utilities with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="antialiased md:subpixel-antialiased ...">  <!-- ... --></p>

Learn more about using variants in the variants documentation.