# Title Case for Headings and Buttons

**SHOULD** · **ID:** `content-title-case` · **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-title-case

> SHOULD: Use Chicago-style Title Case for headings, buttons, and menu items — capitalize principal words, lowercase short articles, conjunctions, and prepositions.

Use Chicago-style Title Case consistently for headings, buttons, and menu items

Mixed casing across a single surface makes headings stop reading as headings and buttons look half-finished. Chicago Title Case gives one deterministic rule — capitalize principal words, lowercase short articles, conjunctions, and prepositions — so labels stay predictable as the product grows. The rule is scoped to product UI: marketing pages deliberately invert it and use sentence case, because long persuasive headlines set in Title Case read as shouting. Pick the casing from the surface you are on, then never mix the two within it.

## Bad — do not do this

`content-title-case-bad`

```tsx
export function TitleCaseBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <h4 className="text-base font-medium text-foreground">
          deployment protection
        </h4>
        <p className="text-sm text-muted-foreground">
          Restrict who can view your preview deployments.
        </p>
        <div className="flex gap-2">
          <button className="px-3 py-2 bg-primary text-primary-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            save changes
          </button>
          <button className="px-3 py-2 bg-muted text-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Learn More about protection
          </button>
        </div>
      </div>
      <p className="text-xs text-error">
        Three casing styles in one card — the heading no longer reads as a
        heading and the buttons look unfinished
      </p>
    </div>
  );
}
```

## Good — do this

`content-title-case-good`

```tsx
export function TitleCaseGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <h4 className="text-base font-medium text-foreground">
          Deployment Protection
        </h4>
        <p className="text-sm text-muted-foreground">
          Restrict who can view your preview deployments.
        </p>
        <div className="flex gap-2">
          <button className="px-3 py-2 bg-primary text-primary-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Save Changes
          </button>
          <button className="px-3 py-2 bg-muted text-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Learn More
          </button>
        </div>
      </div>
      <p className="text-xs text-success">
        Chicago-style Title Case on the heading and both buttons: one rule,
        predictable chrome
      </p>
    </div>
  );
}
```

## References

- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- [Google Style: Capitalization](https://developers.google.com/style/capitalization)