# Typographic Quotes

**SHOULD** · **ID:** `content-typographic-quotes` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-typographic-quotes

> SHOULD: Curly quotes (" "); avoid widows/orphans

Prefer curly quotes over straight quotes

Curly quotes (also called smart quotes or typographer's quotes) look more polished and professional than straight quotes. Use curly double quotes and curly single quotes. Most design tools and modern editors can auto-convert these.

## Bad — do not do this

`content-typographic-quotes-bad`

```tsx
export function TypographicQuotesBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <blockquote className="text-sm text-foreground italic mb-2">
          "Design is not just what it looks like and feels like. Design is how it works."
        </blockquote>
        <p className="text-xs text-muted-foreground">- Steve Jobs</p>
      </div>
      <p className="text-xs text-error mt-4">
        Straight quotes look unpolished
      </p>
    </div>
  );
}
```

## Good — do this

`content-typographic-quotes-good`

```tsx
export function TypographicQuotesGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <blockquote className="text-sm text-foreground italic mb-2">
          "Design is not just what it looks like and feels like. Design is how it works."
        </blockquote>
        <p className="text-xs text-muted-foreground">— Steve Jobs</p>
      </div>
      <p className="text-xs text-success mt-4">
        Curly quotes and em dash look professional
      </p>
    </div>
  );
}
```

## References

- [Smart Quotes](https://practicaltypography.com/straight-and-curly-quotes.html)