---
index: 1
---

# 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       |