# Don't Modify Letter Spacing

**NEVER** · **ID:** `content-ibelick-letter-spacing` · **Category:** content
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-ibelick-letter-spacing

> NEVER: Modify letter-spacing (tracking-*) unless explicitly requested. Default tracking is optimized for readability. Custom tracking often hurts legibility.

Avoid changing letter-spacing unless explicitly requested - fonts are designed with proper spacing

From the Typography constraints in ibelick's baseline-ui skill. Type designers craft spacing per weight and optical size; overriding it usually costs readability and reads as amateurish. If the text needs more presence, reach for weight or size before tracking. Counter-view worth reading alongside this: content-tracking-is-size-specific argues from Emil Kowalski's apple-design skill that tracking IS size-dependent at the extremes — display type wants it slightly tighter, caption type slightly looser. The two are not really in conflict: this rule is the correct default for body text, that one is the correction for very large and very small sizes, ideally applied through a variable font's optical-sizing axis rather than a hardcoded value.

## Bad — do not do this

`content-ibelick-letter-spacing-bad`

```tsx
export function IbelickLetterSpacingBad() {
  return (
    <div className="space-y-4">
      <div className="space-y-3">
        <h3 className="text-lg font-semibold tracking-[0.2em]">
          HERO HEADING
        </h3>
        <p className="text-sm tracking-tight">
          This body text has tighter letter spacing applied to it, which makes it harder to read at smaller sizes.
        </p>
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm tracking-widest">
          CALL TO ACTION
        </button>
      </div>
      <p className="text-xs text-destructive">
        Custom letter-spacing everywhere - inconsistent and harder to read
      </p>
    </div>
  );
}
```

## Good — do this

`content-ibelick-letter-spacing-good`

```tsx
export function IbelickLetterSpacingGood() {
  return (
    <div className="space-y-4">
      <div className="space-y-3">
        <h3 className="text-lg font-semibold">
          Hero Heading
        </h3>
        <p className="text-sm">
          This body text uses the font's default letter spacing, which the type designer optimized for readability.
        </p>
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm">
          Call to Action
        </button>
      </div>
      <p className="text-xs text-success">
        Default letter-spacing - clean, readable, professional
      </p>
    </div>
  );
}
```

## References

- [baseline-ui (skill source)](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [Typography Best Practices](https://fonts.google.com/knowledge/using_type)