# Pair Display and Body Deliberately

**SHOULD** · **ID:** `aesthetics-font-pairing` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-font-pairing

> SHOULD: Pair a distinctive display font (serif or geometric sans) for headlines with a refined body font for content. Same font everywhere creates flat hierarchy. Limit to 2 font families; use font-display: swap.

Pair a characterful display face with a complementary body face and set an intentional type scale

Typography hierarchy is the foundation of visual communication. When headlines and body text share the same neutral face at three sizes, the page has no voice. A display face used with restraint commands attention; a complementary body face carries the reading. The scale between them — weights, widths, spacing — is the part most generated designs skip, and it is what makes a page feel set rather than assembled.

## Bad — do not do this

`aesthetics-font-pairing-bad`

```tsx
export function FontPairingBad() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <div className="space-y-4">
        <h2 className="text-3xl font-semibold font-sans text-foreground">
          Build faster with AI
        </h2>
        <p className="text-lg font-sans text-muted-foreground">
          Our platform helps teams ship products 10x faster with intelligent
          automation and seamless collaboration tools.
        </p>
        <div className="flex gap-3 pt-2">
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md font-sans text-sm">
            Get Started
          </button>
          <button className="px-4 py-2 border border-border rounded-md font-sans text-sm text-foreground">
            Learn More
          </button>
        </div>
      </div>
      <p className="text-xs text-destructive mt-4">
        Same generic font for headlines and body creates flat, monotonous hierarchy
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-font-pairing-good`

```tsx
export function FontPairingGood() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <div className="space-y-4">
        <h2
          className="text-3xl font-bold text-foreground"
          style={{ fontFamily: "'Playfair Display', Georgia, serif" }}
        >
          Build faster with AI
        </h2>
        <p
          className="text-lg text-muted-foreground leading-relaxed"
          style={{ fontFamily: "'Source Sans 3', system-ui, sans-serif" }}
        >
          Our platform helps teams ship products 10x faster with intelligent
          automation and seamless collaboration tools.
        </p>
        <div className="flex gap-3 pt-2">
          <button
            className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium"
            style={{ fontFamily: "'Source Sans 3', system-ui, sans-serif" }}
          >
            Get Started
          </button>
          <button
            className="px-4 py-2 border border-border rounded-md text-sm text-foreground"
            style={{ fontFamily: "'Source Sans 3', system-ui, sans-serif" }}
          >
            Learn More
          </button>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Display serif for headlines + clean sans for body creates clear visual hierarchy
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [Typewolf Font Pairing](https://www.typewolf.com/)