Monospace
A typeface in which every character occupies the same horizontal width.
Plain English
Monospace fonts make every character the same width — the letter "i" takes the same space as "M". This makes them essential for code, technical data, and anything that needs to align in columns. In UI design, monospace type signals "this is technical" and is used for code snippets, terminal output, API keys, and numeric values in data-dense interfaces where column alignment matters.
Technical
Monospace fonts are specified with font-family: monospace as a generic fallback, or named fonts like JetBrains Mono, Fira Code, Cascadia Code, or Courier New. They are the correct choice whenever characters must align vertically (code indentation, tabular data). For tabular numbers in proportional fonts (e.g. Inter), use font-variant-numeric: tabular-nums instead of switching the entire font to monospace.
Live Demo
Monospace use cases
Code snippet
Consistent character width makes code scannable
Data alignment
| Revenue | $1,240.00 |
| Costs | $398.50 |
| Profit | $841.50 |
Decimal points align perfectly
Terminal output
$ npm run build
▶ Next.js 16
Compiling...
✓ Build complete
out/ 42 files
Dark bg + green mono = instant terminal feel
Monospace = every character same width. Perfect for code, data, terminals.
Usage
✓ Good usage
Display API keys, code snippets, and shell commands in a monospace font inside a styled code block with a muted background to distinguish them from prose.
✗ Bad usage
Using a monospace font for body text or headings — it reads slowly and signals "technical manual" rather than polished product.
Recommended values
- Code blocks: 'JetBrains Mono', 'Fira Code', Menlo, monospace
- API keys and tokens: monospace font at 13–14px
- Tabular numbers in data tables: font-variant-numeric: tabular-nums (preferred over switching to monospace)
- Terminal/CLI output: monospace at 13px with 1.5 line-height
Common mistakes
- Using Courier New as the only monospace fallback — it is poorly spaced and dated-looking; use JetBrains Mono or Fira Code first.
- Using monospace for numbers in charts or tables where tabular-nums would work with the existing font.
- Setting monospace text too small — code blocks need at least 13px.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Display all code samples and API keys using font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace at 13px with 1.5 line-height on a #F1F5F9 background. Use a copy-to-clipboard button on every code block.