Typography
Type families, scales, and presets.
Type families
var(--font-heading) (Outfit)
The quick brown fox
jumps over the lazy dog
var(--font-body) (Lato)
The quick brown fox
jumps over the lazy dog
Heading presets (Outfit)
Niemeyer Design System
32px / 700 / 1.25 / -0.025emNiemeyer Design System
24px / 600 / 1.25 / -0.025emNiemeyer Design System
20px / 600 / 1.25 / 0emNiemeyer Design System
18px / 500 / 1.25 / 0emNiemeyer Design System
16px / 500 / 1.25 / 0emNiemeyer Design System
14px / 600 / 1.25 / 0.025emNiemeyer Design System
12px / 600 / 1.25 / 0.025emBody presets (Lato)
Default text for paragraphs and main page content.
16px / 400 / 1.5Secondary text for descriptions, subtitles, and supporting content.
14px / 400 / 1.5Small text for footnotes, timestamps, and metadata.
12px / 400 / 1.5Large text for intros and content highlights.
18px / 400 / 1.75Form labels and field titles.
14px / 600 / 1.25Helper text and field captions.
12px / 400 / 1.5Size scale
| Name | Size | Class | Example |
|---|---|---|---|
| xs | 12px | text-xs | Morada |
| sm | 14px | text-sm | Morada |
| base | 16px | text-base | Morada |
| lg | 18px | text-lg | Morada |
| xl | 20px | text-xl | Morada |
| 2xl | 24px | text-2xl | Morada |
| 3xl | 32px | text-3xl | Morada |
Weights
Light — Niemeyer Design System
Regular — Niemeyer Design System
Medium — Niemeyer Design System
Semibold — Niemeyer Design System
Bold — Niemeyer Design System
Black — Niemeyer Design System