# Font Smoothing

**SHOULD** · **ID:** `content-font-smoothing` · **Category:** content
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-font-smoothing

> SHOULD: Apply `-webkit-font-smoothing: antialiased` so subpixel rendering does not make text look heavier than the designed weight.

Apply -webkit-font-smoothing: antialiased for better text legibility

Subpixel antialiasing can make text appear heavier than designed, especially on macOS. Applying antialiased rendering produces text that more closely matches the intended font weight and appears crisper on high-DPI displays.

## Rule snippet

```tsx
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
```

## Bad — do not do this

`content-font-smoothing-bad`

```tsx
export function FontSmoothingBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3" style={{ WebkitFontSmoothing: 'auto', MozOsxFontSmoothing: 'auto' } as React.CSSProperties}>
        <h3 className="text-lg font-semibold text-foreground">Dashboard Overview</h3>
        <p className="text-sm text-muted-foreground">Your weekly analytics show a 23% increase in engagement across all channels.</p>
        <p className="text-xs text-muted-foreground">Last updated: March 28, 2026</p>
      </div>
      <p className="text-xs text-error">No font smoothing — text may appear heavier and less crisp</p>
    </div>
  );
}
```

## Good — do this

`content-font-smoothing-good`

```tsx
export function FontSmoothingGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3 antialiased">
        <h3 className="text-lg font-semibold text-foreground">Dashboard Overview</h3>
        <p className="text-sm text-muted-foreground">Your weekly analytics show a 23% increase in engagement across all channels.</p>
        <p className="text-xs text-muted-foreground">Last updated: March 28, 2026</p>
      </div>
      <p className="text-xs text-success">antialiased — crisp, consistent text rendering</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [MDN font-smooth](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)