This document aims to alleviate the difficulties faced by local users learning Framer due to the lack of Korean resources. It translates the content of the official blog into Korean and adds practical information. We hope this helps those of you using Framer.

What is a Text Style?

A text style is a feature that allows predefined visual properties of text, like font, size, and color, to be reused. Once a style is created, it can be applied consistently throughout the site.

Advantages of Using Text Styles

• When changes are needed, modify in one place and apply across the board

• Maintain a consistent design system

Applying Text Styles

How to Apply

1. Select text elements or parts of text

2. Click Text → Styles in the right properties panel

3. Choose the desired style

Removing Styles

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

Adding Breakpoints to Text Styles

You can set breakpoints to ensure the text looks natural across various screen sizes.

How to Set

1. Click your desired text style in Assets → Styles

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

3. Preset options: 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 suited to your project in the left panel under Assets → Styles.

• If you want to apply multiple styles in one text box, leverage Markdown.

Rich Styled Text Using Markdown

To mix and apply multiple styles within a single text block, you can use the Markdown format.
(Example: Highlight specific words as Strong or Highlight within a sentence)

How to Apply

1. Select specific text by dragging

2. Apply individual styles from the right properties panel (e.g., emphasize only certain words in a sentence with Bold)

Applying Styles to CMS Text

You can apply the same text styles to text entered into the CMS as well.
Choose CMS Text Element → Specify text style in the Properties Panel to maintain style consistency on content-focused sites like blogs, news, and product descriptions.

Styling Link Text

You can designate styles for each state of the link text: Default, Hover, Active, and Current.

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

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

3. You can set different colors or effects for each state

How to Override Specific Text Colors Only

Even after applying a style to the entire text, if you want to change the color of a part, drag to select the word or sentence and set only the Color in the properties panel (the advantage being you can add detail emphasis without creating a new style).

This article is a translation and adaptation of Framer's official documentation ‘Using text styles’.