Typography
Geometry of Trust speaks with one consistent typographic system. Geist communicates to people. IBM Plex Mono communicates to machines.
Typography should disappear behind the information it carries.
The type system intentionally limits variation so that hierarchy comes from spacing, composition and semantics rather than decorative styling.
Font families¶
Geist
Used across branding, documentation, interfaces, presentations and marketing.
| Weight | Usage |
|---|---|
| 300 | Large display |
| 400 | Body text |
| 500 | Navigation and controls |
| 600 | Compact emphasis |
IBM Plex Mono
Reserved for information that represents machine-readable structure.
| Weight | Usage |
|---|---|
| 400 | Code and examples |
| 500 | Identifiers and hashes |
Type specimens¶
Display scale¶
| Token | Size | Weight | Line height | Tracking | Typical use |
|---|---|---|---|---|---|
--text-display-xl |
72px | 300 | 0.95 | -0.040em | Marketing hero |
--text-display |
60px | 300 | 0.98 | -0.035em | Hero |
--text-hero |
52px | 300 | 1.00 | -0.030em | Compact hero |
--text-h1 |
42px | 400 | 1.08 | -0.025em | Page title |
--text-h2 |
34px | 400 | 1.12 | -0.025em | Section |
--text-h3 |
28px | 400 | 1.20 | -0.018em | Subsection |
Body scale¶
| Token | Size | Weight | Line height | Typical use |
|---|---|---|---|---|
--text-body-lg |
20px | 400 | 1.60 | Lead paragraph |
--text-body |
16px | 400 | 1.60 | Body text |
--text-body-sm |
14px | 400 | 1.55 | Secondary UI |
--text-caption |
12px | 400-500 | 1.45 | Metadata |
Monospace scale¶
| Token | Size | Weight | Typical use |
|---|---|---|---|
--text-code |
14px | 400 | Examples |
--text-code-sm |
12px | 400 | Compact identifiers |
--text-terminal |
15px | 400 | Terminal output |
--text-identifier |
14px | 500 | UUIDs, hashes, anchors |
Weight philosophy¶
Light
Large statements. Editorial. Marketing. Never below 28px.
Normal
Documentation.
Body copy.
Cards.
Page headings.
Default interface weight.
Functional emphasis
Buttons.
Navigation.
Metrics.
Tables.
Identifiers.
Never decorative.
Human versus machine¶
Geist
People read paragraphs.
Interfaces.
Marketing.
Documentation.
Everything conversational.
IBM Plex Mono
Code.
UUIDs.
Protocol identifiers.
JSON.
CLI.
API examples.
Hashes.
Rules¶
- Use Geist for every human-facing interface.
- Reserve IBM Plex Mono for inherently technical information.
- Keep body text at weight 400.
- Use sentence case for headings and controls.
- Use tracking only where defined by the type scale.
- Use IBM Plex Mono decoratively.
- Use weight 300 below 28px.
- Use weights above 600.
- Write long headings in uppercase.
- Use pure white for long paragraphs.