Typography Classes
Define reusable heading and body text styles once in Global Style and apply them across every UiChemy 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
- 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.
- Under Classes in the left sidebar, select Typography.
- 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. - Changes save automatically as you type.
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 typography class in Global Style, a separate cap from the 1 other class limit on the CSS Classes page. UiChemy Pro removes both caps. 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.