# Real Symbols, Not ASCII Look-alikes

**SHOULD** · **ID:** `content-math-symbol-glyphs` · **Category:** content
**Source:** Custom
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-math-symbol-glyphs

> SHOULD: Use real typographic symbols, not ASCII look-alikes: × (U+00D7) for multiplication not the letter x, − (U+2212) for minus not a hyphen, and © ™ ® not (c) / (TM) / (R). The substitutes read as unfinished and can be ambiguous in data and dimensions.

Use ×, −, © ™ ® for multiplication, minus, and marks — not the letter x, a hyphen, or (c) / (TM) / (R)

The letter x is not a multiplication sign, a hyphen is not a minus, and "(c)" is not a copyright symbol — they are ASCII stand-ins from an era of 95 printable characters, and Unicode retired the excuse decades ago. "1920 x 1080" should be "1920 × 1080" (× is `×` / U+00D7); "-40°" should carry a real minus "−40°" (− is U+2212, which has the correct width and, unlike a hyphen, will not line-break away from its number); and (c) / (TM) / (R) should be © ™ ® (`©` `™` `®`). The substitutes are legible but read as unfinished, and in dimensions or data they are genuinely ambiguous — is "2 x 3" a product or a variable named x? This is the same rule as content-typographic-quotes and content-ellipsis-character, just the less-remembered corner of it: reach for the character that was designed for the job, not the one that happened to be on a 1970s keyboard.

## Rule snippet

```tsx
1920 × 1080   {/* not 1920 x 1080 */}
−40°C         {/* U+2212, not a hyphen */}
© 2026 · Pro™
```

## Bad — do not do this

`content-math-symbol-glyphs-bad`

```tsx
export function MathSymbolGlyphsBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2 rounded-lg border border-border bg-card p-4 font-mono text-sm text-foreground">
        <p>1920 x 1080</p>
        <p>-40°C</p>
        <p>(c) 2026 · Pro(TM) · Reg(R)</p>
      </div>
      <p className="mt-4 text-xs text-destructive">
        ASCII stand-ins: the letter x for ×, a hyphen for minus, (c)/(TM)/(R) for the marks.
      </p>
    </div>
  );
}
```

## Good — do this

`content-math-symbol-glyphs-good`

```tsx
export function MathSymbolGlyphsGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2 rounded-lg border border-border bg-card p-4 font-mono text-sm text-foreground">
        <p>1920 × 1080</p>
        <p>−40°C</p>
        <p>© 2026 · Pro™ · Reg®</p>
      </div>
      <p className="mt-4 text-xs text-success">
        Real glyphs: × (U+00D7), − (U+2212, non-breaking width), © ™ ® — designed for the job.
      </p>
    </div>
  );
}
```

## References

- [Butterick — Practical Typography: math symbols](https://practicaltypography.com/math-symbols.html)
- [bencium — typography skill (html entities)](https://skills.sh/bencium/bencium-marketplace/ui-typography)
- [MDN — Character references](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Character_references)