Typography
Three font families cover every role in the system (Montserrat loads for BEP Pro headings). All are loaded via next/font/google and injected as CSS variables, no layout shift, no flash.
Typefaces
Instrument Serif is loaded at weight 400 only, the browser should never synthesize bold or semibold. H1 and H2 use Instrument Serif (never below 30px). H3–H6 use Atkinson Hyperlegible.
BEP Pro theme: When data-theme="bep-pro" is active, headings (H1–H6) and display utilities use Montserrat instead of Instrument Serif. Body and UI text stay on Atkinson Hyperlegible. AG Core and Navy are unchanged.
Instrument Serif
Display, H1 & H2, Regular (min 30px)
--font-display
font-heading
The quick brown fox jumps over the lazy dog
Atkinson Hyperlegible
Body, UI & H3–H6, Regular
--font-sans
font-sans
The quick brown fox jumps over the lazy dog
Geist Mono
Code & Monospace
--font-mono
font-mono
const greeting = "Hello, world!"
Display Scale
Reserved for hero moments, splash screens, and large editorial layouts. Uses Instrument Serif on AG Core and Navy; Montserrat on BEP Pro. Apply via the .text-display-78 and .text-display-60 utility classes.
Display 78
78px / −0.02em
Display
Display 60
60px / −0.02em
Display
Typography Scale
Heading 1
text-4xl · Instrument Serif
The quick brown fox
Heading 2
text-3xl · Instrument Serif
The quick brown fox
Heading 3
text-2xl · Atkinson
The quick brown fox
Heading 4
text-xl · Atkinson
The quick brown fox jumps
Body
text-base / normal
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Small
text-sm / normal
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Mono
font-mono / text-sm
const greeting = "Hello, world!"