Typography
The Apple system stack, a negative-tracking ramp, and the one non-negotiable rule about numbers.
Families
--fd: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Inter", system-ui, sans-serif;
--fm: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono",
"Liberation Mono", monospace;Mapped to --font-sans / --font-heading / --font-mono. Inter is the fallback, loaded from
Google Fonts for non-Apple platforms.
Do not import Inter unconditionally. On macOS it would override SF Pro and lose the exact look the system is calibrated for — this docs site deliberately loads no webfont at all for that reason.
Global settings
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em; /* tight global tracking, the Apple look */
}Rules
| Rule | Detail |
|---|---|
| Numbers | ALWAYS tabular-nums. Prices, sizes, PnL, percentages. No exceptions |
| Mono for data | Live prices, wallet addresses, order book, timestamps |
| Sans for content | Titles, labels, buttons, body |
| Negative tracking | The larger the text, the tighter: titles -0.02em, big numbers -0.03em → -0.035em |
| Header labels | uppercase + tracking-[0.06em → 0.1em] + font-semibold + --t3, often mono |
tabular-nums is not a polish detail in a trading UI. Proportional digits make a column of
prices ripple as the last digit ticks — the eye reads motion where there is only a re-render.
Tabular figures hold the column still.
The scale
Rendered at its real sizes:
Density
Density acts through the root font size plus a multiplier:
html[data-density="compact"] { font-size: 12px; }
html[data-density="comfortable"] { font-size: 13px; } /* default */
html[data-density="spacious"] { font-size: 14px; }
[data-density="compact"] { --density-mult: .7; }
[data-density="comfortable"] { --density-mult: 1; }
[data-density="spacious"] { --density-mult: 1.3; }Density is partly a no-op on text today. The mockup uses px sizes heavily (text-[13px]),
and px does not scale with the root font size — only rem values follow. The open decision is
(a) accept it, or (b) migrate to rem/em for true fluid density.
Structural dimensions were worked around explicitly: --density-row-h, --density-book-font,
--density-input-h and friends are overridden per html[data-density], which covers the
px-fixed spots on the trade terminal.
| Token | compact | comfortable | spacious |
|---|---|---|---|
--density-book-row-py | 1px | 3px | — |
--density-book-font | 10px | 11px | — |
--density-row-h | 32px | 40px | — |
--density-table-font | 12px | 13px | — |
--density-input-h | — | 40px | — |