Typography Classes

Typography classes let you define your site's heading and body text styles once and apply them by class name anywhere in your Proton widgets. Change the definition in the Global Style Manager and every element using that class updates across the entire site.

What A Typography Class Is

A typography class is any CSS class you define in the globals block where the selector starts with .text- or the body contains font-related properties (font-size, font-family, font-weight, line-height, letter-spacing).

The manager classifies these automatically. They appear under the Classes → Typography section.

Examples:

.text-heading-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-heading-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
}

.text-heading-h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.text-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.text-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text-caption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-style: italic;
}

Adding A Typography Class

1. Go to Protuno → Global Style
2. Click the Classes tab
3. Click Add Class
4. Enter the selector (e.g. .text-heading-h1) and the CSS body
5. Click Save

The class is immediately available as a class name in any Proton widget's HTML.

Applying Typography Classes In Widgets

Use the class name directly in the HTML panel:

<section class="pr-boxed">
  <p class="text-label">Featured Project</p>
  <h1 class="text-heading-h1">{{ post.title }}</h1>
  <p class="text-body">{{ post.excerpt|truncate(200) }}</p>
  <a href="{{ post.link }}" class="text-label">Learn More →</a>
</section>

You can combine a global typography class with widget-specific overrides in the CSS panel:

/* Override only the color for this widget's heading */
.hero .text-heading-h1 {
  color: white;
}

Because the Proton widget's CSS is auto-scoped, this override affects only this widget's headings, not every .text-heading-h1 on the site.

Recommended Typography Scale

A practical starting point for a design system:

Using Google Fonts Or Custom Fonts

Load your font in the External Dependencies panel of any Proton widget (or in a site-scope code block), then reference it in the global typography variables and classes:

In a Proton widget's External Dependencies:

https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap

In Global Style Variables:

:root {
  --font-heading: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

In Global Style Typography classes:

.text-heading-h1 {
  font-family: var(--font-heading);
  /* … */
}

Frequently Asked Questions

Does the .text-heading-h1 class override the browser's default heading styles? The class only applies styles you explicitly define. If you define font-size and font-weight but not color, the element's color comes from whatever cascades to it (your theme, another global class, or widget-specific CSS).

Can I have typography classes that do not start with .text-? Yes. The manager classifies any class whose body contains font-related properties as a typography class, regardless of the selector name. But using .text- as a prefix makes the intent clear in your HTML.

Can I use the clamp() function in typography classes? Yes. clamp(min, preferred, max) is standard CSS and works everywhere in Protuno. It is the recommended approach for fluid type that scales between viewport sizes without media queries.

Related

• The Design System
• Variables: Site-Wide Design Tokens
• Reusable CSS Classes