Typography
Font pairings and type scale.
Font Tokens
| Token | Variable | Usage |
|---|---|---|
font-display |
--pairing-display | Headings, logos |
font-nav |
--pairing-nav | Navigation, CTAs |
font-body |
--pairing-body | Body text, UI |
Font Specimen
Display Font
INTERPLANETARY
Display Headings
Section Titles
The quick brown fox jumps over the lazy dog
Navigation Font
NAVIGATION
Menu Items
The quick brown fox jumps over the lazy dog 0123456789
Body Font
Body text for content
The quick brown fox jumps over the lazy dog 0123456789
Small labels and metadata
Type Scale
Terminal (Bitmap)
--text-xs
8px
--text-sm
10px
--text-base
14px
--text-lg
18px
--text-xl
24px
--text-2xl
32px
Industrial (Modern)
--text-xs
12px
--text-sm
14px
--text-base
16px
--text-lg
20px
--text-xl
28px
--text-2xl
36px
Guidelines
- Headings:
font-display, uppercase, largest sizes - Navigation/CTAs:
font-nav, uppercase recommended - Body/UI text:
font-body, sentence case - Size tokens are relative — actual px varies by font pairing