Using text styles

Text styles let you define reusable typography settings such as font, size, weight, line height, and color. Using text styles helps maintain consistency across your site and makes global typography updates easier.

Create a text style

You can create text styles from the Assets panel.

To create a text style:

1. Open Assets in the left sidebar.

2. In the Styles section, click the + icon.

3. Select Text.

4. Choose the appropriate heading level or paragraph type.

The new text style becomes available throughout your project.

Apply a text style

By default, text layers do not use a text style.

To apply a text style:

1. Select a text layer or highlight specific text.

2. In the right panel, open Text → Styles.

3. Select the text style you want to apply.

To remove a text style, click the × next to the applied style.

Add breakpoint-specific styles

Text styles can adapt to different screen sizes using breakpoints.

To add breakpoint settings:

1. Open a text style to launch the Edit Style dialog.

2. In the Breakpoints section, click Add Breakpoint.

3. Configure styles for Desktop (L), Tablet (M), and Mobile (S).

4. Adjust properties such as:

   • Font size

   • Line height

   • Letter spacing

   • Paragraph spacing

Each breakpoint can have its own typography settings while remaining part of the same text style.

Manage text styles

To manage existing text styles:

1. Open Assets.

2. Navigate to Styles.

3. Create, edit, rename, or delete styles as needed.

Changes made to a text style are automatically reflected wherever that style is used.

Style rich text content

You can apply multiple text styles within a single text element.

To style specific text:

1. Select the text element.

2. Highlight the text you want to customize.

3. Apply a different text style from the properties panel.

This is useful for creating headings, emphasis, or mixed typography within the same content block.

Use text styles with CMS content

Text styles work the same way with CMS text elements.

Select the CMS text layer and choose an available text style from the properties panel. Any updates made to the style will also apply to connected CMS content.

Style links

You can create custom styles for links within text.

To style a link:

1. Select a text layer containing a link.

2. Locate the Link section in the properties panel.

3. Adjust the Style setting.

4. Customize link states such as:

   • Hover

   • Active

   • Current

Override text colors

You can override the color of specific text without creating a new text style.

To override a color:

1. Apply a text style.

2. Select the text you want to modify.

3. Change the color in the properties panel.

This allows you to emphasize specific words or phrases while keeping the rest of the style consistent.