Font Smoothing

Controls the font smoothing and antialiasing applied to text, which can dramatically improve text rendering on certain screens and operating systems. These utilities are especially useful for light text on dark backgrounds, custom fonts, and larger text where rendering quality is more noticeable. In Tailwind v4, font smoothing has improved integration with system fonts.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="font-bold text-xl mb-4">Default smoothing</div>
<div class="antialiased font-bold text-xl mb-4">Antialiased (smoother)</div>
<div class="subpixel-antialiased font-bold text-xl">Subpixel antialiased</div>

Examples

Comparison of font smoothing options

<div class="font-bold text-xl mb-4">Default smoothing</div>
<div class="antialiased font-bold text-xl mb-4">Antialiased (smoother)</div>
<div class="subpixel-antialiased font-bold text-xl">Subpixel antialiased</div>

Edit in playground

Antialiasing applied to light text on dark background

<!-- Dark mode with antialiased text -->
<div class="bg-gray-900 text-white p-6 rounded-lg antialiased">
  <h2 class="text-2xl font-bold mb-4">Antialiased Text on Dark Background</h2>
  <p class="mb-4">Antialiasing makes text appear smoother and can significantly improve readability, especially for light text on dark backgrounds like this example.</p>
  <p>Notice how the text appears more crisp and defined compared to the default rendering.</p>
</div>

Edit in playground

Subpixel antialiasing for dark text on light background

<!-- Feature comparison card with subpixel antialiasing -->
<div class="bg-white shadow-md rounded-lg overflow-hidden subpixel-antialiased">
  <div class="bg-blue-600 text-white p-4">
    <h3 class="text-xl font-bold">Subpixel Antialiasing</h3>
    <p class="text-sm">For sharp text rendering on light backgrounds</p>
  </div>
  <div class="p-6">
    <p class="mb-4">Subpixel antialiasing leverages the RGB subpixels in LCD screens to render text with extra sharpness. This setting is optimized for:</p>
    <ul class="list-disc pl-5 space-y-2">
      <li>Dark text on light backgrounds</li>
      <li>Small to medium text sizes</li>
      <li>When text clarity is a top priority</li>
    </ul>
    <p class="mt-4 text-sm text-gray-600">Note: Subpixel antialiasing has the most noticeable effect on high-density LCD displays. Its effect may vary across different screens and operating systems.</p>
  </div>
</div>

Edit in playground

Side-by-side comparison of antialiased and default text

<!-- Side-by-side comparison -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div class="bg-gray-800 text-white p-6 rounded-lg">
    <h3 class="text-xl font-bold mb-2">Without Antialiasing</h3>
    <p class="mb-4">This text is rendered without antialiasing applied. It may appear more jagged or pixelated, especially at larger sizes or on high-density displays.</p>
    <button class="px-4 py-2 bg-white text-gray-800 rounded">Button Example</button>
  </div>
  
  <div class="bg-gray-800 text-white p-6 rounded-lg antialiased">
    <h3 class="text-xl font-bold mb-2">With Antialiasing</h3>
    <p class="mb-4">This text has antialiasing applied. Notice how it appears smoother and potentially more readable, especially for light text on dark backgrounds.</p>
    <button class="px-4 py-2 bg-white text-gray-800 rounded">Button Example</button>
  </div>
</div>

Edit in playground

Live Preview

Try the Font Smoothing utility with different values

Open Interactive Playground

Variants

antialiased: applies font smoothing for smoother text (best for light text on dark backgrounds); subpixel-antialiased: uses subpixel rendering for sharper text (best for dark text on light backgrounds, on LCD displays)

antialiasedsubpixel-antialiased