# Numerals for Counts

**MUST** · **ID:** `content-numerals-for-counts` · **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-numerals-for-counts

> MUST: Write counts and quantities as numerals — "8 deployments", not "eight deployments" — so they can be scanned, compared, and aligned.

Write counts and quantities as digits so they can be scanned instead of read

Digits have a different visual shape than surrounding words, so the eye locks onto them without parsing the sentence. Spelled-out numbers force serial reading and make values impossible to compare, sort, or align in a stat row or table.

## Bad — do not do this

`content-numerals-for-counts-bad`

```tsx
export function NumeralsForCountsBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h4 className="font-medium text-foreground">Project Overview</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li>eight deployments this week</li>
          <li>twelve team members</li>
          <li>one hundred and forty-two build minutes remaining</li>
        </ul>
      </div>
      <p className="text-xs text-error">
        Spelled-out counts can't be scanned, sorted, or compared — the eye has
        to read every word to learn the number
      </p>
    </div>
  );
}
```

## Good — do this

`content-numerals-for-counts-good`

```tsx
export function NumeralsForCountsGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h4 className="font-medium text-foreground">Project Overview</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li>
            <span className="font-medium text-foreground tabular-nums">8</span>{' '}
            deployments this week
          </li>
          <li>
            <span className="font-medium text-foreground tabular-nums">12</span>{' '}
            team members
          </li>
          <li>
            <span className="font-medium text-foreground tabular-nums">142</span>{' '}
            build minutes remaining
          </li>
        </ul>
      </div>
      <p className="text-xs text-success">
        Numerals stand out from the words around them, so counts are scannable
        at a glance
      </p>
    </div>
  );
}
```

## References

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