# Text Rendering Legibility

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

> SHOULD: Apply `text-rendering: optimizeLegibility` to enable kerning and ligatures, most visible at heading sizes.

Apply text-rendering: optimizeLegibility for proper kerning and ligatures

The optimizeLegibility value enables kerning and optional ligatures, improving the visual quality of text, especially at larger font sizes. This is particularly noticeable in letter pairs like AV, WA, and Ty where default spacing can look uneven.

## Bad — do not do this

`content-text-rendering-bad`

```tsx
export function TextRenderingBad() {
  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={{ textRendering: 'auto' }}>
        <h3 className="text-2xl font-bold tracking-tight text-foreground">AVAWATTY</h3>
        <h3 className="text-2xl font-bold tracking-tight text-foreground">Typography Matters</h3>
        <p className="text-sm text-muted-foreground">Notice the spacing between letter pairs like AV, WA, TT, and Ty.</p>
      </div>
      <p className="text-xs text-error">Default text rendering — poor kerning on letter pairs</p>
    </div>
  );
}
```

## Good — do this

`content-text-rendering-good`

```tsx
export function TextRenderingGood() {
  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={{ textRendering: 'optimizeLegibility' }}>
        <h3 className="text-2xl font-bold tracking-tight text-foreground">AVAWATTY</h3>
        <h3 className="text-2xl font-bold tracking-tight text-foreground">Typography Matters</h3>
        <p className="text-sm text-muted-foreground">Notice the improved spacing between letter pairs like AV, WA, TT, and Ty.</p>
      </div>
      <p className="text-xs text-success">optimizeLegibility — proper kerning and ligatures</p>
    </div>
  );
}
```

## References

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