> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/utilities/typography.md).

# Type utilities

Utilities for applying the theme's type presets, font families, r1–r15 text sizes, preset resizing, and leading.

Utilities for applying the theme's type presets, font families, and `r1`–`r15` text sizes.

| Class                                                          | What it does                                                                                                |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `type-{p\|h1–h6\|btn\|accordion\|tab\|section\|kicker\|micro}` | Styles the element as that preset: family, style, weight, caps, size, and line height                       |
| `text-r{1–15}`                                                 | `font-size` from step `n` of the type scale, with the step's line-height variables                          |
| `font-family-{heading\|body\|subheading\|accent}`              | Family, style, and weight from that font setting                                                            |
| `font-normal` / `font-bold`                                    | Weight from the active family (`var(--font-weight-normal)` / `var(--font-weight-bold)`)                     |
| `type-resize-{xs\|sm\|md\|lg\|xl}`                             | Moves the element to its preset's size step, from two below (`xs`) to two above (`xl`)                      |
| `type-resize-all-{xs…xl}`                                      | The same, applied to every descendant. Drives the "Text size" settings on richtext blocks                   |
| `vars-type-{preset}`                                           | Sets the preset's `--font-*` variables only. Nothing renders differently until an apply class reads them    |
| `vars-font-family-{family}`                                    | Variables-only version of `font-family-{family}`                                                            |
| `type-apply`                                                   | Applies the inherited type variables: family, caps, size, and line height                                   |
| `apply-font-family`                                            | Applies only family, style, and weight from the inherited variables                                         |
| `text-size-apply`                                              | Applies only `font-size` and `line-height` from the inherited variables                                     |
| `type-case-uppercase` / `type-case-normal`                     | Sets the caps variables: transform, tracking, and the 0.85 size adjust that keeps uppercase optically equal |
| `leading-prose` / `leading-block`                              | Descendants take the prose (roomier) or block (tighter) line height for their size step                     |
| `leading-clip-safe`                                            | Floors line height at 1.15 for descendants, for wrappers that clip overflow                                 |
| `text-size-input` / `text-size-control`                        | Font size of form inputs / of controls, from the row-height system                                          |

The system is variables first: presets and families write `--font-*` variables, and an apply class turns them into rendered CSS. `type-{preset}` and `font-family-{family}` do both steps at once, which is the common case. The `vars-` and `-apply` halves exist so a wrapper can declare type once and mixed content below can pick it up.

`text-r{n}` reads the `--font-r{n}` variables. "Type sizing" selects the Small, Medium, or Large values compiled from `constants.yml`. Values change at 640px and 1024px. Merchant typography settings select the family and step used by each preset. See [Typography](/core-concepts/typography.md).

## Examples

### A basic preset

Use `type-{preset}` to style an element without changing its HTML tag:

```html
<h1 class="type-h2">{{ 'cart.title' | t }}</h1>
```

### Sizing text on the scale

Use `text-r{n}` with a `font-family-{family}` class for text that is not one of the presets:

```html
<span class="font-family-body text-r2">
  {{ 'product.shipping_note' | t }}
</span>
```

The class sets the step's line-height variables with its font size.

### Resizing a preset

Use `type-resize-all-{xs–xl}` on a richtext wrapper to step all of its text up or down without leaving the presets:

```html
<div class="richtext type-resize-all-lg">
  {{ block.settings.text }}
</div>
```

Each preset defines its `xs`–`xl` steps as two scale steps below to two above its own size, so an `lg` heading and an `lg` paragraph both grow one step. This is what the "Text size" setting on text blocks renders.

### Declaring type on a wrapper

Use `vars-type-{preset}` on a wrapper and `type-apply` on the elements that should render it:

```html
<div class="vars-type-h4">
  <span class="type-apply">Styled as an h4</span>
  <span class="type-apply type-resize-sm">One step smaller</span>
</div>
```

The theme's richtext and prose wrappers work this way internally, so custom sections can restyle their content by changing variables on the wrapper alone.

## Customizing

Presets, families, and the "Type sizing" scale are all merchant settings, documented once in [Typography](/core-concepts/typography.md). For how the step scale itself works across breakpoints, see [Scaling](/core-concepts/scaling.md); the spacing steps and their pixel table are on [r-scale spacing](/reference/utilities/spacing.md).