Typography

Apply a Theme Studio typography style to long-form content

The Typography component is designed for long-form, structured content containing headings, paragraphs, lists, links, quotes, and other text elements. It applies one Theme Studio typography style across the entire content block.

Use Typography when you want consistent editorial styling without configuring each text element independently.

How to Use Typography

You’ll find Typography under Content in the Components list.

1. Drag Typography onto the page.
2. Add or edit the long-form content inside the component.
3. Choose a Theme Studio typography Style.
4. Select the semantic HTML tag that best describes the block.
5. Adjust shared sizing, spacing, background, borders, and effects if required.

Component Settings

General

Style selects a Typography style from Theme Studio and defaults to Article. The style controls the appearance of headings, paragraphs, lists, links, and other nested text.

Tag sets the semantic wrapper and is not responsive. Options are Article, Section, Aside, Main Content, Header, Footer, Div, and Span. Article is the default.

Choose the tag for meaning rather than appearance:

• Article — Self-contained editorial content.
• Section — A thematic section of a page.
• Aside — Supporting or secondary content.
• Main Content — The page’s primary content; use only once per page.
• Header or Footer — Introductory or closing content for a page or section.
• Div or Span — Neutral wrappers when no semantic option applies.

Tips and Best Practices

Manually styling links in lists

In Typography → Advanced, add these classes:

[&_a]:!font-body
[&_a]:text-brand-500
[&_a]:underline-offset-2
[&_a:hover]:underline

This styles links inside lists used within the Typography component.

Accessibility

Keep heading levels in a logical order and choose a semantic wrapper that matches the content. Link text should describe its destination without relying on surrounding text.

Related Components

• Markdown — Writes and renders long-form content using Markdown syntax.
• Text — Gives precise styling control over individual headings and short text blocks.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.