# 05 · Typography

> Three faces, three jobs. Lora for what you are meant to feel, DM Sans for what
> you are meant to do, Geist Mono for what the machine said.

---

## 5.1 The three faces

| Face | Role | Where |
|---|---|---|
| **Lora** | Display | Page titles, hero lines, section headings. Nothing else |
| **DM Sans** | Interface and body | Everything that is not a heading and not machine data |
| **Geist Mono** | Machine data | IDs, emails, slugs, keys, timestamps, shortcuts, the `//` device |

All three are on Google Fonts, free, and already loaded by both `sincelabs.com`
and `sincelabs/app`. Load them with `next/font/google`:

```ts
import { Lora, DM_Sans, Geist_Mono } from "next/font/google";

const lora     = Lora({ variable: "--font-lora", subsets: ["latin"], display: "swap" });
const dmSans   = DM_Sans({ variable: "--font-dm-sans", subsets: ["latin"], display: "swap" });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], display: "swap" });
```

**Fallbacks**, for email and anywhere a webfont will not load:

| Brand face | Fallback stack |
|---|---|
| Lora | `Georgia, 'Times New Roman', serif` |
| DM Sans | `system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` |
| Geist Mono | `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` |

### ⚠️ Cormorant Garamond and Inter are not the brand faces

The Notion "Brand Design System Skills" doc names Cormorant Garamond and Inter.
That was written from a visual read of the site, before the token files were
inspected. The shipped CSS on both properties is **Lora, DM Sans and Geist
Mono**. Update the Canva brand kit to match.

---

## 5.2 Why a serif at all

Because everyone else uses Inter, and because it is the fastest way to say *this
was written by a person, not generated by a platform*. The serif is the brand's
warmth, and it is the reason the identity survives being screenshotted next to a
competitor.

**Use it sparingly.** Lora appears on page titles and hero lines, and nowhere
else. A serif paragraph or a serif button label reads as a magazine, not as
software. The discipline is what keeps the serif meaning something.

---

## 5.3 The scale

| Name | Size | Line | Tracking | Face | Use |
|---|---|---|---|---|---|
| Hero | 42px | 1.1 | −0.02em | Lora | Marketing hero. One per page |
| Title | 28px | 1.15 | −0.7px | Lora | Page title (h1). The `PageHeader` size |
| Section | 20px | 1.3 | −0.01em | Lora | Major section heading |
| Panel | 15px | 1.4 | 0 | DM Sans 600 | Panel and card headings |
| Body | 14px | 1.6 | 0 | DM Sans 400 | Prose, form values, buttons |
| UI | 13.5px | 1.5 | 0 | DM Sans 400 | Nav rows, table cells, list items |
| Secondary | 12.5px | 1.5 | 0 | DM Sans 400 | Captions, hints, metadata |
| Eyebrow | 12px | 1.4 | **+0.08em** | DM Sans 500 caps | ALL-CAPS section labels |
| Micro | 11px | 1.4 | 0 | DM Sans 500 | Chips, badges, keyboard hints |

**11px is the floor.** Nothing in a Since Labs interface is smaller, ever.

**Weights:** 400 regular, 500 medium, 600 semibold, 700 bold (wordmark only).
There is no light weight and no black weight in this brand.

**Tracking:** negative on display sizes (large type sets loose), zero on
interface text, and **+0.08em on the eyebrow only**. Letter-spaced body copy is
not a Since Labs thing.

---

## 5.4 The italic move

The brand's single most distinctive typographic gesture:

> **Serif italic, in terracotta, on the one phrase that matters.**

```
Since we started, <em>everything changed.</em>
```

Rules, and they are strict:

- **One per surface.** A hero line, or a pull quote. Not both.
- **Never in body copy.** It loses all its power the second time it appears.
- Colour it `accent-ink` `#A34A1F`, not `accent` — it is text.
- The italic phrase must be the thing you would want someone to remember if they read nothing else.

---

## 5.5 The mono rule

Geist Mono means **"a machine said this"**. It is not a decorative face and it is
not for emphasis.

**Set in mono:**
- Identifiers — user IDs, org IDs, product keys, slugs
- Email addresses in operator tables
- Timestamps and dates in logs
- Audit-log action names, HTTP status, error codes
- Keyboard hints — `⌘K`, `esc`, `↵`
- Counts in a nav badge
- The `//` device

**Never in mono:**
- Body copy, headings, button labels
- A person's name
- A number that is a *quantity* rather than an *identifier* — `147 members` is DM Sans with `tabular-nums`, not mono

This distinction is load-bearing. It is how an operator scanning a table knows,
without reading, which column is a thing they can copy into a support ticket.

---

## 5.6 Rules that hold everywhere

**Sentence case.** Headings, buttons, labels, table headers, menu items. The
eyebrow is the only uppercase in the system.

**Measure.** Prose caps at **62ch**. Captions and helper text at **46ch**. Past
that, a reader loses the line return.

**Hierarchy comes from size and weight, not colour.** A heading is a heading
because it is bigger, not because it is orange.

**One h1 per page**, and it is the `PageHeader` title. Do not skip levels —
h1 → h2 → h3, never h1 → h3.

**Numbers in columns are `tabular-nums`.** Always. Proportional figures in a
table make a column of amounts impossible to compare at a glance.

**Emphasis is `<strong>` in `ink`,** not colour, not italic, not caps.

---

## 5.7 Do and don't

**Do**
- ✅ Use Lora for titles and hero lines only
- ✅ Keep the italic-terracotta move to one phrase per surface
- ✅ Set identifiers in mono and quantities in tabular sans
- ✅ Cap prose at 62ch

**Don't**
- ❌ Set body copy in Lora
- ❌ Use Title Case
- ❌ Letter-space anything but the eyebrow
- ❌ Go below 11px
- ❌ Introduce a fourth typeface — including Inter, Geist Sans, or Cormorant
- ❌ Use colour as the only signal that text is a heading