Font smoothing

Utilities for controlling the font smoothing of an element


Class reference

ClassProperties
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

# Subpixel Antialiasing

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

The quick brown fox jumped over the lazy dog.

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

# Grayscale Antialiasing

Use the .antialiased utility to render text using grayscale antialiasing.

The quick brown fox jumped over the lazy dog.

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

# Responsive

To control the font smoothing of an element at a specific breakpoint, add a {screen}: prefix to any existing font smoothing utility. For example, use md:antialiased to apply the antialiased utility at only medium screen sizes and above.

<p class="antialiased sm:subpixel-antialiased md:antialiased ...">
The quick brown fox jumped over the lazy dog.
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.