Typography
Type scale, weights, and the font hook variables.
Plinth uses a compact, application-first type scale: body text defaults to 14px
(--text-base), which is the norm for dense product UI. Marketing surfaces
step up to --text-md and above.
Scale
--text-xs
0.75rem · 12px
0.75rem · 12px
The quick brown fox jumps over the lazy dog
--text-sm
0.8125rem · 13px
0.8125rem · 13px
The quick brown fox jumps over the lazy dog
--text-base
0.875rem · 14px
0.875rem · 14px
The quick brown fox jumps over the lazy dog
--text-md
1rem · 16px
1rem · 16px
The quick brown fox jumps over the lazy dog
--text-lg
1.125rem · 18px
1.125rem · 18px
The quick brown fox jumps over the lazy dog
--text-xl
1.25rem · 20px
1.25rem · 20px
The quick brown fox jumps over the lazy dog
--text-2xl
1.5rem · 24px
1.5rem · 24px
The quick brown fox jumps over the lazy dog
--text-3xl
1.875rem · 30px
1.875rem · 30px
The quick brown fox jumps over the lazy dog
--text-4xl
2.25rem · 36px
2.25rem · 36px
The quick brown fox jumps over the lazy dog
--text-5xl
3rem · 48px
3rem · 48px
The quick brown fox jumps over the lazy dog
Usage guidance
| Token | Where |
|---|---|
--text-xs | Badges, table meta, timestamps |
--text-sm | Secondary text, helper text, menu items |
--text-base | Default UI text, inputs, buttons |
--text-md | Emphasized body, marketing body |
--text-lg – --text-xl | Card titles, section headings |
--text-2xl – --text-3xl | Page titles |
--text-4xl – --text-5xl | Hero and display |
Fonts
The system reads --plinth-font-sans and --plinth-font-mono and falls back to
the platform UI stack, so it looks right even before you load a webfont. See
Theming.
Weights
Plinth uses three weights only: regular (400) for body, medium (500) for UI labels and emphasis, semibold (600) for headings. Restraint here is what keeps dense screens calm.