> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Typography Classes

Define reusable heading and body text styles once in Global Style and apply them across every Composer widget.


A typography class is any CSS class defined in the globals block where the selector starts with `.text-`, or contains a font-related property like `font-size`, `font-family`, `font-weight`, `line-height`, or `letter-spacing`.

### Adding a Typography Class

1. Select a Composer widget, click **Code** at the top of the panel, open the **Globals** tab, and click the **Text** row to open the Globals manager.
2. Under **Classes** in the left sidebar, select **Typography**.
3. Click **+ Add** at the top of the manager and pick **Text style**, then rename the selector (it starts as `.text-style-1`) and set its properties.
4. Changes save automatically as you type.

The class is immediately usable in any Composer widget's HTML:

```html
<h1 class="text-heading-h1">{{ post.title }}</h1>
```

<Callout kind="info">
Free plans get up to **1 typography class** in Global Style, a separate cap from the **1 other class** limit on the [CSS Classes](/uichemy-composer/global-style/css-classes) page. UiChemy Pro removes both caps. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

Widget-specific overrides can adjust a global typography class for one section without affecting its site-wide definition.

### A Recommended Typography Scale

| Class | Purpose | Typical Use |
|---|---|---|
| `.text-heading-h1` | Page-level hero headings | 3–5rem, bold |
| `.text-heading-h2` | Section headings | 2–3rem |
| `.text-body` | Body copy | 1rem with 1.6–1.8 line-height |
| `.text-label` | Tags and labels | Small, uppercase, spaced |

### Font Integration

Load an external font via the [Assets panel](/uichemy-composer/uichemy-widget/code-tab#loading-a-third-party-library), then reference it with a CSS variable inside your typography class definitions.

<Callout kind="tip">
The CSS `clamp()` function lets you write fluid typography that scales smoothly across viewport sizes without a separate rule per breakpoint.
</Callout>

Typography classes only apply the styles you explicitly define, there's no hidden default styling underneath.

### Use Cases

- **Setting up a consistent type scale once**, applied the same way across every page instead of repeating font-size rules.
- **Keeping a client site predictably on-brand**, headings and body text stay consistent without per-widget adjustment.
- **Overriding one section without breaking the rest**, adjust a global typography class locally while the site-wide definition stays intact.

### Related

<Columns cols={2}>
  <Card title="Global Style Overview" href="/uichemy-composer/global-style/overview">
    See how typography fits into the whole Global Style system.
  </Card>
  <Card title="CSS Variables" href="/uichemy-composer/global-style/css-variables">
    See the underlying variables typography is built on.
  </Card>
  <Card title="CSS Classes" href="/uichemy-composer/global-style/css-classes">
    Build reusable classes on top of your typography scale.
  </Card>
</Columns>