# Grupo EIC — Typography

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

| Role               | Typeface              | Where                                          |
|--------------------|-----------------------|------------------------------------------------|
| **Logotype**       | **Archivo Expanded**  | The "EIC" lettermark / wordmark (caps, bold)   |
| Display / headings | **Fraunces**          | Editorial titles, big serif statements on site |
| Body / UI          | **Geist**             | Paragraphs, labels, tables, UI                 |
| Mono / data        | **JetBrains Mono**    | The "GRUPO" label, eyebrows, codes, coordinates|

Get them: [Archivo](https://fonts.google.com/specimen/Archivo) ·
[Fraunces](https://fonts.google.com/specimen/Fraunces) ·
[Geist](https://fonts.google.com/specimen/Geist) ·
[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)
(all on Google Fonts / Fontsource).

## CSS stacks

```css
--font-logo:    'Archivo', 'Arial Narrow', Helvetica, sans-serif; /* font-stretch: 125% */
--font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
--font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
--font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
```

## The wordmark

The logotype leads with the brand asset, **EIC**, and demotes the qualifier
**GRUPO** to a tracked mono label — so the wordmark speaks the same
"classified-readout" language as the rest of the system instead of an editorial
serif.

- **"EIC"** — **Archivo**, **Expanded** axis (`font-stretch: 125%`), weight
  **700**, ALL CAPS, tracking **+1.2%**, signature-gradient fill. The grotesque
  gives signage/agency authority and holds at any size, down to the favicon.
- **"GRUPO"** — **JetBrains Mono**, weight **500**, ALL CAPS, tracking
  **+22%**, flat ink (never gradient — the gradient stays on "EIC" and the
  radar). Set as a small eyebrow (~26% of the EIC cap height) above the cap line,
  left-aligned to "EIC".
- The logo SVGs ship the wordmark **outlined to curves**, so they render
  identically everywhere with no font installed. **Don't retype it** — use the
  lockup / wordmark files.

> The previous logotype used Fraunces (an editorial display serif); it read
> boutique/lifestyle, at odds with an intelligence firm, and its hairline strokes
> collapsed at logo scale. Fraunces stays on the **site** for editorial headings,
> but it is no longer the logotype.

## Scale (fluid `clamp()`, from the site tokens)

| Token   | Size (clamp)                                  | Tracking | Line |
|---------|-----------------------------------------------|----------|------|
| Hero    | `clamp(3.25rem, 2.1rem + 6.5vw, 8.25rem)`     | -0.03em  | 0.94 |
| 3xl     | `clamp(2.625rem, 2rem + 2.8vw, 4.875rem)`     | -0.03em  | 0.94 |
| 2xl     | `clamp(2rem, 1.65rem + 1.5vw, 3.25rem)`       | -0.025em | 1.08 |
| xl      | `clamp(1.625rem, 1.45rem + 0.85vw, 2.25rem)`  | -0.015em | 1.08 |
| Lead    | `clamp(1.0625rem, 1.02rem + 0.30vw, 1.1875rem)`| —       | 1.45 |
| Body    | `clamp(0.95rem, 0.92rem + 0.22vw, 1.0625rem)` | —        | 1.45 |

## Notes

- **Headings:** Fraunces, semibold (600–700), tight tracking. Display serif gives
  the firm its institutional, "broadsheet intelligence" authority.
- **Eyebrows / labels:** JetBrains Mono, uppercase, tracking **+0.16em** to
  **+0.22em** — the classified-document, coordinate-readout texture.
- **Body:** Geist for everything; tabular numerals for any stately numeric run.
- For print without web fonts, fall back gracefully to system serif/sans — the
  layout tokens keep proportions intact.

Mirrors the website tokens in `src/styles/tokens.css` (`--font-*`, `--fs-*`).