font-smooth

Request platform-specific text antialiasing without assuming a visible change.

Overview

Examples

Use antialiased text

font-antialiased emits -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale. These are nonstandard, platform-specific requests; support and appearance vary with the browser and operating system.

<!-- font-subpixel-antialiased --><p id="target" class="m:0 font-xl leading-md font-subpixel-antialiased">Design with clarity.</p>

<!-- font-antialiased --><p id="target" class="m:0 font-xl leading-md font-antialiased">Design with clarity.</p>

Compare the actual text on your target platform. An accepted declaration does not guarantee a visible rasterization difference.

Restore browser antialiasing

font-subpixel-antialiased resets both vendor properties to auto. The browser chooses its rendering method; the utility name does not guarantee subpixel output.

<!-- An inherited request with a local reset --><div class="font-antialiased"><p id="target" class="m:0 font-xl leading-md font-subpixel-antialiased">Design with clarity.</p></div>

Use sparingly

Check text on the surfaces where it will appear. Neither smoothing mode is universally sharper or more readable. Prefer suitable size, weight and contrast before adding a rendering hint.

<!-- Light surface --><p id="target" class="m:0 p-md r-sm font-xl leading-md bg-white fg-gray-90 font-antialiased">Design with clarity.</p>

<!-- Dark surface --><p id="target" class="m:0 p-md r-sm font-xl leading-md bg-gray-90 fg-white font-antialiased">Design with clarity.</p>

Apply conditionally

Use the Theme control to request grayscale antialiasing in dark mode. The readout reports the browser’s computed vendor property; it is not a measurement of rendering quality.

<!-- A theme-specific rendering request --><p id="target" class="m:0 font-xl leading-md font-subpixel-antialiased font-antialiased@dark">Design with clarity.</p>