# Typography

The design system uses **Rubik** as the primary typeface. Font sizes are expressed in `rem` units computed from a 14px base.

## Type Scale

All sizes are derived from `scale-font-size($size)` which computes `calc($size / 14) + 0rem`.

| Token / Element | Size (px equiv) | Weight | Line Height | Usage |
|---|---|---|---|---|
| `h0` | 32px | 400 | 38px | Hero / display headings |
| `h1` | 24px | 400 | 32px | Page titles |
| `h2` | 20px | 500 | 28px | Section headings |
| `h3` | 18px | 400 | 24px | Sub-section headings |
| `h4` | 16px | 400 | 22px | Card / panel titles |
| `h5` | 16px | 500 | 22px | Label-level headings |
| `h6` | 12px | 500 | 18px | Micro labels, captions |
| Base | 14px | 400 | 1.429 (20px) | Body text |
| Large | 18px | — | — | Large body text |
| Small | 12px | — | 1.5 (18px) | Helper text, captions |

## Font Weights

| Weight | Value | Usage |
|---|---|---|
| Light | 300 | Rare — decorative display only |
| Normal | 400 | Body text, default |
| Bold | 500 | Labels, headings, strong emphasis |

Note: the system defines "bold" as weight 500 (medium), not 700.

## Font Stack

```
rubik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
```

## Using Type in Components

- Use heading elements (`<h1>`–`<h6>`) for semantic structure, not for visual sizing.
- For visual-only size control, use the CSS classes `.h1`–`.h6` provided by Bootstrap or apply `font-size` from the token scale.
- The `PageHeader` component renders the page title at `h1` scale.
- `Section.Header` titles render at `h4` scale.
- Alert titles render as `<h5>`.

## Decision Tree: Choosing Type Scale

```
Top-level page title? → h1 (PageHeader.Title)
Section heading? → h2 or h3 (Section.Title)
Card or panel title? → h4
Form label? → use Label component (renders at base/h5 scale)
Caption / helper text? → small / h6 scale
Body / reading content? → base (14px, weight 400)
```

## Common Mistakes

- Do NOT use `font-size: 14px` — use `$font-size-base` or the computed rem value.
- Do NOT use font-weight 700 — the system caps at 500.
- Do NOT create custom heading elements — use `PageHeader`, `Section`, and `Card` components which apply correct typography automatically.