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
- Open a Composer widget, switch the Editor tab to Developer, go to Code → Globals, and click Open Globals Manager.
- Under Classes in the left sidebar, select Typography.
- Click Add Class, then enter the selector (for example
.text-heading-h1) and its CSS properties. - Save your changes.
The class is immediately usable in any Composer widget's HTML:
<h1 class="text-heading-h1">{{ post.title }}</h1>
Free plans get up to 1 class in Global Style (typography or component). UiChemy Pro removes the cap. See Free vs Pro.
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, then reference it with a CSS variable inside your typography class definitions.
The CSS clamp() function lets you write fluid typography that scales smoothly across viewport sizes without a separate rule per breakpoint.
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.