# Type Is Not a Delivery Vehicle

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

> SHOULD: Use distinctive, characterful fonts instead of generic defaults (Inter, Roboto, Arial). Pair a display font with a refined body font for memorable visual identity.

Choose typefaces with character instead of the current default families, and make the type treatment itself memorable

Generic fonts are everywhere — safe, and forgettable. The monoculture also moves: the tell is no longer just Arial/Inter/Roboto but the newer default wave — Geist, Plus Jakarta Sans, Space Grotesk, Instrument Sans/Serif, Mona Sans, Fraunces, Recoleta. Reaching for one of those because it is the current "tasteful" pick is the same reflex, one cycle later. Upstream frames the test as subject-derived: the typeface should come from the product's own world, not from whatever is trending in the training distribution.

## Bad — do not do this

`aesthetics-distinctive-typography-bad`

```tsx
export function DistinctiveTypographyBad() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <h2 className="text-2xl font-semibold mb-3 font-sans">
        Welcome to Our Platform
      </h2>
      <p className="text-base text-muted-foreground font-sans leading-relaxed">
        Discover amazing features and tools designed to help you succeed. Our platform
        provides everything you need to get started.
      </p>
      <p className="text-xs text-destructive mt-4">
        Generic system fonts lack character and memorable identity
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-distinctive-typography-good`

```tsx
export function DistinctiveTypographyGood() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <h2
        className="text-2xl font-semibold mb-3"
        style={{ fontFamily: "'Playfair Display', Georgia, serif" }}
      >
        Welcome to Our Platform
      </h2>
      <p
        className="text-base text-muted-foreground leading-relaxed"
        style={{ fontFamily: "'Source Serif 4', Georgia, serif" }}
      >
        Discover amazing features and tools designed to help you succeed. Our platform
        provides everything you need to get started.
      </p>
      <p className="text-xs text-success mt-4">
        Characterful font pairing creates memorable visual identity
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [Google Fonts](https://fonts.google.com/)
- [Fontshare](https://www.fontshare.com/)