# Typography

`src/css/utilities/typography.css`

Use these instead of hardcoding font families, weights, or sizes. All classes read CSS custom properties set from merchant theme settings, so they adapt automatically to font selections.

## Font family and style

| Class                | Purpose                                          |
| -------------------- | ------------------------------------------------ |
| `type__body`         | Body font family, weight, style, and line-height |
| `type__heading`      | Default heading font family, weight, and style   |
| `type__subheading`   | Subheading font family, weight, and style        |
| `type__accent`       | Accent font family, weight, and style            |
| `type__button-style` | Button font family, weight, and capitalization   |
| `type__button-size`  | Button line-height and letter-spacing            |

## Heading styles and sizes

Apply `type__heading-N-style` and `type__heading-N-size` independently so font style and size can be mixed as needed:

| Class                   | Purpose                  |
| ----------------------- | ------------------------ |
| `type__heading-1-style` | H1 font family and style |
| `type__heading-1-size`  | H1 font size             |
| `type__heading-2-style` | H2 font family and style |
| `type__heading-2-size`  | H2 font size             |
| `type__heading-3-style` | H3 font family and style |
| `type__heading-3-size`  | H3 font size             |
| `type__heading-4-style` | H4 font family and style |
| `type__heading-4-size`  | H4 font size             |
| `type__heading-5-style` | H5 font family and style |
| `type__heading-5-size`  | H5 font size             |
| `type__heading-6-style` | H6 font family and style |
| `type__heading-6-size`  | H6 font size             |

## Font sizes

Theme-relative sizes that scale with the merchant's base font setting:

| Class           | Purpose               |
| --------------- | --------------------- |
| `type--smaller` | Smaller than base     |
| `type--small`   | Small                 |
| `type--base`    | Base (default) size   |
| `type--big`     | Larger than base      |
| `type--bigger`  | Largest relative size |