# Ampersand in Tight Space
**SHOULD** · **ID:** `content-ampersand-in-tight-space` · **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-ampersand-in-tight-space
> SHOULD: Use `&` instead of "and" in width-constrained labels (sidebar items, tabs, table headers) so compound labels like "Billing & Invoices" stay on one line; keep "and" in prose.
Prefer "&" over "and" in labels where horizontal space is constrained
Sidebar items, tabs, and table headers have a hard width budget, and "and" spends three characters plus two spaces on a word that carries no meaning the ampersand does not. Swapping it keeps compound labels like "Billing & Invoices" on one line instead of truncating them mid-word or wrapping the row. Keep "and" in prose, where space is not the constraint.
## Bad — do not do this
`content-ampersand-in-tight-space-bad`
```tsx
export function AmpersandInTightSpaceBad() {
const items = ['Overview', 'Billing and Invoices', 'Logs and Analytics', 'Domains'];
return (
In a 160px sidebar, "and" costs the three characters that push the label
past the edge — two items truncate mid-word
);
}
```
## Good — do this
`content-ampersand-in-tight-space-good`
```tsx
export function AmpersandInTightSpaceGood() {
const items = ['Overview', 'Billing & Invoices', 'Logs & Analytics', 'Domains'];
return (
Same width, same meaning: "&" fits every label on one line with nothing
clipped