One custom display face does the work. Matter runs at weight 500 for all headings and oversized kinetic text, and at weight 400 for body and UI copy, with aggressive negative tracking at large sizes and wide positive tracking on uppercase labels.
Type scale
Type scale
| Role | Size | Line height | Letter spacing |
|---|---|---|---|
| caption | 10px | 1.4 | 1.5px |
| body | 16px | 1.4 | — |
| subheading | 24px | 1.3 | -0.48px |
| heading | 36px | 1 | — |
| heading-lg | 61px | 1 | -2.44px |
| display | 96px | 1 | -3.84px |
Faces
Matter
- Weights: 400, 500
- Sizes: 10, 12, 13, 14, 16, 20, 24, 36, 61, 86, 96, 295px
- Line height: 1.0, 1.3, 1.4, 1.5
- Letter spacing: -0.046em at 86px, -0.04em at 61px, -0.02em at 24px, 0.08em uppercase at 20px, 0.12em uppercase at 12px, 0.15em uppercase at 10px
- Substitute: Inter, DM Sans, or Satoshi for a close geometric-grotesk match
Arial
- Weights: 400
- Sizes: 14px
- Line height: 1.43
- Role: secondary fallback for interactive UI elements — nav, buttons, hero micro-copy, footer
- Substitute: system-ui, -apple-system, sans-serif