Two faces, and only two. Nunito Variable carries display, body, and UI chrome; IBM Plex Mono carries meta lines and code. There is no serif and no second sans — the warmth comes from weight contrast (800 against 400), not from mixing faces.
Nunito Variable is bundled locally (OFL, via @fontsource-variable/nunito — no CDN); it carries a 200–1000 weight axis, so every weight below is a real instance rather than synthetic bolding. IBM Plex Mono has no bundled fallback and renders from the visitor's system. Always use the CSS variable token; never reference the font name directly in code.
Font Families
Weights
300 The quick brown fox jumps over the lazy dog
400 The quick brown fox jumps over the lazy dog
600 The quick brown fox jumps over the lazy dog
700 The quick brown fox jumps over the lazy dog
900 The quick brown fox jumps over the lazy dog
Size scale
--text-xs 12px Aa
--text-sm 14px Aa
--text-base 16px Aa
--text-lg 18px Aa
--text-xl 20px Aa
--text-2xl 24px Aa
--text-3xl 30px Aa
--text-4xl 36px Aa
Weights
300 The quick brown fox jumps over the lazy dog
400 The quick brown fox jumps over the lazy dog
500 The quick brown fox jumps over the lazy dog
600 The quick brown fox jumps over the lazy dog
700 The quick brown fox jumps over the lazy dog
Size scale
--text-xs 12px Aa
--text-sm 14px Aa
--text-base 16px Aa
--text-lg 18px Aa
--text-xl 20px Aa
--text-2xl 24px Aa
--text-3xl 30px Aa
--text-4xl 36px Aa
Weights
400 The quick brown fox jumps over the lazy dog
500 The quick brown fox jumps over the lazy dog
Size scale
--text-xs 12px Aa
--text-sm 14px Aa
--text-base 16px Aa
--text-lg 18px Aa
--text-xl 20px Aa
--text-2xl 24px Aa
--text-3xl 30px Aa
--text-4xl 36px Aa
Weights
400 The quick brown fox jumps over the lazy dog
500 The quick brown fox jumps over the lazy dog
600 The quick brown fox jumps over the lazy dog
Size scale
--text-xs 12px Aa
--text-sm 14px Aa
--text-base 16px Aa
--text-lg 18px Aa
--text-xl 20px Aa
--text-2xl 24px Aa
--text-3xl 30px Aa
--text-4xl 36px Aa
Type Scale
This is a measured scale, not a modular one — the steps come from a live audit rather than a ratio, which is why --text-xs and --text-sm are the same size and the jump from 32px to 44px is wide. Use the rem tokens; never hardcode a size.
--text-xs
0.875rem
14px
The quick brown fox
--text-sm
0.875rem
14px
The quick brown fox
--text-base
1rem
16px
The quick brown fox
--text-lg
1.125rem
18px
The quick brown fox
--text-xl
1.25rem
20px
The quick brown fox
--text-2xl
1.5rem
24px
The quick brown fox
--text-3xl
2rem
32px
The quick brown fox
--text-4xl
2.75rem
44px
The quick brown fox
--text-5xl
4.5rem
72px
The quick brown fox
Line Heights
Paired with the scale above. Headings at 44px use --leading-h1 (1.18) and --tracking-tight (−0.01em); tightening the tracking is what keeps an 800-weight headline from feeling loose.
--leading-hero
1.11
72px display
--leading-h1
1.18
44px h1 and h2
--leading-sub
1.25
32px h3
--leading-h3
1.33
24px h4
--leading-normal
1.5
Body copy
--leading-relaxed
1.625
Long-form prose blocks
--leading-btn
1.375rem
Button label (22px absolute)
Font Weights
Display is 800 and body is 400 — that gap is the system's main source of hierarchy, since both are the same face. The three weights between them are for UI chrome, not for headings. IBM Plex Mono supports 400–500 only.
--font-weight-regular
400
regular — Body copy, nav links
--font-weight-medium
500
medium — Input labels, active nav
--font-weight-semibold
600
semibold — Button labels, table headers, h4
--font-weight-bold
700
bold — h3, badges, emphasis
--font-weight-display
800
display — h1, h2, wordmark
Usage Guidelines
Nunito Variable
--font-display
- Page headings (h1–h3)
- Hero and marketing text
- Brand moments that need warmth
- Sidebar logo mark
Set at weight 800 with --tracking-tight. Same face as --font-body — kept as a separate token so display can diverge later without a rebrand
Nunito Variable
--font-body
- All body copy and prose
- Card descriptions and long-form text
- The default for any running text block
Set at weight 400. The rounded, humanist register that keeps long pages readable without going childish
IBM Plex Mono
--font-mono
- Code blocks and inline code
- Card meta lines (durations, hashes, counts)
- Token names in the design system
- File paths and terminal output
Never for prose. Card meta lines use the .card-meta class: 11px at --card-meta-color
Nunito Variable
--font-ui
- Button labels and nav items
- Form inputs, helper text, tooltips
- Tight UI controls
- Data tables and list metadata
Button labels are 16px/22px at weight 600. Same face as --font-display and --font-body — kept separate so UI chrome can diverge from content
