# Typography — Full Reference


---

## Font

**Roboto** — the only typeface in the system.

---

## Weights

Only two weights available:

| Weight   | Value | Usage |
|----------|-------|-------|
| Regular  | 400   | Body text, descriptions, reading content |
| SemiBold | 600   | Headings, important labels, emphasis |

---

## Global Size Scale

All tokens share: `font-family: Roboto`, `letter-spacing: 0.2px`.

| Token       | font-size | line-height | font-weight |
|-------------|-----------|-------------|-------------|
| Global-XXXS | 10px      | 1.4 (140%)  | 400 Regular |
| Global-XXS  | 12px      | 1.4 (140%)  | 400 Regular |
| Global-XS   | 14px      | 1.4 (140%)  | 400 Regular |
| Global-S    | 16px      | 1.4 (140%)  | 400 Regular |
| Global-M    | 18px      | 1.4 (140%)  | 400 Regular |
| Global-L    | 24px      | 1.4 (140%)  | 400 Regular |
| Global-XL   | 32px      | 1.3 (130%)  | 400 Regular |
| Global-XXL  | 36px      | 1.4 (140%)  | 400 Regular |

> **Note:** Global-XL is the only token with line-height 1.3 instead of 1.4.

---

## CSS — How to Apply Tokens

```css
/* Global-XXXS */
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.2px;

/* Global-XXS */
font-size: 12px;
line-height: 1.4;

/* Global-XS */
font-size: 14px;
line-height: 1.4;

/* Global-S */
font-size: 16px;
line-height: 1.4;

/* Global-M */
font-size: 18px;
line-height: 1.4;

/* Global-L */
font-size: 24px;
line-height: 1.4;

/* Global-XL */
font-size: 32px;
line-height: 1.3; /* exception */

/* Global-XXL */
font-size: 36px;
line-height: 1.4;

/* SemiBold — apply on top of any scale token */
font-weight: 600;
```

---

## Application Rules

- Use `font-weight: 400` by default for all reading text
- Use `font-weight: 600` for headings and emphasis elements
- **Do not use other weights** (300, 700, 800, etc.) — they don't exist in the system
- **Do not change letter-spacing** — always 0.2px
- The 1.3 line-height is exclusive to Global-XL
