Developers

Search

Using text styles

Learn how to create, apply, and manage reusable text styles in Framer.

Text styles define reusable typography settings such as font, size, weight, line height, and color. They help you keep your site consistent and make global updates faster and easier.

Creating a text style

You can create text styles directly from the Assets panel. To create a new text style:

  1. In the left sidebar, go to Assets.

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

  3. Select Text.

  4. Choose the appropriate heading level or paragraph type.

Once created, the style becomes available across your entire project.

Applying and creating styles

By default, all text is unstyled. To apply a style:

  1. Select a text element or specific text.

  2. Click Text → Styles in the properties panel.

  3. To remove a style, click the × in the properties panel.

UI showing applied text style

Adding breakpoints

Text styles can adapt to different device sizes using breakpoints.

  1. Click on a text style to open the “Edit Style” modal.

  2. In the Breakpoints section, click Add Breakpoint to add defaults for Desktop (L), Tablet (M), and Mobile (S).

  3. Customize font size, line height, letter spacing, and paragraph spacing for each breakpoint.

Managing styles

To manage styles:

  1. Go to the Assets → Styles section in the left panel.

  2. Create, edit, or delete styles as needed to fit your project requirements.

Assets panel showing text styles within a project

Rich styled text

Apply multiple styles to a single text element using Markdown. To customize specific text within an element:

  1. Select the text you want to modify.

  2. Apply the desired style in the properties panel.

multiple text elements using markdown

CMS text styles

Text styles for CMS elements work the same way. In the properties panel, select any available style for your CMS text elements.

Link styles

To style links:

  1. Select a text layer and navigate to the Link row.

  2. Adjust the Style property to apply link-specific styles.

  3. Customize states such as hover, active, and current.

CMS link styles

Override colors

To emphasize specific text within a style:

  1. Apply the desired text style.

  2. Select the specific text you want to modify.

  3. Use the properties panel to override the color without creating a new style.

Still experiencing the issue after following the steps above? Feel free to reach out to us through our contact page for further help.

Updated