04 — Typography
Typography
Display
PP Fragment
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? ! @ # — *
Aa Bb Cc — A serif with a contemporary edge.
Body
PP Radio Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? ! @ # — *
The quick brown fox jumps over the lazy dog. 1234567890.
Mono
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? ! @ # — *
const brand = identity.systematise();
Hierarchy
- display Display clamp(2.5rem, 6vw, 4.5rem)
- h1 H1 clamp(2.25rem, 5vw, 3.75rem)
- h2 H2 clamp(1.5rem, 3vw, 2.25rem)
- h3 H3 1.5rem
- body Body 1rem
- small Small 0.875rem
Usage
| Role | Family | Weight | Notes |
|---|---|---|---|
| Display | PP Fragment | Regular | Headlines and titles. Italic variants permitted. |
| Headings | PP Fragment | Regular | Section headers. Avoid bold weights. |
| Body | NB International Pro | Regular, 400 | All paragraph copy. Line-height 1.55. |
| UI | NB International Pro | Medium, 500 | Buttons, labels, navigation. |
| Mono | JetBrains Mono | Regular | Code samples and tabular data only. |