# Typography

Typography is based on the managed `Google Sans` design family. The local runtime
loads `fonts/GoogleSans-Variable.ttf` from the official Google Sans release through
`src/styles.scss`.

## Font Family

| Token              | Value          | Usage               |
| ------------------ | -------------- | ------------------- |
| `font.family.base` | `Google Sans` | Main interface text |

## Font Size

| Token           |  Value | Usage                               |
| --------------- | -----: | ----------------------------------- |
| `font.size.100` | `11px` | Captions and compact labels         |
| `font.size.200` | `13px` | Descriptions and secondary metadata |
| `font.size.250` | `14px` | Sidebar text                        |
| `font.size.300` | `15px` | Body text and paragraph text        |
| `font.size.400` | `17px` | Actions and compact titles          |
| `font.size.500` | `19px` | Section titles                      |
| `font.size.600` | `24px` | Page titles                         |
| `font.size.700` | `34px` | Large display titles                |

## Font Weight

| Token                 | Value | Usage                             |
| --------------------- | ----: | --------------------------------- |
| `font.weight.regular` | `400` | Default text                      |
| `font.weight.medium`  | `500` | Accent text and emphasized labels |
| `font.weight.bold`    | `700` | Titles                            |
| `font.weight.code`    | `700` | Large SMS-code digits             |

## Font Height

| Token                  |  Value | Usage                               |
| ---------------------- | -----: | ----------------------------------- |
| `font.lineHeight.100`  | `14px` | 11px text                           |
| `font.lineHeight.200`  | `16px` | 13px text                           |
| `font.lineHeight.300`  | `18px` | 15px compact title text             |
| `font.lineHeight.400`  | `20px` | 14px, 15px, and 17px text           |
| `font.lineHeight.500`  | `22px` | 15px paragraph text and 19px titles |
| `font.lineHeight.600`  | `26px` | 24px titles                         |
| `font.lineHeight.code` | `30px` | Large SMS-code digits               |
| `font.lineHeight.700`  | `38px` | 34px display titles                 |

## Letter Spacing

| Token                        |    Value | Usage        |
| ---------------------------- | -------: | ------------ |
| `font.letterSpacing.default` |      `0` | Default text |
| `font.letterSpacing.sidebar` | `-0.3px` | Sidebar text |