# ENTIA Typography

## Primary face — Inter

Source: Google Fonts. Loaded with `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap')`.

Used in: `mcp-setup.html`, `mcp-docs.html`, `partners.html`, `funnel.html`, `index.html`, MC dashboard (`static/ceo_v2/`).

Weights loaded: 300, 400, 500, 600, 700, 800, 900. Weight 100/200 are NOT loaded — do not use.

```css
font-family: 'Inter', sans-serif;
```

## Mono face — JetBrains Mono

Source: Google Fonts. Loaded alongside Inter.

```css
font-family: 'JetBrains Mono', monospace;
```

Weights loaded: 400, 500. (legacy `colors_and_type.css` also loads 600, 700 — keep available.)

Use for: code blocks, CTA buttons (`.nav-cta`), stat values (`.stat-value`), small labels under wordmark (`Defining AI Trust`).

## Legacy / deprecated

| Face | Status | Where it still appears |
|---|---|---|
| **DM Sans** | Legacy — kept only in `colors_and_type.css` and `entia-footer.js`. Do NOT use in new landings. | Older landings that still link `colors_and_type.css`; footer component injects DM Sans via `@import`. |
| **Outfit** | Removed in v19.1 (memory: "no Outfit, no Orbitron for body"). Some legacy templates may still reference it. Replace with Inter. | Funnel.html (already migrated). Older blog posts. |
| **Orbitron** | Forbidden in body copy. Allowed only inside dashboard data-viz that Fer has explicitly approved. | A few legacy stat counters. |

When migrating a page off DM Sans / Outfit / Orbitron: replace with **Inter** for body and headings, **JetBrains Mono** for code and numeric/CTA accents.

## Type scale (extracted from `mcp-setup.html`)

| Role | Size | Weight | Color | Notes |
|---|---|---|---|---|
| `h1` | 2.5rem (40px) | 900 | `#fff` | `letter-spacing:-.02em; line-height:1.15` |
| `h2` | 1.5rem (24px) | 800 | `#fff` | `margin-top:3rem; margin-bottom:1rem` |
| `h3` | 1rem (16px) | 700 | `#e0e0e8` | `margin-top:1.5rem` |
| `p` body | .875rem (14px) | 400 | `#8b949e` | `line-height:1.75` |
| `code` / `pre` | 12px | 400 | `#e6edf3` | JetBrains Mono |
| `.section-label` | 10px | 900 | `var(--blue) #3B82F6` | uppercase, `letter-spacing:.3em` |
| `.client-name` | 1.25rem (20px) | 800 | `#fff` | — |
| `.client-desc` | .8rem (12.8px) | 400 | `#8b949e` | — |
| `.stat-value` | 1.25rem (20px) | 900 | `#fff` | JetBrains Mono |
| `.stat-label` | 9px | 400 | `#8b949e` | uppercase, `letter-spacing:.15em` |
| `.copy-btn` | 10px | 700 | `#60a5fa` | JetBrains Mono, uppercase, `letter-spacing:.1em` |
| `.nav-links a` | 11px | 500 | `#A0A0C0` | uppercase, `letter-spacing:.08em` |
| `.nav-cta` | 11px | 700 | `#fff` | JetBrains Mono, uppercase, `letter-spacing:.06em` |
| Wordmark `ENTIA` (nav) | 16px | 800 | `#fff` (`IA` in `#3B82F6`) | `letter-spacing:.06em` |
| Wordmark tagline | 7px | 400 | `#A0A0C0` | JetBrains Mono, uppercase, `letter-spacing:.18em` |
| `.badge` | 9px | 800 | varies (status) | uppercase, `letter-spacing:.15em` |

## Hero scale (`index.html`, `funnel.html`)

| Role | Size mobile | Size desktop |
|---|---|---|
| Hero `h1` | 1.75rem (28px) | up to 4rem (64px) |
| Hero subtitle | 1rem (16px) | 1.25rem (20px) |

Mobile breakpoint: `@media (max-width:900px) { h1 { font-size: 1.75rem } }`

## Letter-spacing rules

| Use | tracking |
|---|---|
| Body `p` | default (0) |
| Headings `h1`–`h2` | `-0.02em` (slight tight) |
| Nav links | `.08em` uppercase |
| Wordmark tagline | `.18em` uppercase |
| Section labels | `.3em` uppercase |
| Stat labels | `.15em` uppercase |
| CTA buttons | `.06em` to `.1em` uppercase |

Rule of thumb: anything UPPERCASE has at least `.06em` tracking, never default.

## Text-transform rules

- `uppercase` — section labels, badges, nav links, CTAs, stat labels, tagline
- Default — headings, body, code

## Font import line (canonical)

Place once in the `<head>` or a shared CSS file:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

Or, equivalently in CSS:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
```

## Accessibility

- Body color `#8b949e` on `#010409` — contrast 5.4 : 1, passes WCAG AA for body but NOT AAA.
- For long-form prose (blog, methodology), prefer `#c9d1d9` (`<body>` default in `mcp-setup.html`) — contrast 11.6 : 1.
- Never set body text below 14px (.875rem). The 9-12px sizes are reserved for labels, badges, captions.
