# Typography

Typography utilities ship as Tailwind CSS plugins. This documentation covers setup, configuration, and usage for both the current and legacy typography systems.

## Quick links

| Guide | Description |
|-------|-------------|
| [Setup Guide](setup.md) | Font loading and Tailwind plugin configuration |
| [Migration Guide](migration.md) | Migrating from Sharp Grotesk to Google Sans Flex |

## Typography systems

### Google Sans Flex (recommended)

The current typography system uses Google Sans Flex, a variable font that supports:

- Multiple weights (400-700) in a single file
- Width axis (`wdth`) for condensed/normal text
- Slant axis (`slnt`) for italic variants
- 3-tier responsive breakpoints (mobile, tablet, desktop)

### Sharp Grotesk (legacy)

The legacy typography system uses Sharp Grotesk static fonts. It remains available for backward compatibility but is frozen and will not receive updates.

## Class reference

### Body text

| Class | Description |
|-------|-------------|
| `body` | Default body text |
| `body-bold` | Bold body text |
| `body-italic` | Italic body text (GSF only) |
| `body-large`, `body-small`, `body-xs` | Size variants |

### Titles (responsive)

| Class | Description |
|-------|-------------|
| `title-1` through `title-6` | Responsive titles (scale across breakpoints) |
| `title-7` through `title-11` | Non-responsive titles |
| `title-bold-1` through `title-bold-5` | Bold responsive titles |

### Component text

| Class | Description |
|-------|-------------|
| `button-text`, `button-text-medium`, `button-text-small` | Button labels |
| `caption-disclaimer` | Captions and disclaimers |
| `overline-text` | Overline text |
| `timer-text`, `timer-text-medium`, `timer-text-small` | Timer displays |

## Related

- [Usage Guide](../usage.md#-typography) - Typography section in main usage guide
- [Colors](../usage.md#-colors) - Color system documentation