# Font & Type Rules

## Quick Answer
- English: **Pangram Sans** (licensed)
- Korean: **Spoqa Han Sans Neo** (free)
- Font files (Regular, Medium, Semibold included):
    - [Pangram Sans Regular](../../brand-kit/fonts/pangram-sans/PPPangramSans-Regular.otf) · [Medium](../../brand-kit/fonts/pangram-sans/PPPangramSans-Medium.otf) · [Semibold](../../brand-kit/fonts/pangram-sans/PPPangramSans-Semibold.otf)
    - [Spoqa Han Sans Neo Regular](../../brand-kit/fonts/spoqa-han-sans-neo/SpoqaHanSansNeo-Regular.ttf) · [Medium](../../brand-kit/fonts/spoqa-han-sans-neo/SpoqaHanSansNeo-Medium.ttf) · [Bold](../../brand-kit/fonts/spoqa-han-sans-neo/SpoqaHanSansNeo-Bold.ttf)
- Office tool fallback (Google Docs, Slides, Notion, etc.): English **Arial**, Korean **Apple SD Gothic Neo** (Windows: Malgun Gothic). Installing Pangram Sans locally does not make it available in Google Docs or Slides — use the fallback font in web-based tools.
- Body text: Regular (400). Headings and numbers: Medium (500).

## Installing Fonts (Mac)
1. Open the font files linked above.
2. Double-click each file.
3. Click "Install Font" — done.

## Size Scale

| Name | Size | When to Use |
| --- | --- | --- |
| Display 01 | 3.5 rem (56 px) | Hero headline, campaign headline |
| Display 02 | 2 rem (32 px) | Page title, large section heading |
| Display 03 | 1.75 rem (28 px) | Section heading, large panel title |
| Display 04 | 1.5 rem (24 px) | Panel title, marketing block heading |
| Headline 01 | 1.125 rem (18 px) | Card title, module heading |
| Headline 02 | 1 rem (16 px) | Small heading, list section heading |
| Body 01 | 0.9375 rem (15 px) | Default body, short descriptions |
| Body 02 | 0.8125 rem (13 px) | Secondary text, help text, small labels |
| Caption | 0.75 rem (12 px) | Captions, low-emphasis notes |
| Caption S | 0.6875 rem (11 px) | Timestamps, tiny labels (never for buttons or alerts) |

For CSS, use the `--dv-font-size-*` variables from [`diveroid.css`](../../_system/tokens/diveroid.css).

## Letter Spacing

| Context | Korean | English |
| --- | --- | --- |
| Headings (28 px+) | −2% | −1% |
| Body | −1% | 0 |
| Captions | 0 | 0 |
| Numbers / dive data | 0 | 0 |

- Korean body line-height should be generous (1.45 or higher). Do not reduce line-height to fit layout.
- Korean text must not break mid-word (`word-break: keep-all`).

## Font Weights

| Weight | Where to Use |
| --- | --- |
| Regular 400 | Body, long descriptions |
| Medium 500 | Headings, numbers/data |
| Semibold 600 | Emphasis, buttons, badges |

## Numbers & Dive Data
- Depth, time, temperature: use Pangram Sans Medium with **tabular figures** (fixed-width digits). CSS: `font-variant-numeric: tabular-nums`.
- Attach units directly: `32.4 m`, `48 min`.
- When data is missing, show "N/A" — never show 0.

## Do Not
- Use a different font — only the two brand fonts and their fallbacks.
- Use large Display text for alerts, status indicators, or dense data screens.
- Tighten Korean line-height or letter-spacing to match English metrics.