# Rolocode — Typography

Three typefaces, all open-source (SIL OFL) — free for commercial print and web.

| Role            | Typeface          | Where                                   |
|-----------------|-------------------|-----------------------------------------|
| Display / headings | **Space Grotesk** | Titles, the "rolocode" UI wordmark, big numbers |
| Body / UI       | **Inter**         | Paragraphs, labels, tables, invoices    |
| Mono / code     | **JetBrains Mono**| Code, IDs, invoice numbers, data        |

Get them: [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) ·
[Inter](https://fonts.google.com/specimen/Inter) ·
[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)
(all on Google Fonts / Fontsource).

## CSS stacks

```css
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
```

## Scale (responsive `clamp()`)

| Token   | Size (clamp)                          | Tracking | Line  |
|---------|---------------------------------------|----------|-------|
| Display | `clamp(2.85rem, 1.2rem + 7vw, 7rem)`  | -0.035em | 0.92  |
| H1      | `clamp(2.25rem, 1.4rem + 4vw, 4.25rem)`| -0.03em | 1.0   |
| H2      | `clamp(1.85rem, 1.2rem + 2.6vw, 3.25rem)`| -0.025em| 1.05 |
| H3      | `clamp(1.3rem, 1.05rem + 1vw, 1.85rem)`| -0.02em | 1.15  |
| Lead    | `clamp(1.05rem, 0.95rem + 0.55vw, 1.375rem)`| —   | 1.55  |
| Body    | `1rem`                                | —        | 1.6   |

## Notes

- **Headings:** Space Grotesk, semibold (600–700), tight tracking. Lowercase for
  the wordmark; sentence case for headlines.
- **The wordmark is Space Grotesk** — weight **600**, tracking **−1.75%**, all
  lowercase, off-white (`#ECECF1`) on dark / near-black (`#0A0A0F`) on light.
  The lockup/wordmark SVGs ship it **outlined to curves**, so they render
  identically everywhere with no font installed. Don't retype it — use the
  lockup files. (The original `.ai` used a rounded face; we standardised on
  Space Grotesk to match the website. See `source/` for the legacy artwork.)
- **Documents/print:** Inter for everything, JetBrains Mono for invoice numbers,
  totals, and IDs so columns align.

For print without web fonts installed, fall back gracefully to system sans
(`system-ui`) — the layout tokens above keep proportions intact.