Typography

Typography is the fastest way to make a system feel intentional. The editor lets you pick stacks, define a type ramp, and tune line-heights — all with a live preview that uses real prose so you can spot issues that synthetic samples hide.

Font stacks

Two stacks ship by default: sans and mono. Add a serif stack when you have an editorial brand. Each stack is a CSS font-family value — load fonts in your app's CSS or via <link> tags; the editor doesn't load them for you.

sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif
mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace
serif: "Source Serif 4", "Iowan Old Style", Georgia, serif

The first family is the primary; the rest are fallbacks the browser walks if the primary fails to load. Always keep a final generic family (sans-serif, monospace, serif) as the last fallback.

The type ramp

Six size stops by default — xs / sm / base / lg / xl / 2xl. Tune the values until the visual rhythm feels right; common ramps:

| Mood | xs | sm | base | lg | xl | 2xl | |------|----|----|------|----|----|------| | Tight | 12 | 13 | 14 | 16 | 20 | 28 | | Standard | 12 | 14 | 16 | 18 | 24 | 32 | | Editorial | 14 | 16 | 18 | 22 | 32 | 48 |

Pair each size with a line-height. Smaller sizes want tighter ratios (1.4–1.5); larger sizes want looser (1.0–1.2 for display headings). The editor's preview shows real paragraphs at every size so you can spot lines that feel cramped or floaty.

Letter-spacing + font-weight

The editor exposes letter-spacing and font-weight per size. Defaults are sane (no tracking adjustments, regular weight) — only override when the brand has a specific opinion.

Display headings often want negative tracking (-0.02em to -0.04em) to feel snappier. Body text rarely benefits from any tracking adjustment.