This document aims to resolve the challenges faced by Korean Framer users due to a lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope it provides some assistance to Framer users.

What is Text Style?

Text Style is a feature that allows you to predefine visual attributes of text such as font, size, and color for reuse. Once a style is created, it can be consistently applied across the entire site.

Benefits of Text Styles

• Update one location to reflect changes site-wide

• Maintain a consistent design system

Applying Text Styles

How to Apply

1. Select a text element or part of the text

2. Click Text → Styles in the right property panel

3. Select the desired style

Removing Styles

Click the × button next to the applied style in the property panel

Adding Text Style Breakpoints

You can set breakpoints to ensure text appears naturally on various screen sizes.

How to Set

1. Click the desired text style in Assets → Styles

2. When the Edit Style modal opens, click Add Breakpoint under Breakpoints

3. Defaults provided: Desktop (L), Tablet (M), Mobile (S)

4. Individually set font size, line height, letter spacing, and paragraph spacing for each device

Managing Text Styles

• You can create, modify, and delete styles as needed for your project in the left panel under Assets → Styles.

• If you want to apply multiple styles within a single text box, use Markdown.

Rich Styled Text (Using Markdown)

To apply mixed styles within one text block, you can use Markdown format.
(Example: Emphasize specific words with Strong or Highlight within a sentence)

How to Apply

1. Drag to select specific text

2. Apply individual styles from the right property panel (e.g., emphasize specific words in a sentence in Bold)

Applying Styles to CMS Text

You can also apply text styles to text entered in the CMS. By selecting a CMS text element → specifying the text style in the property panel, you can maintain style consistency across content-focused sites such as blogs, news, and product descriptions.

Styling Link Text

You can specify different styles for link text in its default, Hover, Active, and Current states.

1. Select a text element, then click the Link option

2. Specify link style properties (e.g., color, underline, etc.)

3. Set different colors or effects for each state

How to Override Colors for Specific Text

After applying a style to full text, if you want to change colors only for certain parts, drag the word or sentence whose color you want to change and set only the Color in the property panel (advantageously allows detailed emphasis without creating a new style).

This article is a translated and adapted content of Framer's official document ‘Using text styles’.