04 — Type · source of truth

Poppins for display. Montserrat for body.

Two typefaces, two roles — and they don’t swap. Poppins carries authority; Montserrat carries clarity. The pairing works because they share geometric DNA without competing at the same weight.

Poppins · 700 · 40/48Display / H1
Poppins · 600 · 30/38Heading / H2
Poppins · 600 · 22/30Subheading / H3
Montserrat · 400 · 16/26Body text — the workhorse. Restraint reads as confidence.
Montserrat · 400 · 14/22Small / caption

rem-based sizing and browser-zoom rules are covered in Accessibility → Text & zoom.

Type playground

Edit this field to see your copy across the full type scale.
Poppins · 700 · 40/48The mark is a razor blade.
Poppins · 600 · 30/38The mark is a razor blade.
Poppins · 600 · 22/30The mark is a razor blade.
Montserrat · 400 · 16/26The mark is a razor blade.
Montserrat · 400 · 14/22The mark is a razor blade.

Pairing rationale

Poppins — display & UI

Geometric sans-serif with optically uniform strokes. Strong at large sizes; retains legibility at 12px for mono-style labels. Weight range 500–700 covers the full display hierarchy without needing a third typeface.

Montserrat — body & caption

Also geometric, but with wider tracking and slightly more open apertures — it breathes at body size where Poppins would feel dense. Use 400 for prose, 500 or 600 for labelling within a body context.

▲ Do
  • Use Poppins for display, headings, labels, and button text
  • Use Montserrat for body copy and captions — 16px minimum for prose
  • Maintain the hierarchy: one Display, one Heading per view, body beneath
  • Let line-length do the pacing — 60–80 characters per line for body
▼ Don’t
  • Mix Poppins and Montserrat at the same size or weight
  • Use decorative or brand-adjacent typefaces for any UI element
  • Set body copy below 14px or body line-height below 1.5
  • Use a heading weight (600 / 700) for long stretches of prose