Typography
Two pages here: Font Family for setting up your font choices, and Type Scale for the size system.
Font Family
Pairings
Four presets to start from:
| Preset | Fonts |
|---|---|
| Classic | Inter · Libre Baskerville · Roboto Mono |
| Modern | Roboto · Lora · Fira Code |
| Editorial | Open Sans · Playfair Display · Roboto Mono |
| Minimal | Inter · Source Serif Pro · JetBrains Mono |
Click one to load it. Each preset assigns a font to three roles.
Font roles
You assign fonts to three roles:
| Role | What it's for |
|---|---|
| sans | Body text, UI labels, most of the interface |
| serif | Long-form reading, editorial content, secondary style |
| mono | Code, data tables, fixed-width content |
Each role has a dropdown to pick the font and a live preview below it showing how it reads in full sentences. Useful for catching that a font you thought looked good is actually awkward at body size.
Type Scale
A type scale is a set of font sizes that grow in a consistent pattern. Rather than picking sizes by feel, you define a mathematical progression and get a set of steps that look intentional next to each other.
Linear vs Geometric
Linear (Fixed step) adds a fixed amount to each size. Geometric (Multiplied) multiplies by a ratio, which creates a more natural visual jump between steps. Geometric is more common in design systems.
Base size
Set the root font size in px. Everything else is calculated from this. 16px is a common starting point.
Ratio
In Geometric mode, pick from the dropdown:
| Ratio | Name |
|---|---|
| 1.067 | Minor Second |
| 1.125 | Major Second |
| 1.2 | Minor Third |
| 1.25 | Major Third |
| 1.333 | Perfect Fourth |
| 1.414 | Augmented Fourth |
| 1.5 | Perfect Fifth |
| 1.618 | Golden Ratio |
Minor Third (1.2) and Major Third (1.25) are solid choices for most interfaces. The jumps are noticeable enough to create hierarchy without feeling dramatic.
Count
How many steps to generate. The guide creates tokens for each step above the base.
Preview
Each step gets a sample heading so you can see the relative sizes. Each row shows the token name, size in px, weight, line height, and letter spacing.