font-smoothfont-smooth

Controlling the application of anti-aliasing when fonts are rendered.

Overview

Examples

Use antialiased text

Use font-antialiased when display text should use grayscale antialiasing.

<h1 class="font-antialiased">Dashboard</h1>

@layer utilities {    .font-antialiased {        -webkit-font-smoothing: antialiased;        -moz-osx-font-smoothing: grayscale    }}

Restore subpixel antialiasing

Use font-subpixel-antialiased when you want to return to the platform default smoothing behavior.

<p class="font-antialiased font-subpixel-antialiased@sm">    Body text</p>

Use sparingly

Font smoothing is platform-specific. Prefer testing it on the actual surfaces where the text will appear.

<h2 class="font-antialiased">Large heading</h2>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="font-antialiased:hover font-subpixel-antialiased@sm font-subpixel-antialiased@print">...</p>