Typography
Three font families cover every role in the system. All are loaded via next/font/google and injected as CSS variables, no layout shift, no flash.
Typefaces
Bitter is loaded at weight 400 only, the browser should never synthesize bold or semibold. All headings (H1–H6) use Bitter across every theme.
NS Pro theme: When data-theme="ns-pro" is active, headings also adopt the theme brand color. Body and UI text stay on Atkinson Hyperlegible.
Bitter
Display & H1–H6, Regular (400)
--font-display
font-heading
The quick brown fox jumps over the lazy dog
Atkinson Hyperlegible
Body & UI, Regular
--font-sans
font-sans
The quick brown fox jumps over the lazy dog
Atkinson Hyperlegible Mono
Code & Monospace
--font-mono
font-mono
const greeting = "Hello, world!"
Display Scale
Reserved for hero moments, splash screens, and large editorial layouts. Uses Bitter 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 · Bitter
The quick brown fox
Heading 2
text-3xl · Bitter
The quick brown fox
Heading 3
text-2xl · Bitter
The quick brown fox
Heading 4
text-xl · Bitter
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!"